Android Tablayout+ViewPager使用及遇到的问题

AndroidStudio添加gradle依赖

//TabLayout
compile 'com.android.support:support-v4:26.+'
compile 'com.android.support:design:26.0.0-alpha1'
//ViewPage
android.support.v4.view.ViewPager

layout布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/mainBack"
    android:layout_marginBottom="58dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">
        <android.support.design.widget.TabLayout
            android:id="@+id/tab"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="40dp"
            android:layout_marginLeft="40dp"
            app:tabGravity="fill"
            app:tabIndicatorHeight="2dp"
            app:tabTextColor="@color/tabText"
            app:tabSelectedTextColor="@color/tabText"
            app:tabIndicatorColor="@color/tab_buttom"
            app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>
        <ImageButton
            android:id="@+id/ib_camera"
            android:layout_width="25dp"
            android:layout_height="20dp"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:background="@mipmap/camera"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_gravity="center_vertical|right"
            />
    </FrameLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white"
        android:paddingBottom="15dp"/>

</LinearLayout>

注意点：
1。要实现文字和底部标签indicator分离需要设定

app:tabGravity="fill"

2。设置底部indicator的高度和颜色

 app:tabIndicatorHeight="2dp"
     app:tabIndicatorColor="@color/tab_buttom"

3。设置tab文字样式

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
     在style中
     <!-- tablayout的字体和颜色 -->
    <style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">@color/tabText</item>
    </style>

效果

Activity准备实现
1。FragmentPagerAdapter用来给viewpager指定适配器

package com.wj.shoes.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * for: viewpager的适配器
 * Created by wangjian on 2017/8/3.
 */

public class SocialViewpagerAdapter extends FragmentPagerAdapter{

    private List<Fragment> list;
    private String[] titles = new String[]{"话题", "热点", "关注"};

    public SocialViewpagerAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.list = list;
    }
    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }

    //重写这个方法，将设置每个Tab的标题，避免tab中文字不显示
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

2。根据tab个数的Fragment
自己定义几个Fragment
3。将tab与viewpager关联

    private List<Fragment> list = new ArrayList<>();
    private SocialViewpagerAdapter adapter;
    //数据源
    list.add(new TopicFragment());
    list.add(new HotFragment());
    list.add(new AttentionFragment());

    //适配器
    FragmentManager fm = getSupportFragmentManager();
    adapter = new SocialViewpagerAdapter(fm,list);
    viewpager.setAdapter(adapter);

    tabLayout.setupWithViewPager(viewpager);
    //默认选中
    tabLayout.getTabAt(1).select();

4。设置tab的indicator宽度

方法

package com.wj.shoes.widget;

import android.content.res.Resources;
import android.support.design.widget.TabLayout;
import android.util.TypedValue;
import android.view.View;
import android.widget.LinearLayout;

import java.lang.reflect.Field;

/**
 * for: 设置tablayout的指示器长度
 * Created by wangjian on 2017/8/3.
 */

public class TablayoutIndicator {
    public void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
        Class<?> tabLayout = tabs.getClass();
        Field tabStrip = null;
        try {
            tabStrip = tabLayout.getDeclaredField("mTabStrip");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }

        tabStrip.setAccessible(true);
        LinearLayout llTab = null;
        try {
            llTab = (LinearLayout) tabStrip.get(tabs);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

        int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
        int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());

        for (int i = 0; i < llTab.getChildCount(); i++) {
            View child = llTab.getChildAt(i);
            child.setPadding(0, 0, 0, 0);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
            params.leftMargin = left;
            params.rightMargin = right;
            child.setLayoutParams(params);
            child.invalidate();
        }
    }

}

使用

@Override
    public void onStart() {
        super.onStart();
        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                /**
                 * 在tablayout渲染之后设置tablayout的指示器长度
                 * tab left right
                 */
                new TablayoutIndicator().setIndicator(tabLayout, 20, 20);

            }
        });
    }