Android TabLayout 实战

Posted 2020-10-27 程序猿的猫

1.效果图

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

3.添加依赖： compile \'com.android.support:design:27.+ ‘

　　4.布局文件：

 

<android.support.design.widget.TabLayout

android:id="@+id/tablayout"

android:layout_width="match_parent"

android:layout_height="30dp"

app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"   // 设置标签的字体大小  在style文件里进行设置

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

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" />

 

5.控制器部分代码：

（一）

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);
 
    vpager.setOffscreenPageLimit(3);  　// 设置viewpager缓存页面个数，建议：有 n 个tab就缓存 n-1 个页面

  　//关联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);
 }

6.实践感悟

（1） ViewPager 的含义是单独的一个页面，如果要设置此页面滚动的话，不可在ViewPager的外部而应该在子布局的外围设置srollview；把每一个ViewPager当成独立的页面就好了。