很多项目都有水平滚动分页菜单效果,类似淘宝、京东之类的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;
}
}