Android開發(fā)中RecyclerView模仿探探左右滑動(dòng)布局功能
我在此基礎(chǔ)上優(yōu)化了部分代碼, 添加了滑動(dòng)回調(diào), 可自定義性更強(qiáng). 并且添加了點(diǎn)擊按鈕左右滑動(dòng)的功能.
據(jù)說無圖都不敢發(fā)文章了.
看圖:
1:這種功能, 首先需要自己管理布局
繼承 RecyclerView.LayoutManager
, 顯示自己管理布局, 比如最多顯示4個(gè)view, 并且都是居中顯示.
底部的View還需要進(jìn)行縮放,平移操作.
public class OverLayCardLayoutManager extends RecyclerView.LayoutManager { private static final String TAG = "swipecard"; public static int MAX_SHOW_COUNT = 4; public static float SCALE_GAP = 0.05f; public static int TRANS_Y_GAP; public OverLayCardLayoutManager(Context context) { //平移時(shí), 需要用到的參考值 TRANS_Y_GAP = (int) (20 * context.getResources().getDisplayMetrics().density); } @Override public RecyclerView.LayoutParams generateDefaultLayoutParams() { //必須要實(shí)現(xiàn)的方法 return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); } @Override public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) { //在這個(gè)方法中進(jìn)行View的布局操作.此方法會(huì)被調(diào)用多次. detachAndScrapAttachedViews(recycler); int itemCount = getItemCount(); if (itemCount < 1) { return; } //top-3View的position int bottomPosition; //邊界處理 if (itemCount < MAX_SHOW_COUNT) { bottomPosition = 0; } else { bottomPosition = itemCount - MAX_SHOW_COUNT; } //從可見的最底層View開始layout,依次層疊上去 for (int position = bottomPosition; position < itemCount; position++) { //1:重recycler的緩存機(jī)制中拿到一個(gè)View View view = recycler.getViewForPosition(position); //2:和自定義ViewGroup一樣, 需要先addView addView(view); //3:和自定義ViewGroup一樣, 也需要測量View的大小 measureChildWithMargins(view, 0, 0); int widthSpace = getWidth() - getDecoratedMeasuredWidth(view); int heightSpace = getHeight() - getDecoratedMeasuredHeight(view); //4:和自定義ViewGroup的onLayout一樣, 需要layout View.對View進(jìn)行布局 //我們在布局時(shí),將childView居中處理,這里也可以改為只水平居中 layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 2, widthSpace / 2 + getDecoratedMeasuredWidth(view), heightSpace / 2 + getDecoratedMeasuredHeight(view)); /** * TopView的Scale 為1,translationY 0 * 每一級Scale相差0.05f,translationY相差7dp左右 * * 觀察人人影視的UI,拖動(dòng)時(shí),topView被拖動(dòng),Scale不變,一直為1. * top-1View 的Scale慢慢變化至1,translation也慢慢恢復(fù)0 * top-2View的Scale慢慢變化至 top-1View的Scale,translation 也慢慢變化只top-1View的translation * top-3View的Scale要變化,translation巋然不動(dòng) */ //第幾層,舉例子,count =7, 最后一個(gè)TopView(6)是第0層, int level = itemCount - position - 1; //如果不需要縮放平移, 那么下面的代碼可以注釋掉... //除了頂層不需要縮小和位移 if (level > 0 /*&& level < mShowCount - 1*/) { //每一層都需要X方向的縮小 view.setScaleX(1 - SCALE_GAP * level); //前N層,依次向下位移和Y方向的縮小 if (level < MAX_SHOW_COUNT - 1) { view.setTranslationY(TRANS_Y_GAP * level); view.setScaleY(1 - SCALE_GAP * level); } else {//第N層在 向下位移和Y方向的縮小的成都與 N-1層保持一致 view.setTranslationY(TRANS_Y_GAP * (level - 1)); view.setScaleY(1 - SCALE_GAP * (level - 1)); } } } } }
2:布局好了之后, 就需要監(jiān)聽鼠標(biāo)事件了
谷歌官方提供了一個(gè)ItemTouchHelper工具類, 對滑動(dòng)進(jìn)行了慘無人道的優(yōu)越封裝, 傻x都能用…
使用方法: new ItemTouchHelper(callback).attachToRecyclerView(recyclerView);
就這么簡單,
接下來的操作, 都在回調(diào)callback里面進(jìn)行.
public class RenRenCallback extends ItemTouchHelper.SimpleCallback { private static final String TAG = "RenRen"; private static final int MAX_ROTATION = 15; OnSwipeListener mSwipeListener; boolean isSwipeAnim = false; public RenRenCallback() { //第一個(gè)參數(shù)決定可以拖動(dòng)排序的方向, 這里由于不需要拖動(dòng)排序,所以傳0 //第二個(gè)參數(shù)決定可以支持滑動(dòng)的方向,這里設(shè)置了上下左右都可以滑動(dòng). super(0, ItemTouchHelper.DOWN | ItemTouchHelper.UP | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT); } public void setSwipeListener(OnSwipeListener swipeListener) { mSwipeListener = swipeListener; } //水平方向是否可以被回收掉的閾值 public float getThreshold(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { //2016 12 26 考慮 探探垂直上下方向滑動(dòng),不刪除卡片,這里參照源碼寫死0.5f return recyclerView.getWidth() * /*getSwipeThreshold(viewHolder)*/ 0.5f; } @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { //由于不支持滑動(dòng)排序, 所以不需要處理此方法 return false; } @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { //當(dāng)view需要滑動(dòng)的時(shí)候,會(huì)回調(diào)此方法 //但是這個(gè)方法只是告訴你View需要滑動(dòng), 并不是對View和Adapter進(jìn)行額外的操作, //所以, 如果你需要實(shí)現(xiàn)滑動(dòng)刪除, 那么需要在此方法中remove item等. //我們這里需要對滑動(dòng)過后的View,進(jìn)行恢復(fù)操作. viewHolder.itemView.setRotation(0);//恢復(fù)最后一次的旋轉(zhuǎn)狀態(tài) if (mSwipeListener != null) { mSwipeListener.onSwipeTo(viewHolder, 0); } notifyListener(viewHolder.getAdapterPosition(), direction); } private void notifyListener(int position, int direction) { Log.w(TAG, "onSwiped: " + position + " " + direction); if (mSwipeListener != null) { mSwipeListener.onSwiped(position, direction); } } @Override public float getSwipeThreshold(RecyclerView.ViewHolder viewHolder) { //滑動(dòng)的比例達(dá)到多少之后, 視為滑動(dòng) return 0.3f; } @Override public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive); //當(dāng)你在滑動(dòng)的過程中, 此方法一直會(huì)被回調(diào), 就跟onTouch事件一樣... //先根據(jù)滑動(dòng)的dx dy 算出現(xiàn)在動(dòng)畫的比例系數(shù)fraction float swipeValue = (float) Math.sqrt(dX * dX + dY * dY); final float threshold = getThreshold(recyclerView, viewHolder); float fraction = swipeValue / threshold; //邊界修正 最大為1 if (fraction > 1) { fraction = 1; } else if (fraction < -1) { fraction = -1; } //對每個(gè)ChildView進(jìn)行縮放 位移 int childCount = recyclerView.getChildCount(); for (int i = 0; i < childCount; i++) { View child = recyclerView.getChildAt(i); //第幾層,舉例子,count =7, 最后一個(gè)TopView(6)是第0層, int level = childCount - i - 1; if (level > 0) { child.setScaleX(1 - SCALE_GAP * level + fraction * SCALE_GAP); if (level < MAX_SHOW_COUNT - 1) { child.setScaleY(1 - SCALE_GAP * level + fraction * SCALE_GAP); child.setTranslationY(TRANS_Y_GAP * level - fraction * TRANS_Y_GAP); } else { //child.setTranslationY((float) (mTranslationYGap * (level - 1) - fraction * mTranslationYGap)); } } else { //最上層 //rotate if (dX < -50) { child.setRotation(-fraction * MAX_ROTATION); } else if (dX > 50) { child.setRotation(fraction * MAX_ROTATION); } else { child.setRotation(0); } if (mSwipeListener != null) { RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams(); final int adapterPosition = params.getViewAdapterPosition(); mSwipeListener.onSwipeTo(recyclerView.findViewHolderForAdapterPosition(adapterPosition), dX); } } } } //擴(kuò)展實(shí)現(xiàn):點(diǎn)擊按鈕實(shí)現(xiàn)左滑效果 public void toLeft(RecyclerView recyclerView) { if (check(recyclerView)) { animTo(recyclerView, false); } } //擴(kuò)展實(shí)現(xiàn):點(diǎn)擊按鈕實(shí)現(xiàn)右滑效果 public void toRight(RecyclerView recyclerView) { if (check(recyclerView)) { animTo(recyclerView, true); } } private void animTo(final RecyclerView recyclerView, boolean right) { final int position = recyclerView.getAdapter().getItemCount() - 1; final View view = recyclerView.findViewHolderForAdapterPosition(position).itemView; TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, right ? 1f : -1f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 1.3f); translateAnimation.setFillAfter(true); translateAnimation.setDuration(300); translateAnimation.setInterpolator(new DecelerateInterpolator()); translateAnimation.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { isSwipeAnim = false; recyclerView.removeView(view); notifyListener(position, x > view.getMeasuredWidth() / 2 ? ItemTouchHelper.RIGHT : ItemTouchHelper.LEFT); } @Override public void onAnimationRepeat(Animation animation) { } }); view.startAnimation(translateAnimation); } private boolean check(RecyclerView recyclerView) { if (isSwipeAnim) { return false; } if (recyclerView == null || recyclerView.getAdapter() == null) { return false; } if (recyclerView.getAdapter().getItemCount() == 0) { return false; } isSwipeAnim = true; return true; } public interface OnSwipeListener { /** * @param direction {@link ItemTouchHelper#LEFT} / {@link ItemTouchHelper#RIGHT} * {@link ItemTouchHelper#UP} or {@link ItemTouchHelper#DOWN}). */ void onSwiped(int adapterPosition, int direction); /** * 最上層View滑動(dòng)時(shí)回調(diào). * * @param viewHolder 最上層的ViewHolder * @param offset 距離原始位置的偏移量 */ void onSwipeTo(RecyclerView.ViewHolder viewHolder, float offset); } public static class SimpleSwipeCallback implements OnSwipeListener { /** * {@inheritDoc} */ @Override public void onSwiped(int adapterPosition, int direction) { } /** * {@inheritDoc} */ @Override public void onSwipeTo(RecyclerView.ViewHolder viewHolder, float offset) { } } }
看起來不難, 但是真正做的時(shí)候, 要處理的地方很多,
并且有些地方要思考很久, 才能實(shí)現(xiàn)效果.
總之,做了你才會(huì)發(fā)現(xiàn)1+1=2的魅力, just do it.
開源地址: https://github.com/angcyo/RecyclerLayoutManager
好了,以上所示是小編給大家分享的Android開發(fā)中RecyclerView模仿探探左右滑動(dòng)布局功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言。
- Android RecyclerView實(shí)現(xiàn)多種item布局的方法
- Android RecyclerView顯示Item布局不一致解決辦法
- Android RecyclerView加載不同布局簡單實(shí)現(xiàn)
- Android RecyclerView布局就這么簡單
- Android RecyclerView加載兩種布局的方法
- Android RecyclerView網(wǎng)格布局示例解析
- Android列表RecyclerView排列布局
- Android RecyclerView多類型布局卡片解決方案
- Android實(shí)現(xiàn)RecyclerView嵌套流式布局的詳細(xì)過程
相關(guān)文章
Flutter下Android Studio配置gradle的方法
這篇文章主要介紹了Flutter下Android Studio配置gradle的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04Android開發(fā)導(dǎo)入項(xiàng)目報(bào)錯(cuò)Ignoring InnerClasses attribute for an anonym
今天小編就為大家分享一篇關(guān)于Android開發(fā)導(dǎo)入項(xiàng)目報(bào)錯(cuò)Ignoring InnerClasses attribute for an anonymous inner class的解決辦法,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2018-12-12Android實(shí)現(xiàn)頂部導(dǎo)航欄可點(diǎn)擊可滑動(dòng)效果(仿微信仿豆瓣網(wǎng))
這篇文章主要介紹了 Android實(shí)現(xiàn)頂部導(dǎo)航欄可點(diǎn)擊可滑動(dòng)效果(仿微信仿豆瓣網(wǎng)),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03android開發(fā)環(huán)境遇到adt無法啟動(dòng)的問題分析及解決方法
開始研究android開發(fā),搭建開發(fā)環(huán)境的時(shí)候就出了問題,真是束手無策2013-02-02Android 自定義View實(shí)現(xiàn)單擊和雙擊事件的方法
下面小編就為大家?guī)硪黄狝ndroid 自定義View實(shí)現(xiàn)單擊和雙擊事件的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09Android中實(shí)現(xiàn)EditText密碼顯示隱藏的方法
這篇文章主要介紹了Android中實(shí)現(xiàn)EditText密碼顯示隱藏的方法,需要的朋友可以參考下2017-01-01Android自定義listview布局實(shí)現(xiàn)上拉加載下拉刷新功能
這篇文章主要介紹了Android自定義listview布局實(shí)現(xiàn)上拉加載下拉刷新功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12