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当成独立的页面就好了。