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

时间 2019-11-20

标签 android viewpagerindicator 框架使用 tabpageindicator 以及样式修改栏目 Android 繁體版

原文原文链接

今天介绍一个经常使用的框架，通常app都会用到这样的框架，下面就来介绍框架的使用以及样式的修改，那就以我本身写的例子来向你们介绍吧！html

首先给出xml ，在相应窗口的布局文件中引入TabPageIndicator，在Android-ViewPagerIndicator项目中有不少的tab的样式，它们对应不一样的类。通常咱们都是将Android-ViewPagerIndicator与viewpager组合使用，当咱们切换tab的时候下面的viewpager也一块儿切换。android

 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>

而后看看主代码怎么写的：app

这是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的数据（都是从接口获取的数据）ide

 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>

咱们能够根据本身的须要继承这个样式并修改。post

还有设置字体颜色的，点击时字体会变色字体

新建viewpager_title_textcolor.xmlspa

 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的集成很是简单的。