用HorizontalScrollView实现类似微信的滑动删除
测试于:Android2.2+
对于Android来说按键操作已经在减少,越来越多的手势操作层出不穷,今天介绍一款LIstView的Item滑动删除的实现方式。
原理:
利用HorizontalScrollView可以横向滚动的特点实现滑动,根据动态的设置要展示的区域宽度,使得其余选项操作被挤出屏幕外面,从而实现单条滑动菜单的样式。
实现步骤:
- 实现Listview的Item布局文件item_list.layout
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/hsv"
android:layout_width="wrap_content"
android:layout_height="80dip"
android:scrollbars="none" > <LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" > <LinearLayout
android:id="@+id/ll_content"
android:layout_width="match_parent"
android:layout_height="match_parent" > <TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="" />
</LinearLayout> <LinearLayout
android:id="@+id/ll_action"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" > <Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="@string/action1" /> <Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:background="@android:color/darker_gray"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="@string/action2" /> <Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="@string/action3" />
</LinearLayout>
</LinearLayout> </HorizontalScrollView> - 准备MainActivity初始化Listview
package com.yzy.horizontalscrollview; import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.widget.ListView;
import com.yzy.horizontalscrollview.R; public class MainActivity extends Activity { private ListView mListView; private MyAdapter mAdapter; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mListView = (ListView) findViewById(R.id.listView);
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
mAdapter = new MyAdapter(this, dm.widthPixels);
mListView.setAdapter(mAdapter);
}
} - 继承BaseAdapter实现自定义的适配器MyAdapter
package com.yzy.horizontalscrollview; import java.util.ArrayList;
import java.util.List; import android.content.Context;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.HorizontalScrollView;
import android.widget.TextView;
import com.yzy.horizontalscrollview.R; public class MyAdapter extends BaseAdapter implements View.OnClickListener {
// 数据源,用于存放颜色值的。
private List<Integer> colors;
private Context mContext;
// 屏幕宽度,由于我们用的是HorizontalScrollView,所以按钮选项应该在屏幕外
private int mScreentWidth;
private View view; /**
* 构造方法
*
* @param context
* @param screenWidth
*/
public MyAdapter(Context context, int screenWidth) { // 初始化
mContext = context;
mScreentWidth = screenWidth; // 填充list的内容模拟数据,否则应该异步执行
colors = new ArrayList<Integer>();
for (int i = 0; i < 15; i++) {
colors.add(R.color.blue);
}
} @Override
public int getCount() {
return colors.size();
} @Override
public Object getItem(int position) {
return colors.get(position);
} @Override
public long getItemId(int position) {
return position;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
// 如果没有设置过,初始化convertView
if (convertView == null) {
// 获得设置的view
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_list, parent, false); // 初始化holder
holder = new ViewHolder();
holder.hSView = (HorizontalScrollView) convertView.findViewById(R.id.hsv); holder.action = convertView.findViewById(R.id.ll_action);
holder.btOne = (Button) convertView.findViewById(R.id.button1);
holder.btTwo = (Button) convertView.findViewById(R.id.button2);
holder.btThree = (Button) convertView.findViewById(R.id.button3);
holder.tvContent = (TextView) convertView.findViewById(R.id.tv); // 设置内容view的大小为屏幕宽度,这样按钮就正好被挤出屏幕外
holder.content = convertView.findViewById(R.id.ll_content);
LayoutParams lp = holder.content.getLayoutParams();
lp.width = mScreentWidth; convertView.setTag(holder);
} else {
// 有直接获得ViewHolder
holder = (ViewHolder) convertView.getTag();
}
// 把位置放到view中,这样点击事件就可以知道点击的是哪一条item
holder.btOne.setTag(position);
holder.btTwo.setTag(position);
holder.btThree.setTag(position); // 设置监听事件
convertView.setOnTouchListener(new View.OnTouchListener()
{
@Override
public boolean onTouch(View v, MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
if (view != null) {
ViewHolder viewHolder1 = (ViewHolder) view.getTag();
viewHolder1.hSView.smoothScrollTo(0, 0);
}
case MotionEvent.ACTION_UP:
// 获得ViewHolder
ViewHolder viewHolder = (ViewHolder) v.getTag();
view = v;
// 获得HorizontalScrollView滑动的水平方向值.
int scrollX = viewHolder.hSView.getScrollX(); // 获得操作区域的长度
int actionW = viewHolder.action.getWidth(); // 注意使用smoothScrollTo,这样效果看起来比较圆滑,不生硬
// 如果水平方向的移动值<操作区域的长度的一半,就复原
if (scrollX < actionW / 2)
{
viewHolder.hSView.smoothScrollTo(0, 0);
}
else// 否则的话显示操作区域
{
viewHolder.hSView.smoothScrollTo(actionW, 0);
}
return true;
}
return false;
}
}); // 这里防止删除一条item后,ListView处于操作状态,直接还原
if (holder.hSView.getScrollX() != 0) {
holder.hSView.scrollTo(0, 0);
} // 设置背景颜色,设置填充内容.
holder.content.setBackgroundResource(colors.get(position));
holder.tvContent.setText("" + position); // 设置监听事件
holder.btOne.setOnClickListener(this);
holder.btTwo.setOnClickListener(this);
holder.btThree.setOnClickListener(this); return convertView;
} /**
* ViewHolder
*
* @Title:
* @Description:主要是避免了不断的view获取初始化.
* @Author:yzy
* @Since:2013-10-22
*/
class ViewHolder {
public HorizontalScrollView hSView; public View content;
public TextView tvContent; public View action;
public Button btOne;
public Button btTwo;
public Button btThree;
} @Override
public void onClick(View v) {
int position = (Integer) v.getTag();
switch (v.getId()) {
case R.id.button1:
colors.add(R.color.blue);
break;
case R.id.button2:
colors.remove(position);
break;
case R.id.button3:
if (colors.get(position) == R.color.blue) {
colors.set(position, R.color.red);
} else {
colors.set(position, R.color.blue);
}
break; default:
break;
}
// 刷新ListView内容
notifyDataSetChanged();
}
}
效果图:
还有很多的实现方式,希望大家多多指教哦,附件里面是源码本人测试通过的。
下载:ListViewHorizontalScrollview.zip
import android.content.Context;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.widget.HorizontalScrollView; public class CustomHScrollView extends HorizontalScrollView{
private GestureDetector mGestureDetector;
private View.OnTouchListener mGestureListener; private static final String TAG = "CustomHScrollView"; /**
* @function CustomHScrollView constructor
* @param context Interface to global information about an application environment.
*
*/
public CustomHScrollView(Context context) {
super(context);
// TODO Auto-generated constructor stub
mGestureDetector = new GestureDetector(new HScrollDetector());
setFadingEdgeLength(0);
} /**
* @function CustomHScrollView constructor
* @param context Interface to global information about an application environment.
* @param attrs A collection of attributes, as found associated with a tag in an XML document.
*/
public CustomHScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
mGestureDetector = new GestureDetector(new HScrollDetector());
setFadingEdgeLength(0);
} /**
* @function CustomHScrollView constructor
* @param context Interface to global information about an application environment.
* @param attrs A collection of attributes, as found associated with a tag in an XML document.
* @param defStyle style of view
*/
public CustomHScrollView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
mGestureDetector = new GestureDetector(new HScrollDetector());
setFadingEdgeLength(0);
} @Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return super.onInterceptTouchEvent(ev) && mGestureDetector.onTouchEvent(ev);
} // Return false if we're scrolling in the y direction
class HScrollDetector extends SimpleOnGestureListener {
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
if(Math.abs(distanceX) > Math.abs(distanceY)) {
return true;
} return false;
}
} }