Android高仿微信對(duì)話列表滑動(dòng)刪除效果
前言
用過(guò)微信的都知道,微信對(duì)話列表滑動(dòng)刪除效果是很不錯(cuò)的,這個(gè)效果我們也可以有。思路其實(shí)很簡(jiǎn)單,弄個(gè)ListView,然后里面的每個(gè)item做成一個(gè)可以滑動(dòng)的自定義控件即可。由于ListView是上下滑動(dòng)而item是左右滑動(dòng),因此會(huì)有滑動(dòng)沖突,也許你需要了解下android中點(diǎn)擊事件的派發(fā)流程,請(qǐng)參考Android源碼分析-點(diǎn)擊事件派發(fā)機(jī)制。我的解決思路是這樣的:重寫ListView的onInterceptTouchEvent方法,在move的時(shí)候做判斷,如果是左右滑動(dòng)就返回false,否則返回true;重寫SlideView(即自定義item控件)的onTouchEvent方法來(lái)處理滑動(dòng)。整個(gè)思路沒有問(wèn)題,滑動(dòng)沖突也解決了,可是ListView無(wú)法得到焦點(diǎn)了,也就是ListView無(wú)法處理點(diǎn)擊事件了。讓我們回想下問(wèn)題出在哪里:我的理解是這樣的,上述處理滑動(dòng)本身沒有問(wèn)題,但是有一個(gè)副作用,就是會(huì)讓外層View失去焦點(diǎn)且無(wú)法處理點(diǎn)擊事件。常見的滑動(dòng)沖突場(chǎng)景,比如launcher內(nèi)部嵌入ListView卻是沒有問(wèn)題的,因?yàn)檫@個(gè)時(shí)候launcher不需要獲得焦點(diǎn),需要獲得焦點(diǎn)的是內(nèi)部的ListView。因此,上述處理方式對(duì)于外部需要獲得焦點(diǎn)的情況(比如外部是ListView)就不太適合了。于是我就和ttdevs探討,發(fā)現(xiàn)他采用了另外一種思路,我從來(lái)沒有想過(guò)還可以這樣玩。下面介紹他的思路。
新的思路
不考慮那么復(fù)雜,不采用主流玩法,所有的事件均由外層的ListView做攔截,同時(shí)把事件傳遞給SlideView做滑動(dòng),這種實(shí)現(xiàn)的確可以達(dá)到效果,而且代碼很簡(jiǎn)單,根本不需要處理什么復(fù)雜的滑動(dòng)沖突。
效果
下面分別為微信和高仿效果
代碼分析
先看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都會(huì)被放在view_content中,而holder是放置諸如刪除按鈕之類的東西,我們的SlideView會(huì)加載這個(gè)布局。
再看SlideView.java:
/** * SlideView 繼承自LinearLayout */ public class SlideView extends LinearLayout { private static final String TAG = "SlideView"; private Context mContext; // 用來(lái)放置所有view的容器 private LinearLayout mViewContent; // 用來(lái)放置內(nèi)置view的容器,比如刪除 按鈕 private RelativeLayout mHolder; // 彈性滑動(dòng)對(duì)象,提供彈性滑動(dòng)效果 private Scroller mScroller; // 滑動(dòng)回調(diào)接口,用來(lái)向上層通知滑動(dòng)事件 private OnSlideListener mOnSlideListener; // 內(nèi)置容器的寬度 單位:dp private int mHolderWidth = 120; // 分別記錄上次滑動(dòng)的坐標(biāo) private int mLastX = 0; private int mLastY = 0; // 用來(lái)控制滑動(dòng)角度,僅當(dāng)角度a滿足如下條件才進(jìn)行滑動(dòng):tan a = deltaX / deltaY > 2 private static final int TAN = 2; public interface OnSlideListener { // SlideView的三種狀態(tài):開始滑動(dòng),打開,關(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(); // 初始化彈性滑動(dòng)對(duì)象 mScroller = new Scroller(mContext); // 設(shè)置其方向?yàn)闄M向 setOrientation(LinearLayout.HORIZONTAL); // 將slide_view_merge加載進(jìn)來(lái) 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è)置滑動(dòng)回調(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來(lái)進(jìn)行滑動(dòng),這個(gè)方法的作用相當(dāng)于onTouchEvent // 如果你不需要處理滑動(dòng)沖突,可以直接重命名,照樣能正常工作 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) { // 滑動(dòng)不滿足條件,不做橫向滑動(dòng) break; } // 計(jì)算滑動(dòng)終點(diǎn)是否合法,防止滑動(dòng)越界 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)松開手的時(shí)候,會(huì)自動(dòng)向兩邊滑動(dòng),具體向哪邊滑,要看當(dāng)前所處的位置 if (scrollX - mHolderWidth * 0.75 > 0) { newScrollX = mHolderWidth; } // 慢慢滑向終點(diǎn) this.smoothScrollTo(newScrollX, 0); // 通知上層滑動(dòng)事件 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) { // 緩慢滾動(dòng)到指定位置 int scrollX = getScrollX(); int delta = destX - scrollX; // 以三倍時(shí)長(zhǎng)滑向destX,效果就是慢慢滑動(dòng) 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ì)的說(shuō)明,這就是滑動(dòng)控件的完整代碼,大家要明白的是:你所添加的view都是加在SlideView的子View : view_content中的,而不是直接加在SlideView中,只有這樣我們才方便做滑動(dòng)效果。
接著看ListView的代碼:核心就是下面這一個(gè)方法,將點(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)長(zhǎng)istView會(huì)進(jìn)行緩存,如果你不這么干,有些行的view你是得不到的。 MessageItem data = (MessageItem) getItemAtPosition(position); mFocusedItemView = data.slideView; Log.e(TAG, "FocusedItemView=" + mFocusedItemView); } } default: break; } //向當(dāng)前點(diǎn)擊的view發(fā)送滑動(dòng)事件請(qǐng)求,其實(shí)就是向SlideView發(fā)請(qǐng)求 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)擊事件,可以刪除對(duì)話 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); } } }
代碼我都特意寫了注釋,就不多說(shuō)了。
代碼下載:http://xiazai.jb51.net/201608/yuanma/androidSlide(jb51.net).rar
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 高仿微信朋友圈動(dòng)態(tài)支持雙擊手勢(shì)放大并滑動(dòng)查看圖片效果
- Android實(shí)現(xiàn)微信首頁(yè)左右滑動(dòng)切換效果
- Android仿微信列表滑動(dòng)刪除 如何實(shí)現(xiàn)滑動(dòng)列表SwipeListView
- Android仿微信列表滑動(dòng)刪除之可滑動(dòng)控件(一)
- Android實(shí)現(xiàn)仿微信tab高亮icon粘著手的滑動(dòng)效果
- Android仿微信滑動(dòng)彈出編輯、刪除菜單效果、增加下拉刷新功能
- Android仿微信右滑返回功能的實(shí)例代碼
相關(guān)文章
Android控件ViewPager實(shí)現(xiàn)帶有動(dòng)畫的引導(dǎo)頁(yè)
這篇文章主要為大家詳細(xì)介紹了Android控件ViewPager實(shí)現(xiàn)帶有動(dòng)畫的引導(dǎo)頁(yè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05AndroidImageSlider實(shí)現(xiàn)炫酷輪播廣告效果
這篇文章主要為大家詳細(xì)介紹了AndroidImageSlider實(shí)現(xiàn)炫酷輪播廣告效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08Android框架Volley使用:ImageRequest請(qǐng)求實(shí)現(xiàn)圖片加載
這篇文章主要介紹了Android框架Volley使用:ImageRequest請(qǐng)求實(shí)現(xiàn)圖片加載的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下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客戶端,支持讀寫操作,主要是通過(guò)socket讀寫tcp,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02Android為應(yīng)用添加數(shù)字角標(biāo)的簡(jiǎn)單實(shí)現(xiàn)
應(yīng)用的角標(biāo)是用來(lái)標(biāo)記有多少條提醒沒讀,本篇文章主要介紹了Android為應(yīng)用添加角標(biāo)的簡(jiǎn)單實(shí)現(xiàn),有興趣的可以了解一下。2017-04-04Android中使用Intent在Activity之間傳遞對(duì)象(使用Serializable或者Parcelable)的
這篇文章主要介紹了 Android中使用Intent在Activity之間傳遞對(duì)象(使用Serializable或者Parcelable)的方法的相關(guān)資料,需要的朋友可以參考下2016-01-01Android Studio 當(dāng)build時(shí)候出錯(cuò)解決辦法
這篇文章主要介紹了 Android Studio在build的時(shí)候出現(xiàn)transformClassesWithDexForDebug錯(cuò)誤解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05