Android 写一个可以横向滑动条目的列表

作者: 李斯维 | 来源:发表于2016-10-28 21:01 被阅读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 ，在应用中查看效果（选择“电视节目表”，然后随便进入一个频道，就可以看到本例子）。

Android 写一个可以横向滑动条目的列表

功能分析

创建自定义控件

控件的设计

控件的实现

使用

代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

自定义View

geek之路

Android 安卓技术分享

Android知识

Android开发

Android技术知识

Android

Android开发