前言
上一次说了自定义圆形页面指示器 Android 自定义控件之圆形页面指示器CirclePageIndicator带划动效果
应该很少人耐心看完了。。。
这一次就把它打包成依赖库,直接添加依赖使用就好了。
不过为了方便我自己的项目,我还是加了点料进去;
能够几行代码实现 ViewPager+GridView+圆形页面指示器
类似于手机桌面那种样子
先上图
GIF图,点击查看
当然了,自带一个默认的样式,就是GIF图显示的样子。不过所有东西都是可以开发者自行配置的;
如下:
- 每个Item的样式可以自定义;
- 每个页面的行数、列数可以自定义;
- 可以修改圆形指示器的大小;
- 可以修改圆形指示器当前页的颜色;
- 可以修改圆形指示器所有页面的颜色;
- 可以修改圆形指示器所有页面的边框大小;
- 可以修改圆形指示器所有页面的边框颜色;
- 可以修改圆形指示器是否居中显示;
- 可以修改圆形指示器是否支持拖动跟随效果;
- 还有每个页面也可以不是GridView,自行定义页面放上去也OK;
使用方法
Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
implementation 'com.github.D10NGYANG:DL10FlipViewPage:1.0.0'
}
Step 3. 在布局里添加
记得要有ViewPager + CirclePageIndicator
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<com.dlong.rep.dlflipviewpage.indicator.CirclePageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingBottom="10dp"
app:pageColor="@color/colorAccent"
app:radius="6dp"
app:selectColor="@color/colorPrimary"
app:strokeWidth="0dp" />
</LinearLayout>
CirclePageIndicator可自定义的信息如下
// 圆形指示器是否居中显示,默认为true
app:centered="true"
// 当前页面指示器颜色,默认为#FFFFFFFF
app:selectColor="@color/colorPrimary"
// 所有页面指示器颜色,默认为#00000000
app:pageColor="@color/colorAccent"
// 所有页面指示器外边框颜色,默认为#FFDDDDDD
app:strokeColor="@android:color/white"
// 所有页面指示器外边框宽度,默认为1
app:strokeWidth="0dp"
// 指示器半径
app:radius="6dp"
// 圆形页面指示器是否锁定位置,默认为false。锁定位置的话就不能跟随手指划动而移动指示器
app:snap="false"
Step 4. 在活动中
先声明控件
private ViewPager view_pager;
private CirclePageIndicator indicator;
获得控件
private void initview() {
view_pager = (ViewPager) findViewById(R.id.viewPager);
indicator = (CirclePageIndicator) findViewById(R.id.indicator);
}
使用默认样式
private void initDatas() {
// 新建一个数据列表,DLGridViewBean是默认的实体类
final List<DLGridViewBean> dataList = new ArrayList<>();
// 循环存进
for (int i = 0; i < 22; i++) {
// 新建一个实体类
DLGridViewBean bean = new DLGridViewBean();
// 存放文本信息,会显示在每个item的文本位置
bean.setText("靓仔"+i);
// 存放图片信息,会显示在每个item的图片位置
bean.setImg(R.mipmap.ima);
// 可以携带一些自定义的信息
bean.setObject(null);
// 存进列表
dataList.add(bean);
}
// DLVPSetting是依赖库里的工具,新建他。填进行数和列数,行列都是1的话就是一个页面了。带一个监听器,返回点击item事件
DLVPSetting setting = new DLVPSetting(mContext, 4, 4, new DLVPSetting.OnClickItemListener() {
@Override
public void OnClickItem(int position, DLGridViewBean bean) {
// 使用默认模式的数据从这里回调
Toast.makeText(mContext, bean.getText(), Toast.LENGTH_SHORT).show();
}
@Override
public void OnClickItem(int position, Map<String, Object> map) {
// 使用自定义模式的数据从这里回调
}
});
// 最主要的两步
// 给viewPager设置适配器,从DLVPSetting里通过工具获得,放进数据列表即可
view_pager.setAdapter(setting.getAdapter(dataList));
// 最后绑定圆形适配器就完成了
indicator.setViewPager(view_pager);
}
使用自定义样式
private void initDatas2() {
// 和SimpleAdapter的参数一样的from和to
String[] from = new String[]{"txt", "img"};
int[] to = new int[]{R.id.tv_text, R.id.iv_img};
// 新建数据列表
final ArrayList<Map<String, Object>> dataList2 = new ArrayList<>();
// 循环存进
for (int i = 0; i < 5; i++) {
Map<String, Object> bean = new HashMap<>();
bean.put("txt", "家园"+i);
bean.put("img", R.drawable.home);
dataList2.add(bean);
}
// DLVPSetting是依赖库里的工具,新建他。填进行数和列数,行列都是1的话就是一个页面了。带一个监听器,返回点击item事件
DLVPSetting setting = new DLVPSetting(mContext, 1, 1, new DLVPSetting.OnClickItemListener() {
@Override
public void OnClickItem(int position, DLGridViewBean bean) {
// 使用默认模式的数据从这里回调
}
@Override
public void OnClickItem(int position, Map<String, Object> map) {
// 使用自定义模式的数据从这里回调
Toast.makeText(mContext, (String) map.get("txt"), Toast.LENGTH_SHORT).show();
}
});
// 最主要的两步
// 给viewPager设置适配器,从DLVPSetting里通过工具获得,放进数据列表、自定义item样式、from和to
view_pager.setAdapter(setting.getAdapter(dataList2, R.layout.item_main_mode, from, to));
// 最后绑定圆形适配器就完成了
indicator.setViewPager(view_pager);
}
完事。