Android-ViewPagerIndicator框架使用——TabPageIndicator以及样式的修改

今天介绍一个常用的框架，一般app都会用到这样的框架，下面就来介绍框架的使用以及样式的修改，那就以我自己写的例子来向大家介绍吧！首先给出xml ，在相应窗口的布局文件中引入TabPageIndicator，在Android-ViewPagerIndicator项目中有很多的tab的样式，它们对应不同的类。 一般我们都是将Android-ViewPagerIndicator与viewpager组合使用，当我们切换tab的时候下面的viewpager也一起切换。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
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:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

然后看看主代码怎么写的：这是title比较少的情况下，我们都这样写

@ContentView(R.layout.activity_telecom_fraud)
public class TelecomFraudActivity extends BaseAppActivity{
@ViewInject(R.id.indicator)
private TabPageIndicator indicator;
@ViewInject(R.id.pager)
private ViewPager pager;

private MyPageAdapter adapter;
String []title = {"拉拉","呵呵"};
@Override
protected void init() {
adapter = new MyPageAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);
indicator.setViewPager(pager);
}

class MyPageAdapter extends FragmentPagerAdapter {
public MyPageAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int position) {
Fragment f;
if (position %title.length == 0){
f = TFragment.newInstance();
}else{
f = MFragment.newInstance();
}

return f;
}

@Override
public CharSequence getPageTitle(int position) {
return title[position%title.length].toUpperCase();
}

@Override
public int getCount() {
return title.length;
}
}
}

这里面的TFragment.newInstance就是在TFragment中定义的一个静态方法，相当于创建对象实例化

public static TFragment newInstance() {
TFragment fragment = new TFragment();
return fragment;
}

MFragment也一样，这里就不上传代码了

其实一般做app项目时我们一般都是调用接口来获取title的值，这种情况下一般title就比较多，那我们就不可能一一写出其对应的fragment，一般都会采取下面的方式
首先通过接口获取到title

private void getType(){
EGRequestParams params=new EGRequestParams();
HttpUtil.postNoProcess((BaseAppActivity) getActivity(), UrlConfig.ZIXUN_TYPE, params, new HttpUtil.Ok() {
@Override
public void success(String str) {
typeList=JSON.parseArray(str);
if (typeList.size()>0){
indicator.setVisibility(View.VISIBLE);
pagerAdapter = new MyPageAdapter(getChildFragmentManager());
pager.setAdapter(pagerAdapter);
indicator.setViewPager(pager);
indicator.setCurrentItem(positions);
pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
curPosition=position;
}

@Override
public void onPageSelected(int position) {
indicator.onPageSelected(position);
positions = position;
}

@Override
public void onPageScrollStateChanged(int state) {

}
});
}
}
@Override
public void complete(String str) {

}
});
}

然后通过title的id，position来确定fragment的数据（都是从接口获取的数据）

class MyPageAdapter extends FragmentPagerAdapter {
public MyPageAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
FragmentTask f = FragmentTask.newInstance();
Bundle bundle = new Bundle();
bundle.putString("type", ((JSONObject) typeList.get(position)).getString("id"));
bundle.putString("position", position+"");
f.setArguments(bundle);
return f;
}
@Override
public CharSequence getPageTitle(int position) {
return ((JSONObject)typeList.get(position)).getString("name");
}
@Override
public int getCount() {
return typeList.size();
}
}

FragmentTask 里获取传过去的值

Bundle bundle = getArguments();
if (bundle != null){
type = bundle.getString("type");
position= bundle.getString("position");
}

..........
if (!position.equals(Fragment3.curPosition)){
ZiXunTableView.initLoad();
}

........
EGRequestParams params=new EGRequestParams(); params.addBodyParameter("page",pageIndex+"");   params.addBodyParameter("size",pageSize+"");
params.addBodyParameter("programRefId",type);
.........

改变tab的样式，我们这边只看TabPageIndicator的样式修改，其他基本类似。我们进入TabPageIndicator的源码在构造函数。

public TabPageIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
setHorizontalScrollBarEnabled(false);
mTabLayout = new IcsLinearLayout(context, R.attr.vpiTabPageIndicatorStyle);
addView(mTabLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT));
}

我们可以看出TabPageIndicator使用的是vpiTabPageIndicatorStyle样式。我们可以在依赖项目中看到系统自带的样式，在依赖项目的values/vpi_styles.xml文件中，这里面定义了所有tab类型的样式。

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

我们可以根据自己的需要继承这个样式并修改。还有设置字体颜色的，点击时字体会变色新建viewpager_title_textcolor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Non focused states -->
<item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="#99000000"/>
<item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="#FF00A639"/>

<!-- Focused states -->
<item android:state_focused="true" android:state_pressed="false" android:state_selected="false" android:color="#99000000"/>
<item android:state_focused="true" android:state_pressed="false" android:state_selected="true" android:color="#FF00A639"/>

<!-- Pressed -->
<item android:state_pressed="true" android:color="#FF00A639"/>

</selector>

在style.xml中修改CustomTabPageIndicator的android:textColor属性即可：

<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">@drawable/custom_tab_indicator</item>
<item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
<item name="android:textColor">@drawable/viewpager_title_textcolor</item>
<item name="android:textSize">20sp</item>
<item name="android:divider">@drawable/custom_tab_indicator_divider</item>
<item name="android:showDividers">middle</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
</style>

样式的修改网上有很多方法和例子，大家都可以查一查到这里基本就OK了。Android-ViewPagerIndicator的集成非常简单的。