Android 组合控件ViewPager+GridView+圆形页面指示器的使用,最简单方便的带指示器翻页依赖库

时间:2024-03-21 09:59:15

Android 组合控件ViewPager+GridView+圆形页面指示器的使用,最简单方便的带指示器翻页依赖库

前言

上一次说了自定义圆形页面指示器 Android 自定义控件之圆形页面指示器CirclePageIndicator带划动效果
应该很少人耐心看完了。。。
这一次就把它打包成依赖库,直接添加依赖使用就好了。
不过为了方便我自己的项目,我还是加了点料进去;
能够几行代码实现 ViewPager+GridView+圆形页面指示器
类似于手机桌面那种样子

先上图

GIF图,点击查看
Android 组合控件ViewPager+GridView+圆形页面指示器的使用,最简单方便的带指示器翻页依赖库
当然了,自带一个默认的样式,就是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);
    }

完事。