Android开源控件ViewPager Indicator的使用方法

Stella981
• 阅读 1046

Android Viewpager Indicator是Android开发中最常用的控件之一,几乎所有的新闻类APP中都有使用,下面介绍其基本使用方法。

Android开源控件ViewPager Indicator的使用方法

1. ViewPager Indicator的Library

查看Viewpager Indicator的Library代码,可以看到此项目的设计思想:
首先定义了一个PageIndicator接口,它里面定义了最重要和基本的indicator表现出的一些方法:
    1.1 首先一个indicator必须要与一个ViewPager关联在一起,所以它提供了一个setViewPager方法。
    1.2 它扩展了ViewPager.OnPageChangeListener接口,表示接管了ViewPager的Pager改变时的监听处理,
          这也是为什么为ViewPager设置OnPageChangeListener监听器时不能设置在ViewPager上而必须设置在
          indicator上的原因。
    1.3 还有一个notifyDataSetChanged通知方法,表示为这个ViewPager提供View(一般是Fragment)的  Adapter 里面的数据集发生变化时,执行的动作,这里可增加相关的逻辑。

2. Viewpager Indicator的实现类

 然后再看下Viewpager Indicator的实现类,共有6个,由6个类分别实现,它们分别为:
    2.1 小圆圈类型的
    2.2 带图标类型的                    
    2.3 小横线类型的,距离屏幕最下边端有一定的距离。
    2.4 标签类型的(Tab)
    2.5 标题类型的,与标签类型的有点像,但它当前的标题页的左/右边的标题会卷起,即往两端缩进去。
    2.6 屏幕底部小横线类型的,并且会占满整行。                                        

3. Viewpager Indicator随附带的Demo

    3.1 Demo项目的设计
    项目由一个ListSamples的ListActivity入口,它主要用作组装所有的子indicator的列表。
    TestFragment.java,所有ViewPager上真正显示的视图。
    TestFragmentAdapter.java,所有ViewPager里的Adapter,为ViewPager生成TestFragment。
    Samplexxx.java,所有的indicator的显示,一个类显示一种使用方法或特性。

    3.2 具体使用方法
    查看SampleCirclesDefault.java基本就可以明白它的基本使用方法:
    首先,把Indicator包含进xml文件中,如下,注意它应该紧邻在ViewPager的上方或下方,总之要挨在一起。   

<com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/titles"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" />

    其次,使用titleIndicator.setViewPager(pager)把两者绑定在一起,如下所示:

//Set the pager with an adapter
 ViewPager pager = (ViewPager)findViewById(R.id.pager);
 pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

 //Bind the title indicator to the adapter
 TitlePageIndicator titleIndicator = (TitlePageIndicator)findViewById(R.id.titles);
 titleIndicator.setViewPager(pager);

    最后,如果你要监听ViewPager中包含的Fragment的改变(手滑动切换了页面),使用OnPageChangeListener为它指定一个监听器,那么不能直接设置在ViewPager上,而要设置在Indicator上,如下所示:

//continued from above
 titleIndicator.setOnPageChangeListener(mPageChangeListener);

    
4.修改indicator的样式(Theme)
    4.1 Theme XML,在AndroidManifest.xml中相应的Activity中设置,比如:

     <activity
            android:name=".SampleCirclesStyledTheme"
            android:label="Circles/Styled (via theme)"
            android:theme="@style/StyledIndicators">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />
            </intent-filter>
        </activity>

 
    android:theme="@style/StyledIndicators" ==> values/styles.xml中相应部分为:

<resources>
    <style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiCirclePageIndicatorStyle">@style/CustomCirclePageIndicator</item>
        <item name="vpiLinePageIndicatorStyle">@style/CustomLinePageIndicator</item>
        <item name="vpiTitlePageIndicatorStyle">@style/CustomTitlePageIndicator</item>
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
        <item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
    </style>

   
    4.2 Layout XML,在Layout XML方法中指定,如下:

<android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:padding="10dip"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:background="#FFCCCCCC"
        app:radius="10dp"
        app:fillColor="#FF888888"
        app:pageColor="#88FF0000"
        app:strokeColor="#FF000000"
        app:strokeWidth="2dp"
        />

    
    4.3    Object methods,直接在代码中设置,如下:

CirclePageIndicator indicator = (CirclePageIndicator)findViewById(R.id.indicator);
        mIndicator = indicator;
        indicator.setViewPager(mPager);

        final float density = getResources().getDisplayMetrics().density;
        indicator.setBackgroundColor(0xFFCCCCCC);
        indicator.setRadius(10 * density);
        indicator.setPageColor(0x880000FF);
        indicator.setFillColor(0xFF888888);
        indicator.setStrokeColor(0xFF000000);
        indicator.setStrokeWidth(2 * density);

                            
    具体有哪些属性可以参考library项目中的vpi__attrs.xml文件。    

参考:
https://github.com/JakeWharton/Android-ViewPagerIndicator

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
2年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
Wesley13 Wesley13
2年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Stella981 Stella981
2年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这