android 横向滑动日期_Android 写一个可以横向滑动条目的列表

在开发中，会发现很多列表希望条目能够侧滑，侧滑出来一两个按钮什么的，例如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来处理；如果是左右滑动，那么我们必须屏蔽列表的事件拦截，至于怎么滑动，就是我们自己说的算了。

控件的实现

整体就是这些问题了，下面就开始编码，如果在写代码过程中出现了什么问题，那就再去解决什么问题。

自定义控件的布局：

android:layout_width="match_parent"

android:layout_height="match_parent">

android:orientation="vertical"

android:padding="5dip"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center_vertical">

android:id="@+id/widget_channel_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:lines="1"

android:textSize="16sp"/>

android:id="@+id/widget_channel_rel"

android:layout_marginTop="5dip"

android:layout_width="wrap_content"

android:lines="1"

android:layout_height="wrap_content"/>

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"/>

这里需要注意的第一个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，就会使用这个。只不过把布局换成了单个自定义控件而已。

下面是布局代码：

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 {

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 list;

public TvChannelAdapter(List 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 ，在应用中查看效果(选择“电视节目表”，然后随便进入一个频道，就可以看到本例子)。