您好,登錄后才能下訂單哦!
小編給大家分享一下Android中如何通過ViewDragHelper實(shí)現(xiàn)ListView的Item的側(cè)拉劃出效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
要實(shí)現(xiàn)的自定義控件效果圖:
關(guān)于ViewDragHelper的使用,大家可以先看這篇文章ViewDragHelper的使用介紹
實(shí)現(xiàn)該自定義控件的大體步驟如下:
1.ViewDragHelper使用的3部曲,初始化ViewDragHelper,傳遞觸摸事件,實(shí)現(xiàn)ViewDragHelper.Callback抽象類.
2.需要?jiǎng)?chuàng)建2個(gè)直接的子View,分別是前景View和背景View,代表ListView每一項(xiàng)Item的布局的組成,如下所示:
未劃出時(shí)顯示的FrontView:
劃出后的右邊顯示BackView:
以上2部分就是該自定義控件要包含的2個(gè)直接子View.
3.需要獲取FrontView的寬高,寬度其實(shí)就是屏幕的寬度,高度就是ListView每一項(xiàng)Item的高度;還需獲取BackView的寬度,因?yàn)檫@個(gè)寬度就是側(cè)滑的最大范圍.
4.需要確定FrontView和BackView的初始位置,在onLayout方法中確定,即默認(rèn)情況下是只顯示FrontView的.這個(gè)實(shí)現(xiàn)起來也很簡單,FrontView的left=0,BackView的left=FrontView的right即可.
5.需要同步FrontView和BackView的滑動(dòng),即滑動(dòng)FrontView的時(shí)候BackView也需要跟著劃出,同樣滑動(dòng)BackView的時(shí)候也需要FrontView跟著滑動(dòng).
6.需要解決側(cè)拉劃出的效果是否有動(dòng)畫效果.平滑滑動(dòng)的動(dòng)畫可以通過ViewDragHelper輕松實(shí)現(xiàn).
好了,直接上自定義的SwipeLayout源碼:
/** * Created by mChenys on 2015/12/26. */ public class SwipeLayout extends FrameLayout { private ViewDragHelper.Callback mCallback; private ViewDragHelper mDragHelper; private View mBackView; //item的側(cè)邊布局 private View mFrontView;//當(dāng)前顯示的item布局 private int mWidth; //屏幕的寬度,mFrontView的寬度 private int mHeight; //mFrontView的高度 private int mRange;//mFrontView側(cè)拉時(shí)向左移動(dòng)的最大距離,即mBackView的寬度 public SwipeLayout(Context context) { this(context, null); } public SwipeLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); } public SwipeLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } //1.初始ViewDragHelper private void init() { mCallback = new ViewDragHelper.Callback() { //3.在回調(diào)方法中處理觸摸事件 @Override public boolean tryCaptureView(View child, int pointerId) { return true; //允許所有子控件的滑動(dòng) } //設(shè)定滑動(dòng)的邊界值 @Override public int clampViewPositionHorizontal(View child, int left, int dx) { if (child == mFrontView) { //前景View的滑動(dòng)范圍是(0~ -mRange) if (left > 0) { left = 0; } else if (left < -mRange) { left = -mRange; } } if (child == mBackView) { //背景View的滑動(dòng)范圍是(mWidth - mRange ~ mWidth) if (left > mWidth) { left = mWidth; } else if (left < (mWidth - mRange)) { left = mWidth - mRange; } } //返回修正過的建議值 return left; } //監(jiān)聽View的滑動(dòng)位置的改變,同步前景View和背景View的滑動(dòng)事件 @Override public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) { if (changedView == mFrontView) { //當(dāng)滑動(dòng)前景View時(shí),也需要滑動(dòng)背景View mBackView.offsetLeftAndRight(dx); } else if (changedView == mBackView) { //當(dāng)滑動(dòng)背景View時(shí),也需要滑動(dòng)前景View mFrontView.offsetLeftAndRight(dx); } // 兼容老版本 invalidate(); } //處理釋放后的開啟和關(guān)閉動(dòng)作 @Override public void onViewReleased(View releasedChild, float xvel, float yvel) { if (xvel < 0) { //有向左滑動(dòng)的速度,則打開 open(); } else if (xvel == 0 && mFrontView.getLeft() < -mRange / 2.0f) { //前景View向左滑動(dòng)的left小于背景View寬度一半的負(fù)值時(shí),打開 open(); } else { //其他情況為關(guān)閉 close(); } } }; mDragHelper = ViewDragHelper.create(this, mCallback); } //2.傳遞觸摸事件 @Override public boolean onInterceptTouchEvent(MotionEvent ev) { return mDragHelper.shouldInterceptTouchEvent(ev); } @Override public boolean onTouchEvent(MotionEvent event) { try { mDragHelper.processTouchEvent(event); } catch (Exception e) { e.printStackTrace(); } return true; } //獲取子控件的引用 @Override protected void onFinishInflate() { super.onFinishInflate(); mBackView = getChildAt(0); //獲取背景View,即展示數(shù)據(jù)的Item的右邊隱藏的側(cè)滑布局 mFrontView = getChildAt(1);//獲取前景View,即展示數(shù)據(jù)的Item } //獲取子控件的相關(guān)寬高信息 @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = mFrontView.getMeasuredWidth(); mHeight = mFrontView.getMeasuredHeight(); mRange = mBackView.getMeasuredWidth(); } //確定子控件的初始位置 @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); layoutChildView(false); } /** * 放置子控件的位置 * * @param isOpen 是否是打開前景View,true打開,false關(guān)閉 */ private void layoutChildView(boolean isOpen) { //計(jì)算前景View的位置,將坐標(biāo)信息封裝到矩形中 Rect fontRect = computerFontViewRect(isOpen); //擺放前景View mFrontView.layout(fontRect.left, fontRect.top, fontRect.right, fontRect.bottom); //擺放背景View,left坐標(biāo)是前景View的right坐標(biāo) int left = fontRect.right; mBackView.layout(left, 0, left + mRange, mHeight); //由于上面是后擺放背景View,所以會(huì)覆蓋前景View,因此需要通過下面的方式將前景View顯示在前面 bringChildToFront(mFrontView); } /** * 計(jì)算前景View的坐標(biāo) * * @param isOpen 是否是打開前景View * @return */ private Rect computerFontViewRect(boolean isOpen) { int left = isOpen ? -mRange : 0; return new Rect(left, 0, left + mWidth, mHeight); } /** * 打開側(cè)邊欄mBackView,默認(rèn)平滑打開 */ public void open() { open(true); } /** * 打開側(cè)邊欄mBackView * * @param isSmooth 是否平滑打開 */ public void open(boolean isSmooth) { if (isSmooth) { if (mDragHelper.smoothSlideViewTo(mFrontView, -mRange, 0)) { //動(dòng)畫在繼續(xù) ViewCompat.postInvalidateOnAnimation(this); } } else { layoutChildView(true); } } /** * 關(guān)閉側(cè)邊欄mBackView,默認(rèn)平滑關(guān)閉 */ public void close() { close(true); } /** * 關(guān)閉側(cè)邊欄mBackView * * @param isSmooth 是否平滑關(guān)閉 */ public void close(boolean isSmooth) { if (isSmooth) { if (mDragHelper.smoothSlideViewTo(mBackView, mWidth, 0)) { //動(dòng)畫在繼續(xù) ViewCompat.postInvalidateOnAnimation(this); } } else { layoutChildView(false); } } @Override public void computeScroll() { super.computeScroll(); if (mDragHelper.continueSettling(true)) { //動(dòng)畫還在繼續(xù) ViewCompat.postInvalidateOnAnimation(this); } } }
如何使用呢?
使用該控件,必須要讓其有2個(gè)直接的子控件,如下布局所示:
<?xml version="1.0" encoding="utf-8"?> <mchenys.net.csdn.blog.myswipelayout.view.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/sl" android:layout_width="match_parent" android:layout_height="60dp" android:minHeight="60dp" android:background="#44000000" > <!--后置布局--> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:id="@+id/tv_call" android:layout_width="60dp" android:layout_height="match_parent" android:background="#666666" android:gravity="center" android:text="Edit" android:textColor="#ffffff" /> <TextView android:id="@+id/tv_del" android:layout_width="60dp" android:layout_height="match_parent" android:background="#ff0000" android:gravity="center" android:text="Delete" android:textColor="#ffffff" /> </LinearLayout> <!--前景布局--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#44ffffff" android:gravity="center_vertical" android:orientation="horizontal" > <ImageView android:id="@+id/iv_image" android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:src="@drawable/head_1" /> <TextView android:id="@+id/tv_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:text="Name" /> </LinearLayout> </mchenys.net.csdn.blog.myswipelayout.view.SwipeLayout>
就是這么簡單,跑起來就可以用了.不過這個(gè)只是定義出了SwipeLayout控件,如果要集成到ListView中,還需要做進(jìn)一步的處理.
例如實(shí)現(xiàn)如下效果:
需要考慮2點(diǎn):
1.在自定義SwipeLayout控件內(nèi)需要處理3種狀態(tài),打開,關(guān)閉,拖拽.
2.需要添加一個(gè)側(cè)滑監(jiān)聽接口,用于對(duì)外暴露當(dāng)前SwipeLayout的打開,關(guān)閉,拖拽,將要打開,將要關(guān)閉這5種情況.接口定義如下所示:
/** * 側(cè)拉SwipeLayout的監(jiān)聽 * Created by mChenys on 2015/12/26. */ public interface SwipeViewListener { //關(guān)閉 void onClose(SwipeLayout mSwipeLayout); //打開 void onOpen(SwipeLayout mSwipeLayout); //正在側(cè)拉 void onDraging(SwipeLayout mSwipeLayout); //開始要去關(guān)閉 void onStartClose(SwipeLayout mSwipeLayout); //開始要去開啟 void onStartOpen(SwipeLayout mSwipeLayout); }
SwipeLayout的3種狀態(tài),用enum表示即定義接收獲取SwipeViewListener監(jiān)聽器的方法1
//以下是定義SwipeLayout的打開,關(guān)閉,滑動(dòng)的3種狀態(tài) public enum Status { CLOSE, OPEN, DRAGING; } //默認(rèn)關(guān)閉 private Status mStatus = Status.CLOSE; //滑動(dòng)的監(jiān)聽器 private SwipeViewListener mSwipeViewListener; //設(shè)置監(jiān)聽器 public void setSwipeViewListener(SwipeViewListener swipeViewListener) { mSwipeViewListener = swipeViewListener; }
在onViewPositionChanged方法內(nèi)添加多一個(gè)方法,用于處理拖拽的監(jiān)聽.
/** * 處理滑動(dòng),打開,關(guān)閉的3種情況 * 在onViewPositionChanged 調(diào)用 */ private void dispatchSwipeEvent() { if (mSwipeViewListener != null) { mSwipeViewListener.onDraging(this); } //記錄上一次的狀態(tài) Status preStatus = mStatus; //獲取當(dāng)前的狀態(tài) mStatus = getCurrStatus(); if (preStatus != mStatus && null != mSwipeViewListener) { //說明有狀態(tài)發(fā)生變化 if (mStatus == Status.CLOSE) { //關(guān)閉 mSwipeViewListener.onClose(this); } else if (mStatus == Status.OPEN) { //打開 mSwipeViewListener.onOpen(this); } else if (mStatus == Status.DRAGING) { //這里有2中情況,要么要打開,要么要關(guān)閉 if (preStatus == Status.CLOSE) { //如果之前是關(guān)閉的,那么就是要打開 mSwipeViewListener.onStartOpen(this); } else if (preStatus == Status.OPEN) { //如果之前是打開,那么就是要關(guān)閉 mSwipeViewListener.onStartClose(this); } } } } /** * 獲取當(dāng)前的狀態(tài) * * @return */ private Status getCurrStatus() { int left = mFrontView.getLeft(); if (left == 0) { return Status.CLOSE; } else if (left == -mRange) { return Status.OPEN; } return Status.DRAGING; }
最后來看看MainActivity的測試:
public class MainActivity extends AppCompatActivity { private List<String> mData = new ArrayList<>();//數(shù)據(jù)集合 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //獲取數(shù)據(jù),注意:Arrays.asList返回的并不是一個(gè)java.util.ArrayList,而是一個(gè)Arrays類的內(nèi)部類,該List實(shí)現(xiàn)是不能進(jìn)行增刪操作的 //因此必須再包裝一下 mData = new ArrayList<>(Arrays.asList(Constant.NAME)); ListView listView = new ListView(this); listView.setAdapter(mAdapter); setContentView(listView); } //自定義適配器 private BaseAdapter mAdapter = new BaseAdapter() { //標(biāo)記當(dāng)前打開的SwipeLayout的集合 private List<SwipeLayout> mOpenItem = new ArrayList<>(); @Override public int getCount() { return mData.size(); } @Override public String getItem(int position) { return mData.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(final int position, View convertView, ViewGroup parent) { ViewHolder holder = null; if (null == convertView) { holder = new ViewHolder(); convertView = View.inflate(MainActivity.this, R.layout.item_list, null); holder.mSwipeLayout = (SwipeLayout) convertView; holder.tvName = (TextView) convertView.findViewById(R.id.tv_name); holder.tvDel = (TextView) convertView.findViewById(R.id.tv_del); holder.tvEdit = (TextView) convertView.findViewById(R.id.tv_edit); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } //設(shè)置側(cè)拉監(jiān)聽 holder.mSwipeLayout.setSwipeViewListener(getSwipeViewListener()); holder.tvName.setText(getItem(position)); holder.tvDel.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //刪除 mData.remove(position); mAdapter.notifyDataSetChanged(); } }); holder.tvEdit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { ToastUtils.showToast(MainActivity.this,"編輯"); } }); return convertView; } class ViewHolder { TextView tvName, tvDel, tvEdit; SwipeLayout mSwipeLayout; } //獲取滑動(dòng)監(jiān)聽器 private SwipeViewListener getSwipeViewListener() { return new SwipeViewListener() { @Override public void onClose(SwipeLayout mSwipeLayout) { //關(guān)閉是移除 mOpenItem.remove(mSwipeLayout); ToastUtils.showToast(MainActivity.this, "關(guān)閉"); } @Override public void onOpen(SwipeLayout mSwipeLayout) { //打開時(shí)添加 mOpenItem.add(mSwipeLayout); ToastUtils.showToast(MainActivity.this, "打開"); } @Override public void onDraging(SwipeLayout mSwipeLayout) { } @Override public void onStartClose(SwipeLayout mSwipeLayout) { ToastUtils.showToast(MainActivity.this, "開始關(guān)閉"); } @Override public void onStartOpen(SwipeLayout mSwipeLayout) { //將要打開時(shí),需要將集合中的之前打開的SwipeLayout統(tǒng)統(tǒng)關(guān)閉 for (SwipeLayout swipeLayout : mOpenItem) { swipeLayout.close(); } mOpenItem.clear();//清空集合 ToastUtils.showToast(MainActivity.this, "開始打開"); } }; } }; }
看完了這篇文章,相信你對(duì)“Android中如何通過ViewDragHelper實(shí)現(xiàn)ListView的Item的側(cè)拉劃出效果”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。