文档章节

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

l
 linsea
发布于 2014/03/14 21:55
字数 889
阅读 54015
收藏 24

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

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
                    
                   

                   

© 著作权归作者所有

共有 人打赏支持
l
粉丝 4
博文 11
码字总数 10693
作品 0
广州
技术主管
私信 提问
Android 使用ViewPager实现左右循环滑动图片

ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1. 首先看一...

Carl_
2015/01/08
0
0
Android 使用ViewPager实现左右循环滑动图片

ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1. 首先看一...

程序袁_绪龙
2014/12/22
0
0
Android ViewPager 实现多个页面切换滑动

使用ViewPager这个类可以轻松实现多个页面的滑动功能,而且相对viewgroup来讲要简单容易一些,在此之前我们需要导入 android-support-v4.jar这个jar包,是google提供的扩展包,位置路径为 an...

长平狐
2013/04/25
1K
0
android 手势滑动翻页且有每页选中提示

各位大神: 本人最近在做一个android 项目,想实现如下的效果: 如上图中绿色框中有页面提示,我现在知道一种方面是用ViewPager可大概实现如上功能,代码如下: package com.cogent.viewpag...

meable_lee
2013/02/26
5.2K
3
Android NestedScrollView/ScrollView包裹ViewPager自适应高度

Android NestedScrollView/ScrollView包裹ViewPager自适应高度 当Android的NestedScrollView/ScrollView这类滚动View包裹ViewPager时候,ViewPager中的Fragment包含的又是一系列高度值不固定...

zhangphil
2018/05/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库技术-Mysql主从复制与数据备份

数据库技术-Mysql 主从复制的原理: MySQL中数据复制的基础是二进制日志文件(binary log file)。一台MySQL数据库一旦启用二进制日志后,其作为master,它的数据库中所有操作都会以“事件”...

须臾之余
昨天
6
0
Git远程仓库——GitHub的使用(一)

Git远程仓库——GitHub的使用(一) 一 、 Git远程仓库 由于你的本地仓库和GitHub仓库之间的传输是通过SSH加密的,所以需要一下设置: 步骤一、 创建SSH key 在用户主目录下,看看有没有.ss...

lwenhao
昨天
1
0
SpringBoot 整合

springBoot 整合模板引擎 SpringBoot 整合Mybatis SpringBoot 整合redis SpringBoot 整合定时任务 SpringBoot 整合拦截器...

细节探索者
昨天
0
0
第二个JAVA应用

第二个JAVA应用 方法一:配置文件: # cd /usr/local/tomcat/conf/# vim server.xml</Host> <Host name="www.wangzb.cc" appBase="/data/wwwroot/www.wangzb.cc" //引用所......

wzb88
昨天
0
0
2019年阿里Java面试必问:JVM与性能优化+Redis+设计模式+分布式

前言 一年之计在于春 金三银四已经要到来,2019的新的开始,作为一个开发人员,你是否面上了自己理想的公司,薪资达到心中理想的高度? 面试:如果不准备充分的面试,完全是浪费时间,更是对...

火力全開
昨天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部