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

AndroidStudio添加gradle依赖

//TabLayoutcompile 'com.android.support:support-v4:26.+'compile 'com.android.support:design:26.0.0-alpha1'//ViewPageandroid.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);            }        });    }