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);