Android實(shí)現(xiàn)可拖動(dòng)層疊卡片布局
公司app要求做一個(gè)扭蛋功能,其實(shí)就是一個(gè)可拖動(dòng)層疊卡片列表,原理還是由一個(gè)自定義Recyclerview和LayoutManager來(lái)實(shí)現(xiàn)
自定義RecyclerView很簡(jiǎn)單,只是修改touch事件,防止點(diǎn)擊到卡片外還被處理的情況
@Override public boolean onTouchEvent(MotionEvent e) { if(e.getY()< UIUtil.dip2px(TutuApplication.getInstance().getContext(),95)||e.getY()>getHeight()-UIUtil.dip2px(TutuApplication.getInstance().getContext(),95)){ if(e.getAction()!=MotionEvent.ACTION_UP && e.getAction()!=MotionEvent.ACTION_MOVE) { return false; } } return super.onTouchEvent(e); }
實(shí)際的層疊效果還是需要LayoutManager來(lái)實(shí)現(xiàn)
public class SwipeCardLayoutManager extends RecyclerView.LayoutManager { Context context; int TRANS_Y_GAP; public SwipeCardLayoutManager(Context context){ TRANS_Y_GAP= (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,15, context.getResources().getDisplayMetrics()); } @Override public RecyclerView.LayoutParams generateDefaultLayoutParams() { return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); } @Override public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) { super.onLayoutChildren(recycler, state); //1.如何實(shí)現(xiàn)層疊效果--cardView.layout(l,t,r,b) //2.如何讓8個(gè)條目中的4個(gè)展示在RecylerView里面 //1在布局layout之前,將所有的子View先全部detach掉,然后放到Scrap集合里面緩存。 detachAndScrapAttachedViews(recycler); //2)只將最上面4個(gè)view添加到RecylerView容器里面 int itemCount=getItemCount();//8個(gè) int bottomPosition; if(itemCount< CardConfig.MAX_SHOW_COUNT){ bottomPosition=0; }else{ bottomPosition=itemCount-CardConfig.MAX_SHOW_COUNT; } for(int i=bottomPosition;i<itemCount;i++){ View view=recycler.getViewForPosition(i); addView(view); measureChildWithMargins(view,0,0); int widthSpace=getWidth()-getDecoratedMeasuredWidth(view); int heightSpace=getHeight()-getDecoratedMeasuredHeight(view); //擺放cardView //層疊效果--Scale+TranslationY //層級(jí)的位置關(guān)系1/2/3/4 int level=itemCount-i-1; layoutDecorated(view, widthSpace/2, heightSpace/2+StatusBarUtil.getStatusBarHeight(TutuApplication.getInstance().getContext()), widthSpace/2+getDecoratedMeasuredWidth(view), heightSpace/2+StatusBarUtil.getStatusBarHeight(TutuApplication.getInstance().getContext())+getDecoratedMeasuredHeight(view)); if(level>0){ if(level<CardConfig.MAX_SHOW_COUNT){ view.setTranslationY(CardConfig.TRANS_V_GAP*level*1.3f); view.setScaleX(1-CardConfig.SCALE_GAP*level); view.setScaleY(1-CardConfig.SCALE_GAP*level); } }else { view.setTranslationY(CardConfig.TRANS_V_GAP*(level-1)); view.setScaleX(1-CardConfig.SCALE_GAP*(level-1)); view.setScaleY(1-CardConfig.SCALE_GAP*(level-1)); } } } }
顯示出來(lái)就是這個(gè)樣子
對(duì)于滑動(dòng)顯示下一張,則使用自定義ItemTouchHelper.simpleCallBack來(lái)展示
自定義itemTouchHelper.simpleCallBack
public class SwipeCardCallBack extends ItemTouchHelper.SimpleCallback { private GameGachaAdapter adapter; private RecyclerView mRv; private OnSwipeEndListener listener; private TextView tv; private int x = 1; private Context context; public void refresh(){ // x = 1; // tv.setText(context.getResources().getString(R.string.explored)+(++x)+"/????"); removeCard(); } public SwipeCardCallBack(GameGachaAdapter adapter, RecyclerView mRv, TextView view, Context context) { super(0, ItemTouchHelper.LEFT | ItemTouchHelper.UP | ItemTouchHelper.RIGHT | ItemTouchHelper.DOWN ); this.adapter = adapter; this.mRv = mRv; this.tv = view; this.context = context; } public void addGameGachaList(List<IMulTypeHelper> mDatas){ adapter.addAdapterData(0,mDatas); adapter.notifyDataSetChanged(); listener.onSwipe(); } public SwipeCardCallBack(int dragDirs, int swipeDirs) { super(dragDirs, swipeDirs); } public SwipeCardCallBack() { /* * 即我們對(duì)哪些方向操作關(guān)心。如果我們關(guān)心用戶(hù)向上拖動(dòng),可以將 填充swipeDirs參數(shù)為L(zhǎng)EFT | RIGHT 。0表示從不關(guān)心。 * */ super(0, ItemTouchHelper.LEFT | ItemTouchHelper.UP | ItemTouchHelper.RIGHT | ItemTouchHelper.DOWN ); } @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { return false; } @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { //當(dāng)已經(jīng)滑動(dòng)刪除了的時(shí)候會(huì)被回掉--刪除數(shù)據(jù),循環(huán)的效果 removeCard(); } public void removeCard() { if(adapter!=null && adapter.getItemCount()>0) { adapter.removeAdapterData(adapter.getItemCount() - 1); // mDatas.add(0, remove); adapter.notifyDataSetChanged(); listener.onSwipe(); if (adapter.getItemCount() == 6) { listener.onSwipeEnd(); } tv.setText(context.getResources().getString(R.string.explored) + (++x) + "/????"); } } @Override public void clearView(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder) { super.clearView(recyclerView, viewHolder); } @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); //監(jiān)聽(tīng)話(huà)滑動(dòng)的距離--控制動(dòng)畫(huà)的執(zhí)行程度 if(dY == 0f&&!isCurrentlyActive){ int itemcount = recyclerView.getChildCount(); for (int i = 0; i < itemcount; i++) { //執(zhí)行 View view = recyclerView.getChildAt(i); //幾個(gè)view層疊的效果,錯(cuò)開(kāi)的效果--便宜動(dòng)畫(huà)+縮放動(dòng)畫(huà) int level = itemcount - i - 1; view.setRotation(0); if(dX == 0) { if(level>0){ if(level<CardConfig.MAX_SHOW_COUNT){ view.setTranslationY(CardConfig.TRANS_V_GAP*level*1.3f); view.setScaleX(1-CardConfig.SCALE_GAP*level); view.setScaleY(1-CardConfig.SCALE_GAP*level); } }else { view.setTranslationY(CardConfig.TRANS_V_GAP*(level-1)); view.setScaleX(1-CardConfig.SCALE_GAP*(level-1)); view.setScaleY(1-CardConfig.SCALE_GAP*(level-1)); } } } }else { //靈界點(diǎn) double maxDistance = recyclerView.getWidth() * 1f; double distance = Math.sqrt(dX * dX)*2; //動(dòng)畫(huà)執(zhí)行的百分比 double fraction = distance / maxDistance; if (fraction > 1) { fraction = 1; } int itemcount = recyclerView.getChildCount(); for (int i = 0; i < itemcount; i++) { //執(zhí)行 View view = recyclerView.getChildAt(i); //幾個(gè)view層疊的效果,錯(cuò)開(kāi)的效果--便宜動(dòng)畫(huà)+縮放動(dòng)畫(huà) int level = itemcount - i - 1; if(level == 0){//最外層動(dòng)畫(huà) if(Math.abs(dX) == 1080f && dY == 0f&&!isCurrentlyActive){ view.setRotation(0); }else { if(dX<0){ view.setRotation((float) (360f - (30 * fraction))); }else { view.setRotation((float) (30 * fraction)); } } } else if(level ==CardConfig.MAX_SHOW_COUNT-1){//最內(nèi)層動(dòng)畫(huà) view.setTranslationY((float) (CardConfig.TRANS_V_GAP*(level-fraction)*1.3f)); view.setScaleX((float) (1-CardConfig.SCALE_GAP*(level-fraction))); view.setScaleY((float) (1-CardConfig.SCALE_GAP*(level-fraction))); }else if (level < CardConfig.MAX_SHOW_COUNT - 1) { view.setTranslationY((float) ((level - (2*fraction)) * CardConfig.TRANS_V_GAP)); view.setScaleX((float) (1 - CardConfig.SCALE_GAP * level + fraction * (CardConfig.SCALE_GAP*2))); view.setScaleY((float) (1 - CardConfig.SCALE_GAP * level + fraction * (CardConfig.SCALE_GAP*2))); } } } } @Override public void onSelectedChanged(@Nullable RecyclerView.ViewHolder viewHolder, int actionState) { super.onSelectedChanged(viewHolder, actionState); } public interface OnSwipeEndListener{ void onSwipeEnd(); void onSwipe(); } public void setOnSwipeEndListener(OnSwipeEndListener listener){ this.listener = listener; } }
在Activity中:
private SwipeCardCallBack callback; private ItemTouchHelper helper; ... helper = new ItemTouchHelper(callback); helper.attachToRecyclerView(swipeFlingAdapterView); callback.setOnSwipeEndListener(new SwipeCardCallBack.OnSwipeEndListener() { @Override public void onSwipeEnd() { swipeFlingAdapterView.suppressLayout(true); gameGachaRefresh.setClickable(false); ToastUtils.createToast().showCenter(TutuGameGachaActivity.this,getString(R.string.wait_moment)); presenter.getGameGacha(PRESENTER_LOAD_STATE_REFRESH); } @Override public void onSwipe() { if(arrayAdapter.getItemCount()>0) { swipe(); } } });
這樣實(shí)際效果就差不多可以了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- android Matrix實(shí)現(xiàn)圖片隨意放大縮小或拖動(dòng)
- Android實(shí)現(xiàn)ImageView圖片縮放和拖動(dòng)
- Android編程實(shí)現(xiàn)圖片的瀏覽、縮放、拖動(dòng)和自動(dòng)居中效果
- Android實(shí)現(xiàn)圖片拖動(dòng)效果
- Android如何創(chuàng)建可拖動(dòng)的圖片控件
- Android通過(guò)自定義ImageView控件實(shí)現(xiàn)圖片的縮放和拖動(dòng)的實(shí)現(xiàn)代碼
- Android RecyclerView多類(lèi)型布局卡片解決方案
- Android實(shí)現(xiàn)簡(jiǎn)單卡片布局
- Android控件CardView實(shí)現(xiàn)卡片布局
- Android編程重寫(xiě)ViewGroup實(shí)現(xiàn)卡片布局的方法
相關(guān)文章
Android 6.0權(quán)限請(qǐng)求相關(guān)及權(quán)限分組方法
今天小編就為大家分享一篇Android 6.0權(quán)限請(qǐng)求相關(guān)及權(quán)限分組方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08android studio生成aar包并在其他工程引用aar包的方法
本篇文章主要介紹了android studio生成aar包并在其他工程引用aar包的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11Android 動(dòng)態(tài)的顯示時(shí)間
本文給大家分享一段代碼實(shí)現(xiàn)android動(dòng)態(tài)顯示時(shí)間,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-12Android中如何優(yōu)雅的處理重復(fù)點(diǎn)擊實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Android中如何優(yōu)雅的處理重復(fù)點(diǎn)擊的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)各位Android開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09NestedScrollView+Recyclerview下滑卡頓解決方法
本文為大家解決安卓開(kāi)發(fā)時(shí)候NestedScrollView+Recyclerview下滑卡頓的問(wèn)題,希望能夠幫助到你。2017-11-11Android studio實(shí)現(xiàn)左右滑動(dòng)切換圖片
這篇文章主要為大家詳細(xì)介紹了Android studio實(shí)現(xiàn)左右滑動(dòng)切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05android實(shí)現(xiàn)記住用戶(hù)名和密碼以及自動(dòng)登錄
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)記住用戶(hù)名和密碼以及自動(dòng)登錄,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09Android studio 4.1打包失敗和插件錯(cuò)誤提示的解決
這篇文章主要介紹了Android studio 4.1打包失敗和插件錯(cuò)誤提示的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10