Android 组合控件ViewPager+GridView+圆形页面指示器的使用,最简单方便的带指示器翻页依赖库
2019-03-22 21:50
549 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_38184748/article/details/88744540
Android 组合控件ViewPager+GridView+圆形页面指示器的使用,最简单方便的带指示器翻页依赖库
前言
上一次说了自定义圆形页面指示器 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); }
完事。
相关文章推荐
- 【Android 开发】:UI控件之 ViewPager 多页面滑动效果控件的的使用
- 自定义ViewPagerIndicator三角形指示器、圆形指示器简单使用
- Android基础:翻页控件Viewpager的使用方法,viewpager+fragment混合使
- 【Android 开发】:UI控件之 ViewPager 多页面滑动效果控件的的使用(二)
- Android基础:翻页控件Viewpager的使用方法,viewpager+fragment混合使用
- Android ViewPager、Fragment、组合控件结合使用(滑动切换,点击导航切换)
- Android的使用ViewPager简单实例【类似tab翻页】
- android开发之&使用ViewPager加gridView实现菜单按钮分页滑动(类似QQ表情选择翻页效果)
- Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!
- 【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面
- 【Android开源】CircleImageView自定义圆形控件的使用
- Android高手进Android ViewPager控件的使用(基于ViewPager的横向相册)!!!
- 【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面
- Android开发(二)——自定义圆形控件的使用CircleImageView
- Android ViewPager简单的使用方法
- Android开发之使用ViewPager做引导页面(转载)
- android开源系列:CircleImageView自定义圆形控件的使用
- android开源系列:CircleImageView自定义圆形控件的使用
- Xamarin.Android ViewPager简单使用
- Android学习摘记——简单的自定义View(组合控件)