高仿微信對話列表滑動刪除效果
前言
用過微信的都知道。微信對話列表滑動刪除效果是非常不錯的,這個效果我們也能夠有。
思路事實上非常easy,弄個ListView。然後裏面的每一個item做成一個能夠滑動的自己定義控件就可以。由於ListView是上下滑動而item是左右滑動,因此會有滑動沖突。或許你須要了解下android中點擊事件的派發流程,請參考Android源代碼分析-點擊事件派發機制。我的解決思路是這種:重寫ListView的onInterceptTouchEvent方法,在move的時候做推斷,假設是左右滑動就返回false。否則返回true;重寫SlideView(即自己定義item控件)的onTouchEvent方法來處理滑動。
整個思路沒有問題。滑動沖突也攻克了,但是ListView無法得到焦點了,也就是ListView無法處理點擊事件了。讓我們回憶下問題出在哪裏:我的理解是這種。上述處理滑動本身沒有問題,但是有一個副作用。就是會讓外層View失去焦點且無法處理點擊事件。
常見的滑動沖突場景。比方launcher內部嵌入ListView卻是沒有問題的,由於這個時候launcher不須要獲得焦點,須要獲得焦點的是內部的ListView。
因此,上述處理方式對於外部須要獲得焦點的情況(比方外部是ListView)就不太適合了。於是我就和ttdevs探討,發現他採用了第二種思路。我從來沒有想過還能夠這樣玩。以下介紹他的思路。
新的思路
不考慮那麽復雜,不採用主流玩法,全部的事件均由外層的ListView做攔截,同一時候把事件傳遞給SlideView做滑動,這樣的實現的確能夠達到效果,並且代碼非常easy,根本不須要處理什麽復雜的滑動沖突。
效果
以下分別為微信和高仿效果
代碼分析
先看SlideView是怎樣實現的
看layout xml:
<com.macc.firstsecretary_UI.ListViewCompat android:id="@+id/list" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff4f7f9" android:cacheColorHint="#00000000" android:divider="#dddbdb" android:dividerHeight="1.0px" android:drawSelectorOnTop="false" android:listSelector="@android:color/transparent" android:scrollbars="none" />
再看com.macc.firstsecretary_UI.ListViewCompat類的代碼:
private static final String TAG = "ListViewCompat"; private SlideView mFocusedItemView; public ListViewCompat(Context context) { super(context); } public ListViewCompat(Context context, AttributeSet attrs) { super(context, attrs); } public ListViewCompat(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public void shrinkListItem(int position) { View item = getChildAt(position); if (item != null) { try { ((SlideView) item).shrink(); } catch (ClassCastException e) { e.printStackTrace(); } } } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: { int x = (int) event.getX(); int y = (int) event.getY(); int position = pointToPosition(x, y); Log.e(TAG, "postion=" + position); if (position != INVALID_POSITION) { Message data = (Message) getItemAtPosition(position); mFocusedItemView = data.getSlideView(); Log.e(TAG, "FocusedItemView=" + mFocusedItemView); } } default: break; } if (mFocusedItemView != null) { mFocusedItemView.onRequireTouchEvent(event); } return true; }
再看SlideView.java:
public class SlideView extends LinearLayout { private static final String TAG = "SlideView"; private Context mContext; private LinearLayout mViewContent; private RelativeLayout mHolder; private Scroller mScroller; private OnSlideListener mOnSlideListener; private int mHolderWidth = 120; private int mLastX = 0; private int mLastY = 0; private static final int TAN = 2; private boolean isScroller=false;//是否已經滑動 public interface OnSlideListener { 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 or SLIDE_STATUS_OFF */ 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); setOrientation(LinearLayout.HORIZONTAL); 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())); } public void setButtonText(CharSequence text) { ((TextView)findViewById(R.id.delete)).setText(text); } public void setContentView(View view) { mViewContent.addView(view); } public void setOnSlideListener(OnSlideListener onSlideListener) { mOnSlideListener = onSlideListener; } public void shrink() { if (getScrollX() != 0) { this.smoothScrollTo(0, 0); } } 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; } int newScrollX = scrollX - deltaX; if (deltaX != 0) { if(isScroller){ this.shrink(); }else{ 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.75 > 0) { newScrollX = mHolderWidth; } if(isScroller){ this.shrink(); isScroller=false; }else{ this.smoothScrollTo(newScrollX, 0); if (mOnSlideListener != null) { mOnSlideListener.onSlide(this, newScrollX == 0 ?OnSlideListener.SLIDE_STATUS_OFF : OnSlideListener.SLIDE_STATUS_ON); } isScroller=true; } break; } default: break; } mLastX = x; mLastY = y; } private void smoothScrollTo(int destX, int destY) { // 緩慢滾動到指定位置 int scrollX = getScrollX(); int delta = destX - scrollX; mScroller.startScroll(scrollX, 0, delta, 0, Math.abs(delta) * 3); invalidate(); } @Override public void computeScroll() { if (mScroller.computeScrollOffset()) { scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); postInvalidate(); } }
上述代碼做了非常具體的說明,這就是滑動控件的完整代碼,大家要明確的是:你所加入的view都是加在SlideView的子View : view_content中的,而不是直接加在SlideView中,僅僅有這樣我們才方便做滑動效果。
最後一步我們來看看適配器裏面的代碼:
public class Carpa_MySelf_MessageCenterAdapter extends BaseAdapter implements OnSlideListener,OnClickListener{ private LayoutInflater inflater; private List<Message> messages; private Context context; private SlideView mSlideView; private int position;//刪除位置數據 private Handler handler; public Carpa_MySelf_MessageCenterAdapter(Context context,ArrayList<Message> messages,Handler handler){ setData(messages); this.context=context; inflater=LayoutInflater.from(context); this.handler=handler; } public void setData(ArrayList<Message> messages){ if(messages==null){ this.messages=new ArrayList<Message>(); }else{ this.messages=messages; } } public void setPosition(int position){ this.position=position; } @Override public int getCount() { // TODO Auto-generated method stub return messages.size(); } @Override public Object getItem(int position) { // TODO Auto-generated method stub return messages.get(position); } @Override public long getItemId(int position) { // TODO Auto-generated method stub return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; SlideView slideView = (SlideView) convertView; if (slideView == null) { View itemView = inflater.inflate(R.layout.carpa_myself_message_center_item, null); slideView = new SlideView(context); slideView.setContentView(itemView); holder = new ViewHolder(slideView); slideView.setOnSlideListener(Carpa_MySelf_MessageCenterAdapter.this); slideView.setTag(holder); } else { holder = (ViewHolder) slideView.getTag(); } Message msgMessage=messages.get(position); msgMessage.setSlideView(slideView); msgMessage.getSlideView().shrink(); String sourceString=msgMessage.getSourceStr(); holder.tvContent.setText("內容:"+msgMessage.getContentStr()); holder.tvTime.setText(UtilTools.fromatDate(msgMessage.getTimeStr())); holder.deleteHolder.setOnClickListener(Carpa_MySelf_MessageCenterAdapter.this); if(sourceString.equals("Traffic")){ holder.tvSource.setText("信息來源:66"); holder.iView.setBackgroundResource(R.drawable.carpa_wz); }else if(sourceString.equals("DaiJia")){ holder.tvSource.setText("信息來源:99"); holder.iView.setBackgroundResource(R.drawable.car_deldrive); }else if(sourceString.equals("Nianjian")){ holder.tvSource.setText("信息來源:33"); holder.iView.setBackgroundResource(R.drawable.car_yearcheck); }else if(sourceString.equals("JiaSZ")){ holder.tvSource.setText("信息來源:88"); holder.iView.setBackgroundResource(R.drawable.car_zjbl); }else if(sourceString.equals("HKJiaSZ")){ holder.tvSource.setText("信息來源:11"); holder.iView.setBackgroundResource(R.drawable.car_hongkong); } return slideView; } class ViewHolder { public ImageView iView; public TextView tvSource; public TextView tvTime; public TextView tvContent; public ViewGroup deleteHolder; ViewHolder(View view) { iView=(ImageView)view.findViewById(R.id.message_center_iv); tvSource = (TextView) view.findViewById(R.id.message_center_source); tvTime = (TextView) view.findViewById(R.id.message_center_time); tvContent = (TextView) view.findViewById(R.id.message_center_content); deleteHolder = (ViewGroup)view.findViewById(R.id.holder); } } @Override public void onClick(View v) { // TODO Auto-generated method stub if (v.getId() == R.id.holder) { Log.e("info", "onClick v=" + v); // messages.remove(position); // this.notifyDataSetChanged(); handler.sendEmptyMessage(Tab_MySelf_MessageCenter.HANDLER_DELETE); } } @Override public void onSlide(View view, int status) { // TODO Auto-generated method stub if (mSlideView != null && mSlideView != view) { mSlideView.shrink(); } if (status == SLIDE_STATUS_ON) { mSlideView = (SlideView) view; } }
代碼已貼完成!
僅供參考,謝謝!
高仿微信對話列表滑動刪除效果