Android高仿微信對話列表滑動刪除效果
前言
用過微信的都知道,微信對話列表滑動刪除效果是很不錯的,這個效果我們也可以有。思路其實(shí)很簡單,弄個ListView,然后里面的每個item做成一個可以滑動的自定義控件即可。由于ListView是上下滑動而item是左右滑動,因此會有滑動沖突,也許你需要了解下android中點(diǎn)擊事件的派發(fā)流程,請參考Android源碼分析-點(diǎn)擊事件派發(fā)機(jī)制。我的解決思路是這樣的:重寫ListView的onInterceptTouchEvent方法,在move的時候做判斷,如果是左右滑動就返回false,否則返回true;重寫SlideView(即自定義item控件)的onTouchEvent方法來處理滑動。整個思路沒有問題,滑動沖突也解決了,可是ListView無法得到焦點(diǎn)了,也就是ListView無法處理點(diǎn)擊事件了。讓我們回想下問題出在哪里:我的理解是這樣的,上述處理滑動本身沒有問題,但是有一個副作用,就是會讓外層View失去焦點(diǎn)且無法處理點(diǎn)擊事件。常見的滑動沖突場景,比如launcher內(nèi)部嵌入ListView卻是沒有問題的,因?yàn)檫@個時候launcher不需要獲得焦點(diǎn),需要獲得焦點(diǎn)的是內(nèi)部的ListView。因此,上述處理方式對于外部需要獲得焦點(diǎn)的情況(比如外部是ListView)就不太適合了。于是我就和ttdevs探討,發(fā)現(xiàn)他采用了另外一種思路,我從來沒有想過還可以這樣玩。下面介紹他的思路。
新的思路
不考慮那么復(fù)雜,不采用主流玩法,所有的事件均由外層的ListView做攔截,同時把事件傳遞給SlideView做滑動,這種實(shí)現(xiàn)的確可以達(dá)到效果,而且代碼很簡單,根本不需要處理什么復(fù)雜的滑動沖突。
效果
下面分別為微信和高仿效果
代碼分析
先看SlideView是如何實(shí)現(xiàn)的
看layout xml:
<?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" > <LinearLayout android:id="@+id/view_content" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > </LinearLayout> <RelativeLayout android:id="@+id/holder" android:layout_width="120dp" android:layout_height="match_parent" android:clickable="true" android:background="@drawable/holder_bg"> <TextView android:id="@+id/delete" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/del_icon_normal" android:layout_centerInParent="true" android:gravity="center" android:textColor="@color/floralwhite" android:text="刪除" /> </RelativeLayout> </merge>
上述xml文件中,所有的view都會被放在view_content中,而holder是放置諸如刪除按鈕之類的東西,我們的SlideView會加載這個布局。
再看SlideView.java:
/** * SlideView 繼承自LinearLayout */ public class SlideView extends LinearLayout { private static final String TAG = "SlideView"; private Context mContext; // 用來放置所有view的容器 private LinearLayout mViewContent; // 用來放置內(nèi)置view的容器,比如刪除 按鈕 private RelativeLayout mHolder; // 彈性滑動對象,提供彈性滑動效果 private Scroller mScroller; // 滑動回調(diào)接口,用來向上層通知滑動事件 private OnSlideListener mOnSlideListener; // 內(nèi)置容器的寬度 單位:dp private int mHolderWidth = 120; // 分別記錄上次滑動的坐標(biāo) private int mLastX = 0; private int mLastY = 0; // 用來控制滑動角度,僅當(dāng)角度a滿足如下條件才進(jìn)行滑動:tan a = deltaX / deltaY > 2 private static final int TAN = 2; public interface OnSlideListener { // SlideView的三種狀態(tài):開始滑動,打開,關(guān)閉 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; /** * @param view * current SlideView * @param status * SLIDE_STATUS_ON, SLIDE_STATUS_OFF or * SLIDE_STATUS_START_SCROLL */ public void onSlide(View view, int status); } public SlideView(Context context) { super(context); initView(); } public SlideView(Context context, AttributeSet attrs) { super(context, attrs); initView(); } private void initView() { mContext = getContext(); // 初始化彈性滑動對象 mScroller = new Scroller(mContext); // 設(shè)置其方向?yàn)闄M向 setOrientation(LinearLayout.HORIZONTAL); // 將slide_view_merge加載進(jìn)來 View.inflate(mContext, R.layout.slide_view_merge, this); mViewContent = (LinearLayout) findViewById(R.id.view_content); mHolderWidth = Math.round(TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, mHolderWidth, getResources() .getDisplayMetrics())); } // 設(shè)置按鈕的內(nèi)容,也可以設(shè)置圖標(biāo)啥的,我沒寫 public void setButtonText(CharSequence text) { ((TextView) findViewById(R.id.delete)).setText(text); } // 將view加入到ViewContent中 public void setContentView(View view) { mViewContent.addView(view); } // 設(shè)置滑動回調(diào) public void setOnSlideListener(OnSlideListener onSlideListener) { mOnSlideListener = onSlideListener; } // 將當(dāng)前狀態(tài)置為關(guān)閉 public void shrink() { if (getScrollX() != 0) { this.smoothScrollTo(0, 0); } } // 根據(jù)MotionEvent來進(jìn)行滑動,這個方法的作用相當(dāng)于onTouchEvent // 如果你不需要處理滑動沖突,可以直接重命名,照樣能正常工作 public void onRequireTouchEvent(MotionEvent event) { int x = (int) event.getX(); int y = (int) event.getY(); int scrollX = getScrollX(); Log.d(TAG, "x=" + x + " y=" + y); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { if (!mScroller.isFinished()) { mScroller.abortAnimation(); } if (mOnSlideListener != null) { mOnSlideListener.onSlide(this, OnSlideListener.SLIDE_STATUS_START_SCROLL); } break; } case MotionEvent.ACTION_MOVE: { int deltaX = x - mLastX; int deltaY = y - mLastY; if (Math.abs(deltaX) < Math.abs(deltaY) * TAN) { // 滑動不滿足條件,不做橫向滑動 break; } // 計算滑動終點(diǎn)是否合法,防止滑動越界 int newScrollX = scrollX - deltaX; if (deltaX != 0) { if (newScrollX < 0) { newScrollX = 0; } else if (newScrollX > mHolderWidth) { newScrollX = mHolderWidth; } this.scrollTo(newScrollX, 0); } break; } case MotionEvent.ACTION_UP: { int newScrollX = 0; // 這里做了下判斷,當(dāng)松開手的時候,會自動向兩邊滑動,具體向哪邊滑,要看當(dāng)前所處的位置 if (scrollX - mHolderWidth * 0.75 > 0) { newScrollX = mHolderWidth; } // 慢慢滑向終點(diǎn) this.smoothScrollTo(newScrollX, 0); // 通知上層滑動事件 if (mOnSlideListener != null) { mOnSlideListener.onSlide(this, newScrollX == 0 ? OnSlideListener.SLIDE_STATUS_OFF : OnSlideListener.SLIDE_STATUS_ON); } break; } default: break; } mLastX = x; mLastY = y; } private void smoothScrollTo(int destX, int destY) { // 緩慢滾動到指定位置 int scrollX = getScrollX(); int delta = destX - scrollX; // 以三倍時長滑向destX,效果就是慢慢滑動 mScroller.startScroll(scrollX, 0, delta, 0, Math.abs(delta) * 3); invalidate(); } @Override public void computeScroll() { if (mScroller.computeScrollOffset()) { scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); postInvalidate(); } } }
上述代碼做了很詳細(xì)的說明,這就是滑動控件的完整代碼,大家要明白的是:你所添加的view都是加在SlideView的子View : view_content中的,而不是直接加在SlideView中,只有這樣我們才方便做滑動效果。
接著看ListView的代碼:核心就是下面這一個方法,將點(diǎn)擊事件發(fā)送給SlideView處理。
@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { int x = (int) event.getX(); int y = (int) event.getY(); //我們想知道當(dāng)前點(diǎn)擊了哪一行 int position = pointToPosition(x, y); Log.e(TAG, "postion=" + position); if (position != INVALID_POSITION) { //得到當(dāng)前點(diǎn)擊行的數(shù)據(jù)從而取出當(dāng)前行的item。 //可能有人懷疑,為什么要這么干?為什么不用getChildAt(position)? //因?yàn)長istView會進(jìn)行緩存,如果你不這么干,有些行的view你是得不到的。 MessageItem data = (MessageItem) getItemAtPosition(position); mFocusedItemView = data.slideView; Log.e(TAG, "FocusedItemView=" + mFocusedItemView); } } default: break; } //向當(dāng)前點(diǎn)擊的view發(fā)送滑動事件請求,其實(shí)就是向SlideView發(fā)請求 if (mFocusedItemView != null) { mFocusedItemView.onRequireTouchEvent(event); } return super.onTouchEvent(event); }
最后看Activity的代碼:
public class MainActivity extends Activity implements OnItemClickListener, OnClickListener, OnSlideListener { private static final String TAG = "MainActivity"; private ListViewCompat mListView; private List<MessageItem> mMessageItems = new ArrayList<MainActivity.MessageItem>(); private SlideAdapter mSlideAdapter; // 上次處于打開狀態(tài)的SlideView private SlideView mLastSlideViewWithStatusOn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { 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.default_qq_avatar; item.title = "騰訊新聞"; item.msg = "青島爆炸滿月:大量魚蝦死亡"; item.time = "晚上18:18"; } else { item.iconRes = R.drawable.wechat_icon; item.title = "微信團(tuán)隊(duì)"; 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) { // 這里是我們的item View itemView = mInflater.inflate(R.layout.list_item, null); slideView = new SlideView(MainActivity.this); // 這里把item加入到slideView slideView.setContentView(itemView); // 下面是做一些數(shù)據(jù)緩存 holder = new ViewHolder(slideView); slideView.setOnSlideListener(MainActivity.this); slideView.setTag(holder); } else { holder = (ViewHolder) slideView.getTag(); } MessageItem item = mMessageItems.get(position); 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; } } 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; 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); } } @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // 這里處理ListItem的點(diǎn)擊事件 Log.e(TAG, "onItemClick position=" + position); } @Override public void onSlide(View view, int status) { // 如果當(dāng)前存在已經(jīng)打開的SlideView,那么將其關(guān)閉 if (mLastSlideViewWithStatusOn != null && mLastSlideViewWithStatusOn != view) { mLastSlideViewWithStatusOn.shrink(); } // 記錄本次處于打開狀態(tài)的view if (status == SLIDE_STATUS_ON) { mLastSlideViewWithStatusOn = (SlideView) view; } } @Override public void onClick(View v) { // 這里處理刪除按鈕的點(diǎn)擊事件,可以刪除對話 if (v.getId() == R.id.holder) { int position = mListView.getPositionForView(v); if (position != ListView.INVALID_POSITION) { mMessageItems.remove(position); mSlideAdapter.notifyDataSetChanged(); } Log.e(TAG, "onClick v=" + v); } } }
代碼我都特意寫了注釋,就不多說了。
代碼下載:http://xiazai.jb51.net/201608/yuanma/androidSlide(jb51.net).rar
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android控件ViewPager實(shí)現(xiàn)帶有動畫的引導(dǎo)頁
這篇文章主要為大家詳細(xì)介紹了Android控件ViewPager實(shí)現(xiàn)帶有動畫的引導(dǎo)頁,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05AndroidImageSlider實(shí)現(xiàn)炫酷輪播廣告效果
這篇文章主要為大家詳細(xì)介紹了AndroidImageSlider實(shí)現(xiàn)炫酷輪播廣告效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08Android框架Volley使用:ImageRequest請求實(shí)現(xiàn)圖片加載
這篇文章主要介紹了Android框架Volley使用:ImageRequest請求實(shí)現(xiàn)圖片加載的相關(guān)知識,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05Android sdutio配置Zxing進(jìn)行掃碼功能的實(shí)現(xiàn)方法
這篇文章主要介紹了Android sdutio配置Zxing進(jìn)行掃碼功能的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-05-05Android實(shí)現(xiàn)TCP客戶端支持讀寫操作
這篇文章主要介紹了Android-實(shí)現(xiàn)TCP客戶端,支持讀寫操作,主要是通過socket讀寫tcp,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02Android為應(yīng)用添加數(shù)字角標(biāo)的簡單實(shí)現(xiàn)
應(yīng)用的角標(biāo)是用來標(biāo)記有多少條提醒沒讀,本篇文章主要介紹了Android為應(yīng)用添加角標(biāo)的簡單實(shí)現(xiàn),有興趣的可以了解一下。2017-04-04Android中使用Intent在Activity之間傳遞對象(使用Serializable或者Parcelable)的
這篇文章主要介紹了 Android中使用Intent在Activity之間傳遞對象(使用Serializable或者Parcelable)的方法的相關(guān)資料,需要的朋友可以參考下2016-01-01Android Studio 當(dāng)build時候出錯解決辦法
這篇文章主要介紹了 Android Studio在build的時候出現(xiàn)transformClassesWithDexForDebug錯誤解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05