【转载,请注明出处】,博客链接:http://blog.csdn.net/jxnk25/article/details/50590596
在最近的项目中,我们开发是新闻客户端中,有很多Tab标签,有很多实现方式,我使用的是一个开源控件ViewPageIndicator,ViewPageIndicator就是ViewPger指示器,使用ViewPageIndicator集合Viewpager来实现网易新闻客户端的Tab标签效果。
buildscript {
repositories {
maven { url "http://dl.bintray.com/populov/maven" }
mavenCentral()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:1.5.0'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
maven { url "http://dl.bintray.com/populov/maven" }
mavenCentral()
jcenter()
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
(2)在Gradle Scripts下面的第二个build.gradle,添加如下代码:
dependencies {(3)同步一下即可
compile 'com.viewpagerindicator:library:2.4.1@aar'
}
第1步:实例化ViewPager,给ViewPager设置Adapter
第2步:实例化TabPageIndicator,TabPageIndicator与ViewPager绑在一起
第3步:在Indicator上设置OnPagerChangeListner监听器
第4步:定义Adapter(继承FragmentPagerAdapter)
先实例化ViewPager,然后实例化TabPageIndicator,然后设置TabPageIndicator和ViewPager关联,就是调用TabPageIndicator的setViewPager(ViewPager view)方法,这样子就实现了点击上面的Tab,下面的ViewPager切换;滑动ViewPager,上面的Tab跟着切换。
ViewPager的每一个Item我们使用的是Fragment,使用Fragment可以使布局更加灵活一点,建议多用Fragment。
设置监听的时候,需要用Indicator提供的OnPagerChangeListener方法
public class MainActivity extends FragmentActivity {
private static final String[] ContentTitle = new String[] { "最新", "销量",
"佣金" };
//实例化ViewPager, 然后给ViewPager设置Adapter
ViewPager pager = (ViewPager)findViewById(R.id.pager);
FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);
//实例化TabPageIndicator,然后与ViewPager绑在一起(核心步骤)
TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
indicator.setViewPager(pager);
//如果要设置监听ViewPager中包含的Fragment的改变(滑动切换页面),使用OnPageChangeListener为它指 定一个监听器,那么不能像之前那样直接设置在ViewPager上了,而要设置在Indicator上,
indicator.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
/**
* Created by xhb on 2016/1/18.
* 文章界面的Fragment适配器
*/
public class TabPageIndicatorAdapter extends FragmentStatePagerAdapter {
//fragments集合
private List<Fragment> fragments;
//标题
private String[] title;
public TabPageIndicatorAdapter(FragmentManager fm, List<Fragment> fragments, String[] title) {
super(fm);
this.fragments = fragments;
this.title = title;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return title.length;
}
//获取当前位置的标题
@Override
public CharSequence getPageTitle(int position) {
return title[position % title.length];
}
}
MainActivity布局:(由于里面有多个指示器,我们需要的是Tab标签的indicator,所以是TabPageIndicator,大家不要引入错了)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"
xmlns:ptr="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
tools:context="com.xhb.testbw.MainActivity" >
<include layout="@layout/main_header" />
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
本例中,添加了3个<style>,其中"StyledIndicators"是我们需要的<style>,它其中的<item>使用了"CustomTabPageIndicator"这个<style>,这个<style>其中的一个<item>又使用了"CustomTabPageIndicator.Text"这个<style>。
实际上可以把"StyledIndicators"<style>的<item>属性全部写死在"StyledIndicators"下面。 但这样层级分离式的写法,增强了代码的复用性,以便后期维护和功能代码增删操作。
<!--Tabindicator的自定义style-->
<style name="StyledIndicators" parent="@android:style/Theme.Holo.Light.NoActionBar">
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
<item name="android:fitsSystemWindows">true</item>
</style>
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">@drawable/tab_indicator</item>
<item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
<item name="android:textSize">14sp</item>
<item name="android:dividerPadding">8dp</item>
<item name="android:showDividers">middle</item>
<item name="android:paddingLeft">15dp</item>
<item name="android:paddingRight">15dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
</style>
<style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
<item name="android:typeface">monospace</item>
<item name="android:textColor">@drawable/selector_tabtext</item>
</style>
第2步:创建<style>中使用到的drawable资源文件:
在drawable目录下添加tab_indicator.xml 和selector_tabtext.xml。
本例中使用到了自定义的drawable资源,自定义drawable一般配合上面的自定义style使用,提供图片、颜色等资源来支持自定义样式:
tab_indicator.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
<item android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
<item android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/base_tabpager_indicator_selected" />
<item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/base_tabpager_indicator_selected" />
</selector>
selcetor_tabtext.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#EE2C2C" />
<item android:state_pressed="true" android:color="#EE2C2C" />
<item android:state_focused="true" android:color="#EE2C2C" />
<item android:color="@android:color/darker_gray"/>
</selector>
base_tabpager_indicator_selected.9.png 是指示器的.9图片,大家可以自己画一个