歡迎光臨
每天分享高質量文章

用RecyclerView的LayoutManager實現grid整頁翻頁效果

作者:HarveyLegend

鏈接:https://www.jianshu.com/p/9d578be5d6dc

專案中有這麼一個需求,收銀機的支付方式選擇頁:

不足一頁.png
超過一頁-第一頁.png
超過1頁-下一頁.png

需求具體分析:

每頁最多有12種支付方式。
1、支付方式不滿1頁,就將所有支付展示在第一頁。
2、支付方式超過12個,就將第一頁右下角的位置變為翻頁按鈕,將第二頁的左下角位置添加一個上一頁按鈕。超過兩頁以此類推。

代碼實現:

佈局很簡單:外層是一個RecyclerView,item同樣是一個RecyclerView

<android.support.v7.widget.RecyclerView
          android:id="@+id/rv_pay_way"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:scrollbars="none" />

java代碼:

   PayWayPageAdapter payWayPageAdapter = new PayWayPageAdapter(getActivity(), assemblePayWays(), R.layout.XXX);
   payWayRecyclerView.setLayoutManager(layoutManager);
   payWayRecyclerView.setAdapter(payWayPageAdapter);

關鍵代碼就是assemblePayWays()這個方法:

private List assemblePayWays() {
        int total = payWayEntities.size();
        //每個頁面的格子數
        int pageSize = 12;
        //找出一共需要幾頁
        for (int i = 1; i             if (i == 1 && 0                 page = 1;
                break;
            } else if ((pageSize - 2) * (i - 1) + 2 2
) * i + 2) {
                page = i;
                break;
            }
        }
        //將上一頁 下一頁插入到合適的位置
        List preList = new ArrayList<>();
        for (int i = 0; i             if (i 1) * pageSize && (i + 1) % pageSize == 0) {
                preList.add(new PayWayEntity("下一頁"));
            } else if (i > pageSize && (i + 3) % pageSize == 0) {
                preList.add(new PayWayEntity("上一頁"));
            } else {
                preList.add(new PayWayEntity());
            }
        }
        int offset = 0;
        for (int i = 0; i             if ((i + offset > pageSize && (i + offset + 3) % pageSize == 0) || (i + offset 1) * pageSize && (i + offset + 1) % pageSize == 0))
                offset += 1;
            preList.set(i + offset, payWayEntities.get(i));
        }
        //封裝好資料
        List entities = new ArrayList<>();
        for (int i = 0; i             List temp;
            PayWayPageEntity entity = new PayWayPageEntity();
            temp = preList.subList(i * pageSize, (i + 1) * pageSize);
            entity.setPayWayLists(temp);
            entities.add(entity);
        }
        return entities;
    }

禁止外層的頁卡滑動需要重寫LayoutManager

public class CustomLinearLayoutManager extends LinearLayoutManager {
        //此處我直接設置為不允許滑動,需要時可以使用setScrollEnabled()動態設置
        private boolean isScrollEnabled = false;


        public CustomLinearLayoutManager(Context context, int orientation) {
            super(context, orientation, false);
        }

        public void setScrollEnabled(boolean flag) {
            this.isScrollEnabled = flag;
        }

        @Override
        public boolean canScrollVertically() {
            //Similarly you can customize "canScrollHorizontally()" for managing horizontal scroll
            return isScrollEnabled && super.canScrollVertically();
        }

        @Override
        public boolean canScrollHorizontally() {
            return isScrollEnabled && super.canScrollHorizontally();
        }
    }

Adapter內部代碼類似,只是根據不同的支付方式實現不同的點擊事件而已:

 @Override
    public void convert(RecyclerViewViewHolder viewHolder, PayWayPageEntity payWayPageEntity) {
        RecyclerView rv = viewHolder.findViewById(R.id.rv);
        PayWayAdapter payWayAdapter = new PayWayAdapter(mContext, payWayPageEntity.getPayWayLists(), R.layout.pay_way_item);
        rv.setLayoutManager(new CustomLayoutManager(mContext, 3));
        rv.setAdapter(payWayAdapter);

切換頁卡用下麵的方式實現

layoutManager.scrollToPositionWithOffset(currentPage, 0);

最終實現:

1.png
2.png
3.png


●編號361,輸入編號直達本文

●輸入m獲取到文章目錄

推薦↓↓↓

Java編程

更多推薦18個技術類公眾微信

涵蓋:程式人生、演算法與資料結構、黑客技術與網絡安全、大資料技術、前端開發、Java、Python、Web開發、安卓開發、iOS開發、C/C++、.NET、Linux、資料庫、運維等。

赞(0)

分享創造快樂