之前在Android高手进阶一书中看到微信消息界面的一种特别好的实现方式，特此分享：
代码部分均转自本书，分析来自本人，也算是自我笔记吧
按照正常的实现思路，ListView中加载一个可以左右滑动的视图。然后我们处理滑动事件，如果是上下滑动，ListView就拦截处理，即返回true，否则，ListView就不拦截，交给旗下的子View去处理，即返回false。以上就是对滑动事件的处理，但是点击事件呢？
点击事件触发时，如果ListView默认返回false，即不拦截，由于事件是向下传递的，这就导致了ListView无法处理点击事件（参照微信消息界面，即消息无法点击进入）。如果ListView默认返回true，即拦截，那么子View中的组件的点击事件又会失效（参照微信消息界面中的删除键，即删除是无法点击的）。
这里处理事件是比较麻烦的。但是书中的作者提供了一种更为巧妙的方法：
给item中的view自定义一个事件的处理方法。ListView默认返回true，即处理事件。但是同时，ListView还要将事件传给之前写好的item的自定义事件处理方法。这样，就实现了无论事件如何，ListView和它item中的View都要进行事件的处理。
好吧，是时候给item中的自定义View起个名了，我们就叫他SlideView，其中包含俩个视图，一个就是主内容视图，文中包含了icon，title，time，content；另一个是隐藏视图，即删除键。
下面的图是对SlideView中代码内容的分析：
下面贴出代码。注释已经写好，观众老爷请自行观看：
public class SlideView extends LinearLayout {
private static final String TAG = "SlideView";
private Context mContext;
//item的主布局
private LinearLayout mViewContent;
//item的隐藏布局
private RelativeLayout mHolder;
//提供手指松开后的弹性滑动效果
private Scroller mScroll;
//自定义的滑动回调接口，用来向上层(ListView)通知处于打开状态的SlideView滑回原状态事件
private OnSlideListener mOnSlideListener;
//隐藏布局的宽度 dp
private int mHolderWidth = 120;
//记录上次滑动的坐标
private int mLastX = 0;
private int mLastY = 0;
//用来控制滑动角度，仅当满足这个角度a的时候才进行滑动:tan a = deltaX / deltaY = 2 意思为X坐标的增量至少大于Y增量的2倍
//这样比直接判断左右距离好，因为人手再竖直的滑动都会产生左右的偏差，这个时候item也会跟着左右滑动，严重影响效果
private static final int TAN = 2;
//接口
public interface OnSlideListener {
//SlideView的三种滑动状态，关闭，开始滑动，打开
public static final int SLIDE_STATUS_OFF = 0;
public static final int SLIDE_STATUS_START_SCROLL = 1;
public static final int SLIDE_STATUS_ON = 2;
public void onSlide(View view, int status);
}
//构造方法
public SlideView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
//构造方法
public SlideView(Context context) {
super(context);
initView();
}
private void initView() {
mContext = getContext();
//初始化滑动对象
mScroll = new Scroller(mContext);
//设置根布局为横向
setOrientation(LinearLayout.HORIZONTAL);
//☆将slide_view的XML布局加载进来
View.inflate(mContext, R.layout.slide_view, this);
mViewContent = (LinearLayout) findViewById(R.id.view_content);
//将dp转化为px并四舍五入
mHolderWidth = Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mHolderWidth, getResources().getDisplayMetrics()));
// mHolder = (RelativeLayout) findViewById(R.id.holder);
}
public void setButtonText(String text) {
((TextView) findViewById(R.id.delete)).setText(text);
}
//将View添加到ViewContent中
public void setContentView(View view) {
mViewContent.addView(view);
}
public void setmOnSlideListener(OnSlideListener onSlideListener) {
this.mOnSlideListener = onSlideListener;
}
//将状态置为关闭
public void shrink() {
//如果有滑动值
if (getScrollX() != 0) {
this.smoothScrollTo(0, 0);
}
}
//如果不需要处理滑动冲突，可以直接重命名，照样能正常工作,但是需要上层调用（ListView将事件整个传给这个方法）
//参数：x ：当前的View内的按下时的坐标
// mLastX ：上次事件的View内的按下时的坐标
// getScrollX ：已经滑动的距离或坐标 getScrollX（）意思为View手机屏幕显示区域左上角坐标-View整个大小的原点（左上角）坐标,结果正好为滑动的距离
// newScrollX ：要滑动的到的坐标
// deltaX ：要滑动的距离,这里结果为负
//计算公式： deltaX = x - mLastX;
// newScrollX = getScrollX - deltaX;
public void onRequireTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
//获取当前应该滑动到的位置坐标
//得到此时已经滑动的距离
int scrollX = getScrollX();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
//当点击时，如果滑动动画还没有执行完，则暂停动画
if (!mScroll.isFinished()) {
mScroll.abortAnimation();
}
//监听执行部分1：
if (mOnSlideListener != null) {
//this代表本组件自身滑动
mOnSlideListener.onSlide(this, OnSlideListener.SLIDE_STATUS_START_SCROLL);
}
break;
}
case MotionEvent.ACTION_MOVE: {
//此时mLastX为上次的坐标，x为按下时的坐标,则deltaX为他们的差值,即要滑动的距离
int deltaX = x - mLastX;
int deltaY = y - mLastY;
if (Math.abs(deltaX) < Math.abs(deltaY) * TAN) {
//滑动不满足条件
break;
}
//计算滑动是否合法，防止滑动越界
//newScrollX为已经滑动的距离-要滑动的距离 为什么是-：因为显示右面的布局，是向左滑动！
//newScrollX即为滑动的总长！
int newScrollX = scrollX - deltaX;
if (deltaX != 0) {
//<0 滑动的总长不能小于0，故不滑动
if (newScrollX < 0) {
newScrollX = 0;
} else if (newScrollX > mHolderWidth) {//滑动的总长最多等于隐藏布局的长度
newScrollX = mHolderWidth;
}
//整段意思为：即使这时手指一直在滑动，由于滑动总长超出了界限，所以只能再次滑动到边界值
//这里就是具体的滑动方法：
this.scrollTo(newScrollX, 0);
}
break;
}
case MotionEvent.ACTION_UP: {
//松开手，自己向俩边滑
int newScrollX = 0;
if (scrollX - mHolderWidth * 0.65 > 0) {
newScrollX = mHolderWidth;
}
// 慢慢滑向终点
this.smoothScrollTo(newScrollX, 0);
//监听执行部分2：
if (mOnSlideListener != null) {
mOnSlideListener.onSlide(this, newScrollX == 0 ? OnSlideListener.SLIDE_STATUS_OFF : OnSlideListener.SLIDE_STATUS_ON);
}
break;
}
default:
break;
}
//每次得到事件，就置为当前坐标；第一次有Down消耗事件
mLastX = x;
mLastY = y;
}
private void smoothScrollTo(int destX, int destY) {
//destX 要滑动到的X坐标
//delta 要滑动的距离
// 缓慢滚动到指定位置
int scrollX = getScrollX();
int delta = destX - scrollX;
// ☆以三倍时长滑向destX，效果就是慢慢滑动
//前四个参数分别是开始的坐标和要滑动的距离
mScroll.startScroll(scrollX, 0, delta, 0, Math.abs(delta) * 3);
invalidate();
}
//Scroller类的方法，自行查询
@Override
public void computeScroll() {
if (mScroll.computeScrollOffset()) {
scrollTo(mScroll.getCurrX(), mScroll.getCurrY());
postInvalidate();
}
}
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
那ListView部分实现就简单很多了，我们只需要将事件整体传下去：
public class MyListView extends ListViewCompat { private SlideView mFocusedItemView; public MyListView(Context context) { super(context); } public MyListView(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onTouchEvent(MotionEvent event) { //在点击的时候，获取当前位置的View，并将事件传给他，是滑动还是点击就靠他自己处理了，点击他自己content中view，即点击事件，只需要我们传递，是不需要我们去处理的 //这样做避免了事件分发时导致的点击事件无法传递 //☆非常好的设计：我们直接在down的瞬间将事件同时传给给View，不论ListView作何事件的处理，它的子View都要进行事件的处理！ switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { int x = (int) event.getX(); int y = (int) event.getY(); //我们想知道当前点击了哪一行 int position = pointToPosition(x, y); //如果不是无效的位置 if (position != INVALID_POSITION) { //得到当前点击行的数据从而取出当前行的item。 //可能有人怀疑，为什么要这么干？为什么不用getChildAt(position)？ //因为ListView会进行缓存，如果你不这么干，有些行的view你是得不到的。 //getItemAtPosition(position);得到的Adapter中的这个item的参数，之前我们在这个参数中传入了SlideView MessageItem data = (MessageItem) getItemAtPosition(position); mFocusedItemView = data.slideView; } } default: break; } //向当前点击的view发送滑动事件请求，其实就是向SlideView发请求 if (mFocusedItemView != null) { mFocusedItemView.onRequireTouchEvent(event); } return super.onTouchEvent(event); } }
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
MainActivity就是做一些常规操作了，如接口的处理，listView数据的添加，数据存储Bean MessageItem的创建，listView Adapter的创建和使用。代码中已经有了注释，这里就不赘述了。
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener, View.OnClickListener, SlideView.OnSlideListener {
private static int minWidth;
private static final String TAG = "MainActivity";
private ListViewCompat mListView;
private List<MessageItem> mMessageItems = new ArrayList<MessageItem>();
private SlideAdapter mSlideAdapter;
// 上次处于打开状态的SlideView
private SlideView mLastSlideViewWithStatusOn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
DisplayMetrics metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
minWidth = metric.widthPixels; // 屏幕宽度（像素）
//添加数据
mListView = (ListViewCompat) findViewById(R.id.list);
for (int i = 0; i < 20; i++) {
MessageItem item = new MessageItem();
if (i % 3 == 0) {
item.iconRes = R.drawable.test1;
item.title = "腾讯新闻";
item.msg = "青岛爆炸满月：大量鱼虾死亡";
item.time = "晚上18:18";
} else {
item.iconRes = R.drawable.test2;
item.title = "微信团队";
item.msg = "欢迎你使用微信";
item.time = "12月18日";
}
mMessageItems.add(item);
}
mSlideAdapter = new SlideAdapter();
mListView.setAdapter(mSlideAdapter);
mListView.setOnItemClickListener(this);
}
//适配器类
private class SlideAdapter extends BaseAdapter {
private LayoutInflater mInflater;
SlideAdapter() {
super();
mInflater = getLayoutInflater();
}
@Override
public int getCount() {
return mMessageItems.size();
}
@Override
public Object getItem(int position) {
return mMessageItems.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
SlideView slideView = (SlideView) convertView;
if (slideView == null) {
// 加载Content布局
View itemView = mInflater.inflate(R.layout.list_item, null);
slideView = new SlideView(MainActivity.this);
// 这里把Content布局加入到slideView
slideView.setContentView(itemView);
// 下面是做一些数据缓存,这样设计也可以！
holder = new ViewHolder(slideView);
//设置滑动监听事件
slideView.setmOnSlideListener(MainActivity.this);
slideView.setTag(holder);
} else {
holder = (ViewHolder) slideView.getTag();
}
//MessageItem也可以存储布局的！
MessageItem item = mMessageItems.get(position);
//将SlideView布局传给MessageItem，以便在ListView点击事件中将事件传给SlideView用到
item.slideView = slideView;
//初始化时关闭所有隐藏布局
item.slideView.shrink();
holder.icon.setImageResource(item.iconRes);
holder.title.setText(item.title);
holder.msg.setText(item.msg);
holder.time.setText(item.time);
holder.deleteHolder.setOnClickListener(MainActivity.this);
return slideView;
}
}
//存储数据的Bean
public class MessageItem {
public int iconRes;
public String title;
public String msg;
public String time;
public SlideView slideView;
}
private static class ViewHolder {
public ImageView icon;
public TextView title;
public TextView msg;
public TextView time;
public ViewGroup deleteHolder;
public LinearLayout line;
ViewHolder(View view) {
icon = (ImageView) view.findViewById(R.id.icon);
title = (TextView) view.findViewById(R.id.title);
msg = (TextView) view.findViewById(R.id.msg);
time = (TextView) view.findViewById(R.id.time);
deleteHolder = (ViewGroup) view.findViewById(R.id.holder);
line = (LinearLayout) view.findViewById(R.id.line);
//☆：通过在代码中设置这个属性，可以设定content布局横向充满屏幕
line.setMinimumWidth(minWidth);
}
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(MainActivity.this, "ItemClick", Toast.LENGTH_SHORT).show();
}
@Override
public void onClick(View v) {
// 这里处理删除按钮的点击事件，可以删除对话
if (v.getId() == R.id.holder) {
int position = mListView.getPositionForView(v);
if (position != ListView.INVALID_POSITION) {
mMessageItems.remove(position);
mSlideAdapter.notifyDataSetChanged();
}
}
}
//记录新打开的view并关闭已经打开的view，mLastSlideViewWithStatusOn直接就是缓存的SlideView视图
@Override
public void onSlide(View view, int status) {
// 如果当前存在已经打开的SlideView，那么将其关闭
if (mLastSlideViewWithStatusOn != null
&& mLastSlideViewWithStatusOn != view) {
mLastSlideViewWithStatusOn.shrink();
}
// 记录本次处于打开状态的view
if (status == SLIDE_STATUS_ON) {
mLastSlideViewWithStatusOn = (SlideView) view;
}
}
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
activity_main:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="monster.weixin.MainActivity">
<monster.weixin.MyListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"></monster.weixin.MyListView>
</LinearLayout>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?><!--merge 用于消除视图层级，这个布局可以直接引用，外部布局即为引用它的布局-->
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/view_content"
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="#4499"
android:orientation="horizontal"></LinearLayout>
<RelativeLayout
android:id="@+id/holder"
android:layout_width="120dp"
android:layout_height="match_parent"
android:background="#339999"
android:clickable="true">
<TextView
android:id="@+id/delete"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:gravity="center"
android:text="删除"
android:textColor="#ffffff"
android:textStyle="bold" />
</RelativeLayout>
</merge>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="90dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="10dp" />
<LinearLayout
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:gravity="center_vertical|left" />
<TextView
android:id="@+id/time"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:layout_weight="2"
android:gravity="center_vertical|right" />
</LinearLayout>
<TextView
android:id="@+id/msg"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#ffffff" />
</LinearLayout>
</LinearLayout>
好吧，作为菜鸟说一下感想：善于思考巧妙的设计思路比一味的敲代码还要重要。
最后补充一张效果图
1927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
