ViewPagerTabIndicator库使用说明

1）仿网易新闻的顶部导航指示器

2）Android打造不一样的新手引导页

仿网易新闻的顶部导航指示器

我们知道，页面导航器（Navigator）在几乎所有的项目中都会用到，平时大多数时候为了节省时间，都会直接在github上面拿别人的开源项目来用，最近自己在复习自定义View，就尝试封装了一下，源码参考项目PagerSlidingTabStrip

转载请注明原博客地址：

大家先来看一下效果图

基于文字的页面导航器

基于图片的页面导航器

使用方法

主要步骤分为三步

1)在xml文件里面

<com.xujun.viewpagertabindicator.TabPagerIndicator
    android:id="@+id/pagerIndicator"
    android:layout_width="match_parent"
    android:layout_height="50dp"/>

<android.support.v4.view.ViewPager
    android:layout_weight="1"
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp">
</android.support.v4.view.ViewPager>

2）在代码里面找到相应的控件

 mPagerIndicator = (TabPagerIndicator) findViewById(R.id.pagerIndicator);
 mViewPager = (ViewPager) findViewById(R.id.viewPager);

3）初始化ViewPager的Adapter和将mViewPager和我们的mPagerIndicator绑定

//必须先给ViewPager设置适配器
mViewPager.setAdapter(mPagerAdapter);
//接着将mViewPage和我们的mPagerIndicator绑定
mPagerIndicator.setViewPager(mViewPager);

注意事项，

如果是文字标题导航的，我们只需重写在适配器里面重写getPageTitle这个方法

public CharSequence getPageTitle(int position) {
        return titles[position];
}

如果是图标导航的，我们的适配器需要实现这个借口TabPagerIndicator.IconTabProvider，并重写里面的public int getPageIconResId(int position)这个方法

public class BaseIconAdapter extends FragmentPagerAdapter implements TabPagerIndicator.IconTabProvider {

    //省略了若干方法，有兴趣可以去看一下例子

    @Override
    public int getPageIconResId(int position) {
        return resIds[position];
    }
}

我们可以通过setIndicatorMode(IndicatorMode indicatorMode)这个方法设置不同的下滑线样式

mPagerIndicator.setIndicatorMode(TabPagerIndicator.IndicatorMode.MODE_WEIGHT_EXPAND_NOSAME,
            true);

mPagerIndicator.setIndicatorMode(TabPagerIndicator.IndicatorMode.MODE_WEIGHT_EXPAND_SAME,
            true);

关于下划线的颜色，字体的颜色与大小的设置，请参照源码设置，这里就不列举了

转载请注明原博客地址：

Android打造不一样的新手引导页面

效果图如下

1）首先我们先来看一下要怎样使用我们的circleIndicator控件

其实很简单，值需要两个步骤

1）在xml布局文件里面

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.v4.view.ViewPager
        android:layout_below="@id/rl_header"
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:layout_marginTop="20dp">

    </android.support.v4.view.ViewPager>

    <com.xujun.administrator.customviewspecif.view.CirclePageIndicator
        android:id="@+id/circle_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp">

    </com.xujun.administrator.customviewspecif.view.CirclePageIndicator>
</RelativeLayout>

2）在代码里面

mViewPager = (ViewPager) findViewById(R.id.viewPager);
mCirclePageIndicator = (CirclePageIndicator) findViewById(R.id.circle_indicator);

//注意下面初始化的顺序不可以调换
mFragemntAdapter = new BaseFragemntAdapter(
        getSupportFragmentManager(), mFragments);
mViewPager.setAdapter(mFragemntAdapter);

//将mCirclePageIndicator与我们的mViewPager绑定在一起
mCirclePageIndicator.setViewPager(mViewPager);

3）页面的切换效果

DefaultTransformer defaultTransformer = new DefaultTransformer();
mViewPager.setPageTransformer(true, defaultTransformer);

扩展

1）在xml布局里面更改我们的样式

xmlns:app="http://schemas.android.com/apk/res-auto"
//例如更改我们移动小圆点的颜色
app:fillColor="#fff"


//其他属性的更改请参考以下我们自定义的属性

<declare-styleable name="CirclePageIndicator">
    <!-- Whether or not the indicators should be centered. -->
    <attr name="centered" />
    <!-- Color of the filled circle that represents the current page. -->
    <attr name="fillColor" format="color" />
    <!-- Color of the filled circles that represents pages. -->
    <attr name="pageColor" format="color" />
    <!-- Orientation of the indicator. -->
    <attr name="android:orientation"/>
    <!-- Radius of the circles. This is also the spacing between circles. -->
    <attr name="radius" format="dimension" />
    <!-- Whether or not the selected indicator snaps to the circles. -->
    <attr name="snap" format="boolean" />
    <!-- Color of the open circles. -->
    <attr name="strokeColor" format="color" />
    <!-- Width of the stroke used to draw the circles. -->
    <attr name="strokeWidth" />
    <!-- View background -->
    <attr name="android:background"/>
</declare-styleable>

2）在Java代码里面动态更改

// 设置滑动的时候移动的小圆点是否跳跃
mCirclePageIndicator.setSnap(false);
//设置小圆点的半径
mCirclePageIndicator.setRadius(10 * density);
// 设置页面小圆点的颜色
mCirclePageIndicator.setPageColor(0x880000FF);
// 设置移动的小圆点的颜色
mCirclePageIndicator.setFillColor(0xFF888888);
// 设置外边框的颜色
mCirclePageIndicator.setStrokeColor(0xFF000000);
//设置外表框的宽度
mCirclePageIndicator.setStrokeWidth(2 * density);

License

gdutxiaoxu/ViewPagerTabIndicator

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages