TabLayout使用

1.关联库

compile ‘com.android.support:design:23.3.0’

2.布局写上TabLayout

 <android.support.design.widget.TabLayout
      android:id="@+id/tabLayout"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_gravity="center_vertical"
      android:layout_weight="1" />

3.实例化

  @ViewInject(R.id.tablayout)
    private TabLayout tabLayout;

4.TabLayout和关联

tabLayout.setupWithViewPager(viewPager);
 //注意以后监听页面的变化 ，
 viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

5.适配器中重写getPageTitle方法

 class MyNewsMenuDetailPagerAdapter extends PagerAdapter {

        @Override
        public CharSequence getPageTitle(int position) {
            return children.get(position).getTitle();
        }

       .....
    }

TabLayout设置指针颜色和高度文字颜色

1.添加样式

      <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="wrap_content"
            style="@style/MyCustomTabLayout"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

1. values目录下styles.xml里面
   MyCustomTabLayout样式

  <stylename="MyCustomTabLayout"parent="Widget.Design.TabLayout">

        <item name="tabMaxWidth">72dp</item>//设置标签的宽
        <item name="tabMinWidth">72dp</item>//设置标签的高
        <item name="tabIndicatorColor">#ff0000</item>//设置指针的颜色
        <item name="tabIndicatorHeight">2dp</item>//设置指针的高
        <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
        <item name="tabSelectedTextColor">@android:color/holo_red_light</item>//设置文字选中颜色

    </style>

    <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>//设置文字大小
        <item name="android:textColor">@android:color/black</item>//设置文字默认颜色
        <item name="textAllCaps">false</item>//设置大小写
    </style>

TabLayout自定义样式

1.设置的样式

   vp_news_menu_detailpager.setAdapter(adapter);


        //6.关联ViewPager,TabPageIndicator才可以显示

        tabLayout.setupWithViewPager(vp_news_menu_detailpager);

        //设置滚动模式

        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //设置页面的监听需要用TabPageIndicator


        for (int i = 0; i < tabpageindicator.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setCustomView(getTabView(i));
        }

    注意了setupWithViewPager必须在ViewPager.setAdapter()之后调用

//自定义Tab

2.在适配器中添加getTabView()方法

      public View getTabView(int position){
        View view = LayoutInflater.from(context).inflate(R.layout.tab_item, null);
        TextView tv= (TextView) view.findViewById(R.id.textView);
        tv.setText(childrenDatas.get(position).getTitle());
        ImageView img = (ImageView) view.findViewById(R.id.imageView);
        img.setImageResource(R.drawable.dot_focus);
        return view;
      }

 布局文件tab_item.xml文件

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center_horizontal"
      android:orientation="vertical">


      <TextView
          android:text="text"
          android:id="@+id/textView"
          android:textColor="#000000"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginLeft="3dp" />

      <ImageView
          android:src="@drawable/dot_focus"
          android:id="@+id/imageView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerVertical="true" />

  </LinearLayout>