Android 5.x Material design 之 Ta

Randy _ 孤独患者

书接上章： （1）改下指示标的一些属性：例如颜色，宽高，大小写等 （2）自定义导航栏
: 没有看过第一篇，建议先看第一篇：
Android 5.x Material design 之 TabLayout (01)
-----------------------------华丽丽的分割线----------------------

一，改变指示标的特性

01,

• 其实很简单：
• 只需在 style文件中：

<style name="MyTabLayoutStyle" parent="Widget.Design.TabLayout">    
    <!--tab的最大的宽度-->
    <item name="tabMaxWidth">@dimen/design_tab_max_width</item>        
    <!--tab指示标的颜色-->
    <item name="tabIndicatorColor">#69f</item>
    <!--tab 指示标的高度-->
    <item name="tabIndicatorHeight">2dp</item>
    <!--tab字体的样式-->
    <item name="tabTextAppearance">@style/MyTabTextStyle</item>      
    <!--tab 选中时的颜色-->
    <item name="tabSelectedTextColor">#69f</item>
</style>

• 上述MyTabTextStyle，也是一个自己定义的样式，如下

<style name="MyTabTextStyle" parent="TextAppearance.Design.Tab">    
      <!--Tab字体的大小-->
      <item name="android:textSize">@dimen/design_tab_text_size</item>
      <!--Tab字体的默认的颜色-->
      <item name="android:textColor">#1d000000</item>
      <!--Tab字体是否为大写-->
      <item name="textAllCaps">true</item>
</style>

02，在你的布局文件中，引用自定义style就ok了

<android.support.design.widget.TabLayout
      android:id="@+id/tl_sliding"
      android:layout_width="match_parent"      
      style="@style/MyTabLayoutStyle"        
      android:layout_height="wrap_content" />

03,最后，看看效果咯

-- 发现字体颜色，指示标等，都已经改变咯。。。

1D2C109F-1663-42CA-86A1-604D5AD42D4A.png

二，自定义导航栏

• 有时候，可能，这些并不能满足我们的需要，所以，我们要自定义一些导航栏，来满足我们的需求。我们可以用如下方法来实现我们想要的效果哦~~

01 首先写我们的自定义tab的布局 layout/tab_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    android:layout_width="match_parent"      
    android:layout_height="match_parent"    
    android:gravity="center" 
    android:orientation="vertical">
      <ImageView
          android:id="@+id/iv_tab"
          android:layout_width="30dp"
          android:scaleType="fitXY"
          android:layout_height="30dp" />
      <TextView
           android:id="@+id/tv_tab"        
           android:layout_width="wrap_content"        
           android:layout_height="wrap_content"        
           android:gravity="center" />
</LinearLayout>

• 布局很贱单，不多说了

02,来到适配器PagerAdapter中

   public class PagerAdaper extends FragmentPagerAdapter {  
      /**     * 标题栏     */
      private static final String[] mTitles = {"tab0", "tab1", "tab2", "tab3", "tab4", "tab5", "tab6"};
      private static final int[] mImgIds = {android.R.drawable.ic_delete, android.R.drawable.ic_menu_add,            android.R.drawable.ic_menu_agenda, android.R.drawable.ic_dialog_alert,            android.R.drawable.ic_lock_lock, android.R.drawable.ic_search_category_default,            android.R.drawable.ic_input_get};
      private Context mContext;
      public PagerAdaper(FragmentManager fm, Context context) {        
              super(fm);
              this.mContext = context;  
      }
      @Override
      public Fragment getItem(int position) {
            return CommonFragment.newInstance(position); 
       }
      @Override
      public int getCount() {
            return mTitles.length;    }
      //自定义返回 标题栏的方法
      public View getTabView(int position) {
          View view = LayoutInflater.from(mContext).inflate(R.layout.tab_layout, null);        
          ImageView iv_tab = (ImageView) view.findViewById(R.id.iv_tab);        
          TextView tv_tab = (TextView) view.findViewById(R.id.tv_tab);        
          iv_tab.setImageResource(mImgIds[position]);        
          tv_tab.setText(mTitles[position]);
          return view;
      }  
}

• 这个类中，加了一个我们自定义的 方法getTabView(int pos)， 为了返回对应标题位置的 自定义的标题

03，最后回到我们的MainActivity中，来初始化我们的标题

  protected void onCreate(Bundle savedInstanceState) {    
        super.onCreate(savedInstanceState);    
        setContentView(R.layout.activity_main); 
          //初始化控件
         ViewPager vp_content = (ViewPager) findViewById(R.id.vp_content);    
          TabLayout tl_sliding = (TabLayout) findViewById(R.id.tl_sliding);    
          PagerAdaper adapter = new PagerAdaper(getSupportFragmentManager(), this);    
          vp_content.setAdapter(adapter); 
           /**让标题栏和viewpager联动起来*/    
          tl_sliding.setTabMode(TabLayout.MODE_SCROLLABLE);    
          tl_sliding.setupWithViewPager(vp_content);
          //设置自定义标题 
         for (int i = 0; i < tl_sliding.getTabCount(); i++) {
                //获得到对应位置的Tab 
               TabLayout.Tab tab = tl_sliding.getTabAt(i);
              //设置自定义的标题  
              tab.setCustomView(adapter.getTabView(i));
          }
    }

• 上述代码，01)主要通过 getTabCount得到TabLayout中的tab的数目，
  02)然后通过方法getTabAt（int pos）获得每个位置上的tab,
  3. 调用 Tab类中的setCustomView();方法来设置每个标题

DE02FA91-1E91-4A0D-AAAE-AE41720A346E.png