今天介绍一个常用的框架，一般app都会用到这样的框架，下面就来介绍框架的使用以及样式的修改，那就以我自己写的例子来向大家介绍吧！
首先给出xml ，在相应窗口的布局文件中引入TabPageIndicator，在Android-ViewPagerIndicator项目中有很多的tab的样式，它们对应不同的类。 一般我们都是将Android-ViewPagerIndicator与viewpager组合使用，当我们切换tab的时候下面的viewpager也一起切换。
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="fill_parent" 3 android:layout_height="fill_parent" 4 android:orientation="vertical" > 5 6 <com.viewpagerindicator.TabPageIndicator 7 android:id="@+id/indicator" 8 android:layout_width="fill_parent" 9 android:layout_height="wrap_content" /> 10 11 <android.support.v4.view.ViewPager 12 android:id="@+id/pager" 13 android:layout_width="fill_parent" 14 android:layout_height="0dp" 15 android:layout_weight="1" /> 16 </LinearLayout>
然后看看主代码怎么写的：
这是title比较少的情况下，我们都这样写
1 @ContentView(R.layout.activity_telecom_fraud) 2 public class TelecomFraudActivity extends BaseAppActivity{ 3 @ViewInject(R.id.indicator) 4 private TabPageIndicator indicator; 5 @ViewInject(R.id.pager) 6 private ViewPager pager; 7 8 private MyPageAdapter adapter; 9 String []title = {"拉拉","呵呵"}; 10 @Override 11 protected void init() { 12 adapter = new MyPageAdapter(getSupportFragmentManager()); 13 pager.setAdapter(adapter); 14 indicator.setViewPager(pager); 15 } 16 17 class MyPageAdapter extends FragmentPagerAdapter { 18 public MyPageAdapter(FragmentManager fm) { 19 super(fm); 20 } 21 22 @Override 23 public Fragment getItem(int position) { 24 Fragment f; 25 if (position %title.length == 0){ 26 f = TFragment.newInstance(); 27 }else{ 28 f = MFragment.newInstance(); 29 } 30 31 return f; 32 } 33 34 @Override 35 public CharSequence getPageTitle(int position) { 36 return title[position%title.length].toUpperCase(); 37 } 38 39 @Override 40 public int getCount() { 41 return title.length; 42 } 43 } 44 }
1 这里面的TFragment.newInstance就是在TFragment中定义的一个静态方法，相当于创建对象实例化 2 3 public static TFragment newInstance() { 4 TFragment fragment = new TFragment(); 5 return fragment; 6 }
MFragment也一样，这里就不上传代码了
其实一般做app项目时我们一般都是调用接口来获取title的值，这种情况下一般title就比较多，那我们就不可能一一写出其对应的fragment，一般都会采取下面的方式
首先通过接口获取到title
1 private void getType(){ 2 EGRequestParams params=new EGRequestParams(); 3 HttpUtil.postNoProcess((BaseAppActivity) getActivity(), UrlConfig.ZIXUN_TYPE, params, new HttpUtil.Ok() { 4 @Override 5 public void success(String str) { 6 typeList=JSON.parseArray(str); 7 if (typeList.size()>0){ 8 indicator.setVisibility(View.VISIBLE); 9 pagerAdapter = new MyPageAdapter(getChildFragmentManager()); 10 pager.setAdapter(pagerAdapter); 11 indicator.setViewPager(pager); 12 indicator.setCurrentItem(positions); 13 pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 14 @Override 15 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 16 curPosition=position; 17 } 18 19 @Override 20 public void onPageSelected(int position) { 21 indicator.onPageSelected(position); 22 positions = position; 23 } 24 25 @Override 26 public void onPageScrollStateChanged(int state) { 27 28 } 29 }); 30 } 31 } 32 @Override 33 public void complete(String str) { 34 35 } 36 }); 37 }
然后通过title的id，position来确定fragment的数据（都是从接口获取的数据）
1 class MyPageAdapter extends FragmentPagerAdapter { 2 public MyPageAdapter(FragmentManager fm) { 3 super(fm); 4 } 5 @Override 6 public Fragment getItem(int position) { 7 FragmentTask f = FragmentTask.newInstance(); 8 Bundle bundle = new Bundle(); 9 bundle.putString("type", ((JSONObject) typeList.get(position)).getString("id")); 10 bundle.putString("position", position+""); 11 f.setArguments(bundle); 12 return f; 13 } 14 @Override 15 public CharSequence getPageTitle(int position) { 16 return ((JSONObject)typeList.get(position)).getString("name"); 17 } 18 @Override 19 public int getCount() { 20 return typeList.size(); 21 } 22 }
FragmentTask 里获取传过去的值
1 Bundle bundle = getArguments(); 2 if (bundle != null){ 3 type = bundle.getString("type"); 4 position= bundle.getString("position"); 5 } 6 7 .......... 8 if (!position.equals(Fragment3.curPosition)){ 9 ZiXunTableView.initLoad(); 10 } 11 12 ........ 13 EGRequestParams params=new EGRequestParams(); params.addBodyParameter("page",pageIndex+""); params.addBodyParameter("size",pageSize+""); 14 params.addBodyParameter("programRefId",type); 15 .........
改变tab的样式，我们这边只看TabPageIndicator的样式修改，其他基本类似。我们进入TabPageIndicator的源码在构造函数。
1 public TabPageIndicator(Context context, AttributeSet attrs) { 2 super(context, attrs); 3 setHorizontalScrollBarEnabled(false); 4 mTabLayout = new IcsLinearLayout(context, R.attr.vpiTabPageIndicatorStyle); 5 addView(mTabLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT)); 6 }
我们可以看出TabPageIndicator使用的是vpiTabPageIndicatorStyle样式。我们可以在依赖项目中看到系统自带的样式，在依赖项目的values/vpi_styles.xml文件中，这里面定义了所有tab类型的样式。
1 <style name="Widget.TabPageIndicator" parent="Widget"> 2 <item name="android:gravity">center</item> 3 <item name="android:background">@drawable/vpi__tab_indicator</item> 4 <item name="android:paddingLeft">22dip</item> 5 <item name="android:paddingRight">22dip</item> 6 <item name="android:paddingTop">12dp</item> 7 <item name="android:paddingBottom">12dp</item> 8 <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item> 9 <item name="android:textSize">12sp</item> 10 <item name="android:maxLines">1</item> 11 </style>
我们可以根据自己的需要继承这个样式并修改。
还有设置字体颜色的，点击时字体会变色
新建viewpager_title_textcolor.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 3 4 <!-- Non focused states --> 5 <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="#99000000"/> 6 <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="#FF00A639"/> 7 8 <!-- Focused states --> 9 <item android:state_focused="true" android:state_pressed="false" android:state_selected="false" android:color="#99000000"/> 10 <item android:state_focused="true" android:state_pressed="false" android:state_selected="true" android:color="#FF00A639"/> 11 12 <!-- Pressed --> 13 <item android:state_pressed="true" android:color="#FF00A639"/> 14 15 </selector>
在style.xml中修改CustomTabPageIndicator的android:textColor属性即可：
1 <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator"> 2 <item name="android:background">@drawable/custom_tab_indicator</item> 3 <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item> 4 <item name="android:textColor">@drawable/viewpager_title_textcolor</item> 5 <item name="android:textSize">20sp</item> 6 <item name="android:divider">@drawable/custom_tab_indicator_divider</item> 7 <item name="android:showDividers">middle</item> 8 <item name="android:paddingLeft">8dp</item> 9 <item name="android:paddingRight">8dp</item> 10 <item name="android:paddingTop">5dp</item> 11 <item name="android:fadingEdge">horizontal</item> 12 <item name="android:fadingEdgeLength">8dp</item> 13 </style>
样式的修改网上有很多方法和例子，大家都可以查一查
到这里基本就OK了。Android-ViewPagerIndicator的集成非常简单的。