Android ViewPagerIndicator指示器

1，实现效果

2，导入

【1】ViewPagerIndicator项目导入

自己项目下添加依赖

compile 'com.github.JakeWharton:ViewPagerIndicator:2.4.1'

整体项目添加 maven

allprojects {

    repositories {

        jcenter()

        mavenCentral()

        maven { url "https://jitpack.io" }

    }

}

3，简单使用

【1】布局文件中添加，必须和viewpager 一起使用

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_gravity="center_horizontal"

    android:orientation="vertical" >

    <com.viewpagerindicator.TabPageIndicator

        android:id="@+id/indicator"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

    />

    <android.support.v4.view.ViewPager

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/vp_news"

        />

</LinearLayout>

viewpager 设置完适配器后。把viewpager放进去

vpNews.setAdapter(new NewAdapter()); 

mIndicator.setViewPager(vpNews);

PagerAdapter 中重写getPageTitle方法

@Override

public CharSequence getPageTitle(int position) {

    // 返回标题

    return mInfos.get(position).title;

}

【2】ViewPagerIndicator修改全部都在样式里设置

AndroidManifest 中给activity 设置样式

<activity android:name=".activity.MainActivity"

    android:theme="@style/Theme.PageIndicatorDefaults" >

</activity>

【3】对样式进行修改

vpi__dark_theme 选中和不被选中的字体

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false" android:color="#000"/>

    <item android:state_window_focused="false" android:color="#000"/>

    <item android:state_pressed="true" android:color="#f00"/>

    <item android:state_selected="true" android:color="#f00"/>

    <!-- item android:state_activated="true" android:color="@color/vpi__bright_foreground_holo_dark"/ -->

    <item android:color="#000"/> <!-- not selected -->

</selector>

vpi__tab_indicator 选中的背景框

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Non focused states -->

<item android:drawable="@android:color/white" android:state_focused="false" android:state_pressed="false" android:state_selected="false" />

<item android:drawable="@drawable/news_tab_item_bg_select" android:state_focused="false" android:state_pressed="false" android:state_selected="true" />

<!-- Focused states -->

<item android:drawable="@android:color/white" android:state_focused="true" android:state_pressed="false" android:state_selected="false" />

<item android:drawable="@drawable/news_tab_item_bg_select" android:state_focused="true" android:state_pressed="false" android:state_selected="true" />

<!-- Pressed -->

<!-- Non focused states -->

<item android:drawable="@android:color/white" android:state_focused="false" android:state_pressed="true" android:state_selected="false" />

<item android:drawable="@drawable/news_tab_item_bg_select" android:state_focused="false" android:state_pressed="true" android:state_selected="true" />

<!-- Focused states -->

<item android:drawable="@android:color/white" android:state_focused="true" android:state_pressed="true" android:state_selected="false" />

<item android:drawable="@drawable/news_tab_item_bg_select" android:state_focused="true" android:state_pressed="true" android:state_selected="true" />

</selector>

activity 选中的主题

<style name="Theme.PageIndicatorDefaults" parent="android:Theme.Holo.Light.NoActionBar">

    <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>

    <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>

</style>

<style name="Widget">

</style>





<style name="TextAppearance.TabPageIndicator" parent="Widget">

    <item name="android:textStyle">bold</item>

    <item name="android:textColor">@color/vpi__dark_theme</item>

</style>

<style name="Widget.IconPageIndicator" parent="Widget">

    <item name="android:layout_marginLeft">6dp</item>

    <item name="android:layout_marginRight">6dp</item>

</style>

<style name="Widget.TabPageIndicator" parent="Widget">

    <item name="android:gravity">center</item>

    <item name="android:background">@drawable/vpi__tab_indicator</item>

    <item name="android:paddingLeft">22dip</item>

    <item name="android:paddingRight">22dip</item>

    <item name="android:paddingTop">12dp</item>

    <item name="android:paddingBottom">12dp</item>

    <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>

    <item name="android:textSize">12sp</item>

    <item name="android:maxLines">1</item>

</style>

【4】同步viewpager和ViewPagerIndicator

viewpager滑动监听由于mIndicator内部用到了ViewPager滑动监听

所以只设置ViewPager监听就不起作用直接用mIndicator设置

    mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {





            @Override

            public void onPageSelected(int position) {

            


                }

            }





            @Override

            public void onPageScrolled(int position, float positionOffset,

                                       int positionOffsetPixels) {



            }

            @Override

            public void onPageScrollStateChanged(int state) {





            }

        });

4，有的模拟器会出现BUG

getParent（）.requestDisallowInterceptTouchEvent(true);

Android ViewPagerIndicator指示器

猜你喜欢