Android實現可拖動層疊卡片佈局
公司app要求做一個扭蛋功能，其實就是一個可拖動層疊卡片列表，原理還是由一個自定義Recyclerview和LayoutManager來實現
自定義RecyclerView很簡單,隻是修改touch事件，防止點擊到卡片外還被處理的情況
@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);
}
實際的層疊效果還是需要LayoutManager來實現
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.如何實現層疊效果--cardView.layout(l,t,r,b)
//2.如何讓8個條目中的4個展示在RecylerView裡面
//1在佈局layout之前，將所有的子View先全部detach掉，然後放到Scrap集合裡面緩存。
detachAndScrapAttachedViews(recycler);
//2)隻將最上面4個view添加到RecylerView容器裡面
int itemCount=getItemCount();//8個
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
//層級的位置關系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));
}
}
}
}
顯示出來就是這個樣子
對於滑動顯示下一張，則使用自定義ItemTouchHelper.simpleCallBack來展示
自定義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() {
/*
* 即我們對哪些方向操作關心。如果我們關心用戶向上拖動，可以將
填充swipeDirs參數為LEFT | RIGHT 。0表示從不關心。
* */
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) {
//當已經滑動刪除瞭的時候會被回掉--刪除數據，循環的效果
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);
//監聽話滑動的距離--控制動畫的執行程度
if(dY == 0f&&!isCurrentlyActive){
int itemcount = recyclerView.getChildCount();
for (int i = 0; i < itemcount; i++) {
//執行
View view = recyclerView.getChildAt(i);
//幾個view層疊的效果，錯開的效果--便宜動畫+縮放動畫
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 {
//靈界點
double maxDistance = recyclerView.getWidth() * 1f;
double distance = Math.sqrt(dX * dX)*2;
//動畫執行的百分比
double fraction = distance / maxDistance;
if (fraction > 1) {
fraction = 1;
}
int itemcount = recyclerView.getChildCount();
for (int i = 0; i < itemcount; i++) {
//執行
View view = recyclerView.getChildAt(i);
//幾個view層疊的效果，錯開的效果--便宜動畫+縮放動畫
int level = itemcount - i - 1;
if(level == 0){//最外層動畫
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){//最內層動畫
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();
}
}
});
這樣實際效果就差不多可以瞭。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。
推薦閱讀：
- Android MVVM架構實現RecyclerView列表詳解流程
- android RecyclerView添加footerview詳解
- Android 手寫RecyclerView實現列表加載
- Android自定義RecyclerView Item頭部懸浮吸頂
- RecyclerView實現橫向滾動效果