TabLayout replaces ViewPagerIndicator

TabLayout replaces ViewPagerIndicator

Reference article: http://chenfuduo.me/2015/07/30/TabLayout-of-design-support-library/

1.build.gradle associated library, which needs to be done in the case of networking

compile 'com.android.support:design:22.2.1'

2. Use TabLayout in the layout file, that is, replace TabPagerIndicator with TabLayout

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

3. Set the style (cannot be without style)

style="@style/MyCustomTabLayout"

    <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">

        <item name="tabMaxWidth">@dimen/tab_max_width</item>
        <item name="tabMinWidth">72dp</item>
        <item name="tabIndicatorColor">#0000FF</item>
        <item name="tabIndicatorHeight">3dp</item>


        <item name="tabPaddingStart">8dp</item>
        <item name="tabPaddingEnd">8dp</item>
        <item name="tabBackground">@android:color/white</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">14sp</item>
        <item name="android:textColor">@android:color/black</item>
        <item name="textAllCaps">false</item>
    </style>

4. Associate ViewPager

  //TabLayout关联ViewPager
    tabLayout.setupWithViewPager(vp_news_menu_detail);
    //一定要设置设置滚动模式
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

5. Override the getPageTitle method in the adapter

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

6. Customize the effect of Tab

6.1 Setting the effect of Tab Step 1, rewrite the getTabView() method in the adapter

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

To write the layout as follows:

    <?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:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp" />

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

    </LinearLayout>

6.2 Call the getTabView method

//Custom Table layout should be combined with the getTabView method in the adapter

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

No effect if not called