前言
大多数app首页界面一般貌似可以滑动切换上下页的网格布局，这种效果用得挺多，可惜Android原生是没有这样的控件的。在工作中，我也用到过几次。但每次实现都是按ctrl+A+C+V，代码写得也不优雅，就是再次重新复制粘贴，也避免不了看上几眼，修改修改，特别不爽快。每次吐槽的同时在想，下次我要再用到这种效果，我就将这些代码关进小黑屋。拒绝再写重复代码，虽然大多数只是按ctrl+A+C+V。这次，我终于要将自己吐槽时的想法付之行动的。再写之前，为了避免重复造轮子。在网上搜了好多次，嗯，没有意外，我还是没有发现到惊喜。那就开始行动了。这种效果用ViewPager+GridView实现，那我就叫它PageGridView吧(其实名字我也想了好久）star一下也是不错的，嘿嘿!!!
PageGridView 特点
- 可自由定制Item布局
- 无需写adapter适配器,直接调用setData()方法填充数据
- 只需实体类继承ItemModel即可
- 可显示本地图、网络图、资源ID图标，由开发者实现
- 动态计算PageGridView高度，不需要在布局里面写固定高度
- 可重复setData()方法刷新数据
- 不需要复制粘贴（重点）
PageGridView自定义属性
| 属性名 | 说明 | 默认值 |
|---|---|---|
| pageSize | 每页大小 | 8 |
| numColumns | 列数 | 4 |
| isShowIndicator | 是否显示指示器 | true |
| selectedIndicator | 选中指示点资源ID | R.mipmap.ic_dot_selected |
| unSelectedIndicator | 未选中指示点资源ID | R.mipmap.ic_dot_normal |
| indicatorGravity | 指示器位置 | center |
| indicatorPaddingLeft | 指示器左内边距 | 0px |
| indicatorPaddingRight | 指示器右内边距 | 0px |
| indicatorPaddingTop | 指示器上内边距 | 0px |
| indicatorPaddingBottom | 指示器下内边距 | 0px |
| indicatorPadding | 指示器内边距 | 0px |
| indicatorBackground | 指示器背景颜色 | Color.WHITE |
| itemView | Item布局 | R.layout.item_view |
约定规则
- Item布局必须给定具体高度，默认itemView布局的高度为@dimen/item_height=80dp
- Item布局 TextView的id 为R.id.tv_item_name
- Item布局 ImageView的id 为R.id.iv_item_icon
- Item默认点击效果R.drawable.selector_item_view_bg
- Item点击颜色值：R.color.item_view_selected_color
- Item背景颜色值：R.color.item_view_normal_color
效果图
9098B4087FFDE82EB1B4CF6CF662C260.png
PageGridView使用
Gradle 依赖库
implementation 'com.wihaohao:PageGridView:1.0.0'
默认布局
一般默认参数即可满足需求
<com.pagegridviewlibrary.PageGridView
android:id="@+id/vp_grid_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
一行4列的布局
<com.pagegridviewlibrary.PageGridView
android:id="@+id/vp_grid_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:numColumns="4"
app:pageSize="4"
app:selectedIndicator="@mipmap/ic_dot_selected"
app:unSelectedIndicator="@mipmap/ic_dot_normal"
app:isShowIndicator="true"
/>
两行4列的布局
<com.pagegridviewlibrary.PageGridView
android:id="@+id/vp_grid_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:indicatorPadding="10dp"
app:isShowIndicator="true"
app:itemView="@layout/my_item_view"
app:numColumns="4"
app:pageSize="8"
app:selectedIndicator="@mipmap/ic_dot_selected"
app:unSelectedIndicator="@mipmap/ic_dot_normal" />
自定义Item布局
<com.pagegridviewlibrary.PageGridView
android:id="@+id/p_grid_view2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:indicatorGravity="right"
app:indicatorPaddingRight="@dimen/padding_10"
app:isShowIndicator="true"
app:itemView="@layout/item_custom"
app:indicatorBackground="@color/colorPrimary"
app:numColumns="5"
app:pageSize="5"/>
ItemModel
public abstract static class ItemModel {
/**
* 返回item名字
*
* @return
*/
protected abstract String getItemName();
/**
* 设置图标
*
* @param imageView
*/
protected abstract void setIcon(ImageView imageView);
/**
* 特殊需求，重写该方法，设置item
*
* @param itemView
*/
protected void setItemView(View itemView) {
}
}
Model
继承VpGridView.ItemModel 为item赋值和设置图标
public class MyIconModel extends PageGridView.ItemModel {
private String name;
private int iconId;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getIconId() {
return iconId;
}
public void setIconId(int iconId) {
this.iconId = iconId;
}
public MyIconModel(String name, int iconId) {
this.name = name;
this.iconId = iconId;
}
@Override
protected String getItemName() {
return name;
}
@Override
protected void setIcon(ImageView imageView) {
imageView.setImageResource(iconId);
}
}
特殊需求，继承VpGridView.ItemModel 设置ItemView
public class CustomModel extends PageGridView.ItemModel {
public String title;
public CustomModel(String title) {
this.title = title;
}
@Override
protected String getItemName() {
return null;
}
@Override
protected void setIcon(ImageView imageView) {
}
@Override
protected void setItemView(View itemView) {
TextView textView= (TextView) itemView;
textView.setText(title);
}
}
PageGridView的使用
public class MainActivity extends AppCompatActivity {
List<MyIconModel> mList;
List<CustomModel> mList2;
private PageGridView<MyIconModel> mPageGridView;
private PageGridView<CustomModel> mPageGridView2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPageGridView =findViewById(R.id.vp_grid_view);
initData();
mPageGridView.setData(mList);
mPageGridView.setOnItemClickListener(new PageGridView.OnItemClickListener() {
@Override
public void onItemClick(int position) {
Toast.makeText(MainActivity.this,position+"",Toast.LENGTH_SHORT).show();
}
});
//自定义item
mPageGridView2=findViewById(R.id.p_grid_view2);
mPageGridView2.setData(mList2);
}
private void initData() {
mList=new ArrayList<>();
mList2=new ArrayList<>();
for(int i=0;i<30;i++){
mList.add(new MyIconModel("测试"+i,R.mipmap.ic_launcher));
mList2.add(new CustomModel("标题"+i));
}
}
}
网友评论