仿造美团顶部的分页Grid样式

开发中遇到美团那种分页的Grid的样式，这里做个笔记。
尝试用GridView实现，也可以试试使用RecyclerView实现，毕竟RecyclerView也只是Grid样式，区别也应该不大。

封装数据，定义一页显示多少条目，然后计算页数

public class Main4Activity extends AppCompatActivity {

    @BindView(R.id.vp)
    ViewPager vp;//装每一页Grid的容器
    @BindView(R.id.ll_point)
    LinearLayout llPoint;//装indicator的容器
    private Activity activity;
    private List<MeiTuan> dataList;//数据集合
    private List<View> viewList;//View的集合，也就是装了多少个GridView
    private LayoutInflater inflater;
    /**
     * 总页数
     */
    private int pageCount;
    /**
     * 每一页显示的个数
     */
    private int pageSize = 10;
    /**
     * 当前显示的第几页
     */
    private int currentIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main4);
        activity = Main4Activity.this;
        ButterKnife.bind(this);

        inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);

        init();
    }

    private void init() {
        initDataList();
        initPageList();
        setPagerAdapter();
        setPoint();
    }

    /**
     * 封装数据
     */
    private void initDataList() {
        dataList = new ArrayList<>();
        dataList.add(new MeiTuan("地址",R.drawable.address));
        dataList.add(new MeiTuan("日历",R.drawable.calendar));
        dataList.add(new MeiTuan("相机",R.drawable.camera));
        dataList.add(new MeiTuan("图表",R.drawable.chart));
        dataList.add(new MeiTuan("电脑",R.drawable.computer));
        dataList.add(new MeiTuan("优惠券",R.drawable.discount_coupon));
        dataList.add(new MeiTuan("地球",R.drawable.earth));
        dataList.add(new MeiTuan("信封",R.drawable.envelop));
        dataList.add(new MeiTuan("礼盒",R.drawable.gift_box));
        dataList.add(new MeiTuan("定位",R.drawable.location));
        dataList.add(new MeiTuan("奖牌",R.drawable.medal));
        dataList.add(new MeiTuan("信息",R.drawable.message));
        dataList.add(new MeiTuan("手机",R.drawable.mobile_phone));
        dataList.add(new MeiTuan("笔记本",R.drawable.notebook));
        dataList.add(new MeiTuan("照片",R.drawable.photo));
        dataList.add(new MeiTuan("红包",R.drawable.red_packet));
        dataList.add(new MeiTuan("奖杯",R.drawable.throy));
        dataList.add(new MeiTuan("视频",R.drawable.viedeo));
    }

    private void initPageList() {
        viewList = new ArrayList<>();
        //计算总共有多少页
        //总的页数 = 总数/每页数量，并取整
        pageCount = (int) Math.ceil(dataList.size()*1.0/pageSize);
        for (int i = 0; i < pageCount; i++) {
            View view = inflater.inflate(R.layout.metuan_grid_layout, vp, false);
            GridView gridView = view.findViewById(R.id.grid_view);
            gridView.setAdapter(new GridViewAdapter(activity,dataList,i,pageSize));
            viewList.add(gridView);
            gridView.setOnItemClickListener(onItemClickListener);
        }
    }

    AdapterView.OnItemClickListener onItemClickListener = new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Toast.makeText(activity,dataList.get((int) id).getName(),Toast.LENGTH_SHORT).show();
        }
    };

    private void setPagerAdapter() {
        vp.setAdapter(new ViewPagerAdapter(viewList));
    }

    private void setPoint() {
        for (int i = 0; i < pageCount; i++) {
            llPoint.addView(inflater.inflate(R.layout.ll_point_layout,null));
        }

        llPoint.getChildAt(0).findViewById(R.id.iv_point)
                .setBackgroundResource(R.drawable.indicator_select);
        vp.addOnPageChangeListener(onPageChangeListener);
    }

    ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            llPoint.getChildAt(currentIndex)
                    .findViewById(R.id.iv_point)
                    .setBackgroundResource(R.drawable.indicator_unselect);

            llPoint.getChildAt(position)
                    .findViewById(R.id.iv_point)
                    .setBackgroundResource(R.drawable.indicator_select);

            currentIndex = position;
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };
}

然后是Adapter

public class GridViewAdapter extends BaseAdapter {
    private Context context;
    private List<MeiTuan> list;
    private LayoutInflater inflater;
    /**
     * 当前页数下标  从0开始
     */
    private int currentIndex;
    /**
     * 每一页的个数
     */
    private int pageSize;

    public GridViewAdapter(Context context, List<MeiTuan> list, int currentIndex, int pageSize) {
        this.context = context;
        this.list = list;
        this.currentIndex = currentIndex;
        this.pageSize = pageSize;
        this.inflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        //返回数量，判断如果总数大于当前页码乘以页数，就给每一页返回页数，否则就返回剩余的个数
        return list.size() > (currentIndex + 1) * pageSize ? pageSize : (list.size() - currentIndex * pageSize);
    }

    @Override
    public Object getItem(int position) {
        return list.get(position + currentIndex * pageSize);
    }

    @Override
    public long getItemId(int position) {
        return position + currentIndex * pageSize;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.grid_item_layout, null);
            holder = new ViewHolder(convertView);
            holder.ivImg = convertView.findViewById(R.id.iv_img);
            holder.tvTitle = convertView.findViewById(R.id.tv_title);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        //在给View绑定显示的数据时，计算正确的position = position + curIndex * pageSize
        int pos = position + currentIndex * pageSize;
        Glide.with(context)
                .load(list.get(pos).getIcon())
                .into(holder.ivImg);
        holder.tvTitle.setText(list.get(pos).getName());

        return convertView;
    }


    static class ViewHolder {
        @BindView(R.id.iv_img)
        ImageView ivImg;
        @BindView(R.id.tv_title)
        TextView tvTitle;

        ViewHolder(View view) {
            ButterKnife.bind(this, view);
        }
    }
}

也可以使用ViewPager配合RecyclerView使用，方式都是一样的

private void initPageList() {
        viewList = new ArrayList<>();
        //总的页数 = 总数/每页数量，并取整
        pageCount = (int) Math.ceil(dataList.size()*1.0/pageSize);
        for (int i = 0; i < pageCount; i++) {
            View view = inflater.inflate(R.layout.metuan_recy_layout, vp, false);
            RecyclerView rvList = view.findViewById(R.id.rv_list);
            RecyclerView.LayoutManager layoutManager = new GridLayoutManager(activity,5);
            rvList.setLayoutManager(layoutManager);
            TestAdapter adapter = new TestAdapter(activity,dataList,i,pageSize);
            rvList.setAdapter(adapter);
            viewList.add(rvList);
            adapter.setOnClickListener(itemListener);
        }
    }

适配器

public class TestAdapter extends RecyclerView.Adapter<TestAdapter.TestViewHolder> {
    private Context context;
    private List<MeiTuan> list;
    private LayoutInflater inflater;
    /**
     * 当前页数下标  从0开始
     */
    private int currentIndex;
    /**
     * 每一页的个数
     */
    private int pageSize;

    public TestAdapter(Context context, List<MeiTuan> list, int currentIndex, int pageSize) {
        this.context = context;
        this.list = list;
        this.currentIndex = currentIndex;
        this.pageSize = pageSize;
        this.inflater = LayoutInflater.from(context);
    }

    @NonNull
    @Override
    public TestViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new TestViewHolder(inflater.inflate(R.layout.grid_item_layout, null));
    }

    @Override
    public void onBindViewHolder(@NonNull TestViewHolder holder, int position) {
        //在给View绑定显示的数据时，计算正确的position = position + curIndex * pageSize
        int pos = position + currentIndex * pageSize;
        Glide.with(context)
                .load(list.get(pos).getIcon())
                .into(holder.ivImg);
        holder.tvTitle.setText(list.get(pos).getName());

        holder.itemView.setTag(pos);
        holder.itemView.setOnClickListener(onClickListener);
    }

    @Override
    public int getItemCount() {
        //返回数量，判断如果总数大于当前页码乘以页数，就给每一页返回页数，否则就返回剩余的个数
        return list.size() > (currentIndex + 1) * pageSize ? pageSize : (list.size() - currentIndex * pageSize);
    }

    class TestViewHolder extends RecyclerView.ViewHolder {
        @BindView(R.id.iv_img)
        ImageView ivImg;
        @BindView(R.id.tv_title)
        TextView tvTitle;

        private TestViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if(listener != null){
                listener.onItemClick(v, (Integer) v.getTag());
            }
        }
    };

    public interface OnRecyItemListener{
        void onItemClick(View view,int position);
    }
    private OnRecyItemListener listener = null;
    public void setOnClickListener(OnRecyItemListener listener){
        this.listener = listener;
    }
}