Android TabLayout 实战

1.效果图

2.原理：TabLayout提供了一个水平的布局用来展示Tabs

3.（探讨一：有的博文说要添加依赖： compile ‘com.android.support:design:25.3.1‘           

　　　　   可是本人未添加此依赖 ，依然可以运行无误）

　　布局文件：

<android.support.design.widget.TabLayout

android:id="@+id/tablayout"

android:layout_width="match_parent"

android:layout_height="30dp"

app:tabIndicatorHeight="2dp"  // 设置便签下划线的高度（厚度）      不设置的话，默认大小就可以

app:tabIndicatorColor="#007aff" // 设置标签下划线的颜色

app:tabSelectedTextColor="#007aff" // 设置选中标签的字体的颜色

app:tabTextColor="@android:color/darker_gray" /> //设置未选中标签的字体的颜色

<android.support.v4.view.ViewPager

android:id="@+id/vpager"

　　　　　　android:layout_width="match_parent"

　　　　android:layout_height="200dp" />

控制器部分代码：

（一）

class TabAdapter extends FragmentPagerAdapter {

    public TabAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
    //显示标签上的文字
    @Override
    public CharSequence getPageTitle(int position) {
        return tabs.get(position);
    }
}

（二）

public static class TabFrament extends Fragment {
        private Context context;
        private String content;

        public TabFrament() {
        }

        @SuppressLint("ValidFragment")
        public TabFrament(Context contexts, String content) {
            this.context = contexts;
            this.content = content;
        }

        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
             TextView textView = new TextView(context);   //此处用Textview举个例子，可以布置任意布局，自定义布局，用View view = inflater.inflate(）方法

             textView.setText(content);
             textView.setTextSize(30);
             textView.setGravity(Gravity.CENTER);
             return textView;

        }
    }

（三）

  private void initData() {

    for(Map<String,String> map:list) {      // 从服务器获取的数据，已经处理成list
        tabs.add(map.get("tab"));　　　　　　　// tab标签　
        fragments.add(new TabFrament(this,map.get("content"))); //viewpage 内容
    }
    tabLayout = (TabLayout) findViewById(R.id.tablayout);

    //设置TabLayout的模式
    tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);   //注：此条属性必须配合MODE_FIXED使用，不然不起作用
　　//  GRAVITY_FILL  让每个标签平分TabLayout的全部宽度

    //  GRAVITY_CENTER  让每个标签显示自身宽度，然后所有标签居中显示

    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
// MODE_FIXED  表示宽度始终是tablayout控件指定的宽度，如果标签过多，那么就无限挤压控件  
// MODE_SCROLLABLE 表示每个标签都保持自身宽度，一旦标签过多，给标题栏提供支持横向滑动的功能

    TabAdapter tabadapter=new TabAdapter(getSupportFragmentManager());
    vpager.setAdapter(tabadapter);

    //关联ViewPager和TabLayout
    tabLayout.setupWithViewPager(vpager);

        //设置分割线     标签之间的纵向分割线
        LinearLayout linear = (LinearLayout)tabLayout.getChildAt(0);
        linear.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        linear.setDividerDrawable(ContextCompat.getDrawable(this,R.drawable.divider));
        //设置分割线间隔
        linear.setDividerPadding(dip2px(15));

}
　　

　　　　　　　　　　（四）
 public int dip2px(int dip) {
        float density = getResources().getDisplayMetrics().density;
        return (int) (dip * density + 0.5);
    }