Android 写一个可以横向滑动条目的列表
2016-10-28 本文已影响4374人
李斯维
在开发中，会发现很多列表希望条目能够侧滑，侧滑出来一两个按钮什么的，例如QQ就可以侧滑出删除按钮。这边文章就是教大家写一个可以侧滑的自定义控件。另外，本文的内容不是属于Android中比较高深的内容，高手可以略过。通过阅读本文，你可能学习到的知识有：
- 自定义侧滑控件的实现
- Android事件传递简要内容
- 属性动画
ValueAnimator的使用
先来看一下要实现的侧滑是什么样的效果：
sample.gif
因为这个例子很简单所以代码就不单独拿出来了，想看代码的可以去这个仓库：https://github.com/Lee-swifter/UToolBox 。 这个一个工具箱的APP，里面包含有一些查询的工具，选择“电视节目表”，然后随便进入一个频道，就可以看到这个例子了。代码的话请搜索类
TvChannelItem。
这个例子其实就是类似于QQ消息界面的侧滑，只是QQ是滑出来两个按钮，而我的只是一个按钮，另外在滑动出来后再进行上下滑动时我没有做处理。下面看一下这个控件是怎么做出来的吧。
功能分析
首先可以看到，这个侧滑是列表中的条目的功能，那么需不需要对ListView或RecyclerView做一做手脚呢？这个是不需要的，因为这个侧滑只是属于条目的功能，虽然是放在列表里面的，但是并非需要列表特别支持。另外如果要修改列表控件的话，势必会降低这个功能的可移植性。所以我们仅仅是针对每一个条目写一个可侧滑的自定义控件。虽然很多人会说上下滑动的东西里面再加上左右滑动，肯定会出现事件冲突的情况。没错，这个问题是有的，但是也很好解决。
说句题外话，ListView已经有些过时，现在应该转到RecyclerView上了，这个例子中的代码使用的都是RecyclerView。
创建自定义控件
既然已经确定只需要创建自定义控件，那么就开始考虑这个自定义控件要怎么去设计。
控件的设计
- 首先，能看到这个控件是由一些其他基本控件组成，因此我们需要写的只是一个组合控件，而非继承自
View类； - 再次，控件中所有的基本控件整体是横向排列的，使用
LinearLayout可以方便的做出这种布局。因此我们继承LinearLayout； - 关于滑动：因为控件的内容是要大于控件的宽度的，因此再滑动的时候应该移动的是控件的内容，而不是控件的位置。这个说是好说，但是这里有一些函数和变量如果弄混了，就很容易卡在这里；
- 上下滑动与左右滑动的冲突：首先，我们必须要判断用户当前是要进行上下滑动还是左右滑动，如果是上下滑动，可以交由
RecyclerView来处理；如果是左右滑动，那么我们必须屏蔽列表的事件拦截，至于怎么滑动，就是我们自己说的算了。
控件的实现
整体就是这些问题了，下面就开始编码，如果在写代码过程中出现了什么问题，那就再去解决什么问题。
- 自定义控件的布局：
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 注意下面这个布局的宽度是match_parent的，也就是占用整个控件宽度-->
<LinearLayout
android:orientation="vertical"
android:padding="5dip"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">
<TextView
android:id="@+id/widget_channel_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="1"
android:textSize="16sp"/>
<TextView
android:id="@+id/widget_channel_rel"
android:layout_marginTop="5dip"
android:layout_width="wrap_content"
android:lines="1"
android:layout_height="wrap_content"/>
</LinearLayout>
<!-- 这个Button是放在上面的布局的右边，也就是超出了控件显示部分-->
<Button
android:id="@+id/widget_channel_live_button"
android:layout_width="100dip"
android:layout_height="match_parent"
android:text="@string/live"
android:textSize="16sp"
android:background="@android:color/holo_green_light"/>
</merge>
这里需要注意的第一个LinearLayout的宽度和下面的Button的宽度，这两个宽度是这个布局的重点。
- 创建自定义控件：
public class TvChannelItem extends LinearLayout {
private int touchSlop;
public TvChannelItem(Context context) {
super(context, null);
}
public TvChannelItem(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TvChannelItem(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOrientation(HORIZONTAL);
LayoutInflater.from(context).inflate(R.layout.widget_tv_channel, this);
name = ButterKnife.findById(this, R.id.widget_channel_name);
url = ButterKnife.findById(this, R.id.widget_channel_rel);
button = ButterKnife.findById(this, R.id.widget_channel_live_button);
touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
}
}
在创建自定义控件的时候，不需要什么特别的操作，只是将布局通过LayoutInflater引入进来，并找到响应的控件。注意在构造时初始化了一个变量touchSlop，这个变量指的是可以考虑为用户进行滑动操作的最小像素距离。也就是说如果滑动超过了这个值，那么认为是滑动操作；如果是小于这个值，则认为是点击操作。
- 滑动处理
滑动的处理是这个控件的关键部分，内容移动、冲突处理都在这里做。下面贴出代码，并在代码中给出注释：
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//记录按下的位置
downX = event.getRawX();
downY = event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
float nowX = event.getRawX();
float nowY = event.getRawY();
//判断用户是上下滑动还是左右滑动
if (!touchMode && (Math.abs(nowX - downX) > touchSlop || Math.abs(nowY - downY) > touchSlop)) {
touchMode = true; //一旦该变量被置为true，则滑动方向确定
if (Math.abs(nowX - downX) > touchSlop && Math.abs(nowY - downY) <= touchSlop) {
slide = true; //此时认为是左右滑动
getParent().requestDisallowInterceptTouchEvent(true); //请求父控件不要拦截触摸事件
//以下代码避免出发点击事件
MotionEvent cancelEvent = MotionEvent.obtain(event);
cancelEvent.setAction(MotionEvent.ACTION_CANCEL | (event.getActionIndex() << MotionEvent.ACTION_POINTER_INDEX_SHIFT));
onTouchEvent(cancelEvent);
}
}
if (slide) {
float diffX = downX - nowX + lastScrollX;
if (diffX < 0) //设置阻尼
diffX /= 3;
else if (diffX > button.getWidth())
diffX = (diffX - button.getWidth()) / 3 + button.getWidth();
scrollTo((int) diffX, 0); //滑动到手指位置
}
break;
case MotionEvent.ACTION_UP:
if (slide) { //如果是左右滑动，那么松手时需要自动滑到指定位置
ValueAnimator animator; //使用的是ValueAnimator，而非Scroller
if (getScrollX() > button.getWidth() / 2) {
animator = ValueAnimator.ofInt(getScrollX(), button.getWidth());
} else {
animator = ValueAnimator.ofInt(getScrollX(), 0);
}
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
scrollTo((Integer) animation.getAnimatedValue(), 0);
}
});
animator.start();
slide = false;
}
touchMode = false; //重置变量
break;
}
return super.onTouchEvent(event);
}
以上就是本控件的关键代码。由几个地方需要讲解一下：
getParent().requestDisallowInterceptTouchEvent(true); 此代码用于避免父控件拦截事件。因为在Android的事件传递过程中，如果一个控件的onTouchEvent函数返回true，那么后续的事件都会传递到这个控件中处理，但是此时父控件仍然可以拦截事件，而子控件会接收到一个ACTION_CANCEL的事件。在本例中，此行代码可以避免在横向滑动时触发上下滑动。
- 此处移动是移动的控件中的内容，而控件本身没有移动，
scrollX就是只内容距控件左边的相对距离。如果你使用了translationX，那么你会发现控件位置在移动，而右边的按钮并没有被移动出来。如果对这个问题有疑问，可以看看这篇文章http://blog.csdn.net/whsdu929/article/details/52152520。 - 在手指抬起来的时候，滑出来的控件将滑回指定位置，此时可以用
Scroller来实现，但本例中使用的是ValueAnimator，也仅仅是这个要比用Scroller方便一些。至于ValueAnimator的用法，本例子只是最简单的，其详细用法可以自行搜索。
使用
控件已经写好了，那么就看看怎么使用。因为这个控件仅仅是一个LinearLayout，因此其使用也没有需要额外注意的地方，只要会使用RecyclerView，就会使用这个。只不过把布局换成了单个自定义控件而已。
下面是布局代码：
<?xml version="1.0" encoding="utf-8"?>
<lic.swifter.box.widget.TvChannelItem
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item_tv_channel"
android:layout_width="match_parent"
android:layout_height="70dip" />
Adapter代码：
public class TvChannelAdapter extends RecyclerView.Adapter<TvChannelHolder> {
public class TvChannelHolder extends RecyclerView.ViewHolder {
private TvChannelItem channelItem;
public TvChannelHolder(View itemView) {
super(itemView);
channelItem = ButterKnife.findById(itemView, R.id.item_tv_channel);
}
public void setChannel(TvChannel channel) {
channelItem.setChannel(channel);
}
}
private List<TvChannel> list;
public TvChannelAdapter(List<TvChannel> list) {
this.list = list;
}
@Override
public TvChannelHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View rootView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_tv_channel, parent, false);
return new TvChannelHolder(rootView);
}
@Override
public void onBindViewHolder(TvChannelHolder holder, int position) {
holder.setChannel(list.get(position));
}
@Override
public int getItemCount() {
return list.size();
}
}
RecyclerView布局代码：
recycler.setLayoutManager(new LinearLayoutManager(this));
recycler.setAdapter(new TvChannelAdapter(response.result));
以上代码中包含了我项目中的一些内容，但是那些只是数据的封装。总体使用方式就是这样，就是RecyclerView正常使用而已。
代码
本文章中的代码都可以在https://github.com/Lee-swifter/UToolBox 中找到，搜索TvChannelItem就可以找到本文中描述的自定义控件。
也可以从这里直接下载应用http://fir.im/tobox ，在应用中查看效果（选择“电视节目表”，然后随便进入一个频道，就可以看到本例子）。
