基於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;
    }
}