基于viewPager+recyclerview实现的水平滚动分页菜单

很多项目都有水平滚动分页菜单效果，类似淘宝、京东之类的app的左右滑动分页菜单效果,现在简单实现一个，效果图：

 

首先左右滑动肯定离不开viewpager控件 因此在主布局中需要ViewPager控件，里面的每个item的排列方式首先想到的就是利用recyclerview的GridLayoutManager

进行布局，下面的圆点指示器用了个第三方的在gradle文件中引入依赖并同步:

implementation 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'

接下来实现主布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_marginTop="30dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".activity.HorizontalScrollActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/horizontalScrollView"
        android:layout_width="match_parent"
        android:layout_height="160dp" />

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/circleIndicator"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginBottom="20dp"
        app:fillColor="@android:color/holo_red_light"
        app:pageColor="@android:color/darker_gray"
        app:radius="4dp" />

</LinearLayout>

首先实现ViewPager的adapter

public static class HorizontalScrollAdapter extends PagerAdapter {

    private Context context;

    private List<List<ItemBean>> maps;

    public HorizontalScrollAdapter(Context context, List<List<ItemBean>> maps) {
        this.context = context;
        this.maps = maps;
    }

    /**
     * 决定了有多少页
     *
     * @return
     */
    @Override
    public int getCount() {
        return maps.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view == o;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        RecyclerView recyclerView = new RecyclerView(context);
        GridLayoutManager layoutManager = new GridLayoutManager(context, 4, GridLayoutManager.VERTICAL, false);
        recyclerView.setLayoutManager(layoutManager);
        HorizontalScrollItemAdapter itemAdapter = new HorizontalScrollItemAdapter(context, maps.get(position));
        recyclerView.setAdapter(itemAdapter);
        container.addView(recyclerView);//将recyclerView作为子视图加入 container即为viewpager
        return recyclerView;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View) object);
    }
}

 

再实现recyclerview的adapter

public static class HorizontalScrollItemAdapter extends RecyclerView.Adapter<HorizontalItemHolder> {

    private List<ItemBean> itemBeans;

    private Context context;

    public HorizontalScrollItemAdapter(Context context, List<ItemBean> itemBeans) {
        this.context = context;
        this.itemBeans = itemBeans;
    }

    @NonNull
    @Override
    public HorizontalItemHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(context).inflate(R.layout.vertical_item, viewGroup, false);
        return new HorizontalItemHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull HorizontalItemHolder viewHolder, int i) {
        ItemBean itemBean = itemBeans.get(i);
        viewHolder.setItem(itemBean);
    }

    @Override
    public int getItemCount() {
        return itemBeans.size();
    }
}

HorizontalItemHolder

public static class HorizontalItemHolder extends RecyclerView.ViewHolder {

    @BindView(R.id.verticalImgView)
    ImageView verticalImgView;
    @BindView(R.id.verticalText)
    TextView verticalText;

    public HorizontalItemHolder(@NonNull View itemView) {
        super(itemView);
        ButterKnife.bind(this, itemView);
    }

    public void setItem(ItemBean item) {
        verticalImgView.setImageResource(item.getIcon());
        verticalText.setText(item.getTitle());
    }
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public static class ItemBean {
    private int icon;
    private int title;
}

vertical_item布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/verticalImgView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/widget01"/>

    <TextView
        android:id="@+id/verticalText"
        android:layout_marginTop="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个"/>
</LinearLayout>

需要注意的点是布局文件的宽度不能是 wrap_content 自适应而应该是 match_parent填满因为:

GridLayoutManager layoutManager = new GridLayoutManager(context, 5, GridLayoutManager.VERTICAL, false);

与上面的代码有冲突设置了5个对于自适应则依次往左靠不会自动充满，即各个item加起来的总宽度有多宽就有多宽就可能存在剩余不充满的情况。反之，剩余部分则会自动填满整个宽度。

接下来就是准备数据了，这个部分有可能是写死的有可能是请求后台返回的图标url和标题，当前采用写死的方式，对数据进行组装。由于当前有2页那么ViewPager的adapter方法里面的getCount()方法必然返回2条数据。每页又包含了不同个数的item因此需要集合里面嵌套集合的方式组装数据：

构建最外层数据和内层每页的数据:

    private List<List<ItemBean>> initData(int pageSize) {
        List<ItemBean> datas = new ArrayList<>();
        List<List<ItemBean>> maps = new ArrayList<>();
        datas.add(new ItemBean(R.mipmap.widget01, R.string.firtItem));
        datas.add(new ItemBean(R.mipmap.widget02, R.string.secondItem));
        datas.add(new ItemBean(R.mipmap.widget03, R.string.thirdItem));
        datas.add(new ItemBean(R.mipmap.widget04, R.string.forthItem));
        datas.add(new ItemBean(R.mipmap.widget05, R.string.fifthItem));
        datas.add(new ItemBean(R.mipmap.widget06, R.string.sixthItem));
        datas.add(new ItemBean(R.mipmap.widget07, R.string.seventhItem));
        datas.add(new ItemBean(R.mipmap.widget08, R.string.eigthItem));

        //第二页
        datas.add(new ItemBean(R.mipmap.widget01, R.string.firtItem));
        datas.add(new ItemBean(R.mipmap.widget02, R.string.secondItem));
        datas.add(new ItemBean(R.mipmap.widget03, R.string.thirdItem));
        datas.add(new ItemBean(R.mipmap.widget04, R.string.forthItem));
        datas.add(new ItemBean(R.mipmap.widget05, R.string.fifthItem));
        datas.add(new ItemBean(R.mipmap.widget06, R.string.sixthItem));
        datas.add(new ItemBean(R.mipmap.widget07, R.string.seventhItem));

        List<ItemBean> firstPageItems = datas.subList(0, pageSize);
        List<ItemBean> secondPageItems = datas.subList(pageSize, datas.size());

        maps.add(firstPageItems);
        maps.add(secondPageItems);

        return maps;
    }

最后在需要的地方调用initData()方法以及创建ViewPager的Adapter并设置：

在activity/Fragment/其他地方

   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_horizontal_scroll);
        ButterKnife.bind(this);
        int pageSize = 8;//每页多少条
        List<List<ItemBean>> itemBeans = initData(pageSize);
        HorizontalScrollAdapter scrollAdapter = new HorizontalScrollAdapter(this, itemBeans);
        horizontalScrollView.setAdapter(scrollAdapter);
        circleIndicator.setViewPager(horizontalScrollView);
    }

最后大汇合:

public class HorizontalScrollActivity extends AppCompatActivity {

    @BindView(R.id.horizontalScrollView)
    ViewPager horizontalScrollView;
    @BindView(R.id.circleIndicator)
    CirclePageIndicator circleIndicator;

    private List<RecyclerView> recyclerViews = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_horizontal_scroll);
        ButterKnife.bind(this);
        int pageSize = 8;//每页多少条
        List<List<ItemBean>> itemBeans = initData(pageSize);
        HorizontalScrollAdapter scrollAdapter = new HorizontalScrollAdapter(this, itemBeans);
        horizontalScrollView.setAdapter(scrollAdapter);
        circleIndicator.setViewPager(horizontalScrollView);
    }

    public static class HorizontalScrollAdapter extends PagerAdapter {

        private Context context;

        private List<List<ItemBean>> maps;

        public HorizontalScrollAdapter(Context context, List<List<ItemBean>> maps) {
            this.context = context;
            this.maps = maps;
        }

        /**
         * 决定了有多少页
         *
         * @return
         */
        @Override
        public int getCount() {
            return maps.size();
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
            return view == o;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            RecyclerView recyclerView = new RecyclerView(context);
            GridLayoutManager layoutManager = new GridLayoutManager(context, 4, GridLayoutManager.VERTICAL, false);
            recyclerView.setLayoutManager(layoutManager);
            HorizontalScrollItemAdapter itemAdapter = new HorizontalScrollItemAdapter(context, maps.get(position));
            recyclerView.setAdapter(itemAdapter);
            container.addView(recyclerView);//将recyclerView作为子视图加入 container即为viewpager
            return recyclerView;
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((View) object);
        }

    }

    public static class HorizontalScrollItemAdapter extends RecyclerView.Adapter<HorizontalItemHolder> {

        private List<ItemBean> itemBeans;

        private Context context;

        public HorizontalScrollItemAdapter(Context context, List<ItemBean> itemBeans) {
            this.context = context;
            this.itemBeans = itemBeans;
        }

        @NonNull
        @Override
        public HorizontalItemHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
            View view = LayoutInflater.from(context).inflate(R.layout.vertical_item, viewGroup, false);
            return new HorizontalItemHolder(view);
        }

        @Override
        public void onBindViewHolder(@NonNull HorizontalItemHolder viewHolder, int i) {
            ItemBean itemBean = itemBeans.get(i);
            viewHolder.setItem(itemBean);
        }

        @Override
        public int getItemCount() {
            return itemBeans.size();
        }
    }

    public static class HorizontalItemHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.verticalImgView)
        ImageView verticalImgView;
        @BindView(R.id.verticalText)
        TextView verticalText;

        public HorizontalItemHolder(@NonNull View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }

        public void setItem(ItemBean item) {
            verticalImgView.setImageResource(item.getIcon());
            verticalText.setText(item.getTitle());
        }
    }

    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public static class ItemBean {
        private int icon;
        private int title;
    }

    private List<List<ItemBean>> initData(int pageSize) {
        List<ItemBean> datas = new ArrayList<>();
        List<List<ItemBean>> maps = new ArrayList<>();
        datas.add(new ItemBean(R.mipmap.widget01, R.string.firtItem));
        datas.add(new ItemBean(R.mipmap.widget02, R.string.secondItem));
        datas.add(new ItemBean(R.mipmap.widget03, R.string.thirdItem));
        datas.add(new ItemBean(R.mipmap.widget04, R.string.forthItem));
        datas.add(new ItemBean(R.mipmap.widget05, R.string.fifthItem));
        datas.add(new ItemBean(R.mipmap.widget06, R.string.sixthItem));
        datas.add(new ItemBean(R.mipmap.widget07, R.string.seventhItem));
        datas.add(new ItemBean(R.mipmap.widget08, R.string.eigthItem));

        //第二页
        datas.add(new ItemBean(R.mipmap.widget01, R.string.firtItem));
        datas.add(new ItemBean(R.mipmap.widget02, R.string.secondItem));
        datas.add(new ItemBean(R.mipmap.widget03, R.string.thirdItem));
        datas.add(new ItemBean(R.mipmap.widget04, R.string.forthItem));
        datas.add(new ItemBean(R.mipmap.widget05, R.string.fifthItem));
        datas.add(new ItemBean(R.mipmap.widget06, R.string.sixthItem));
        datas.add(new ItemBean(R.mipmap.widget07, R.string.seventhItem));

        List<ItemBean> firstPageItems = datas.subList(0, pageSize);
        List<ItemBean> secondPageItems = datas.subList(pageSize, datas.size());

        maps.add(firstPageItems);
        maps.add(secondPageItems);

        return maps;
    }
}