TabLayout 解析

2019-11-10 18:14:40

字体：大中小

来源：转载

供稿：网友

1. 简介

我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合，达到很漂亮的效果。

但是TabPageIndicator是第三方的，而且比较老了，当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求

在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2

这里写图片描述

2. 使用指南与Demo

2.1 添加依赖

compile 'com.android.support:design:24.2.0'

2.2 xml

2.3 定义和创建Fragment

public class MyTabFragment extends Fragment { //标题 PRivate final String title; //内容 private final String content; /** * 得到内容 * @return */ public String getContent() { return content; } /** * 得到标题 * @return */ public String getTitle() { return title; } Context mContext; TextView textView; public MyTabFragment(String title, String content){ super(); this.title = title; this.content = content; } @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); //上下文 mContext = getContext(); } /** * 创建视图 * @param inflater * @param container * @param savedInstanceState * @return */ @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { textView = new TextView(mContext); textView.setTextColor(Color.RED); textView.setTextSize(25); textView.setGravity(Gravity.CENTER); return textView; } /** * 绑定数据，传过来的数据，在构造方法中 * @param savedInstanceState */ @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); //设置内容 textView.setText(content); }}

2.4 设置 ViewPager 适配器

public class ViewPagerAdapter extends FragmentPagerAdapter { private final ArrayList<MyTabFragment> fragments; public ViewPagerAdapter(FragmentManager fm, ArrayList<MyTabFragment> fragments) { super(fm); this.fragments = fragments; } /** * 根据位置返回对应的Fragment * @param position * @return */ @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public int getCount() { return fragments.size(); } /** * 得到页面的标题 * @param position * @return */ @Override public CharSequence getPageTitle(int position) { return fragments.get(position).getTitle(); }}

2.5 设置 TabLayout

//布局设置<android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/holo_blue_bright" app:tabIndicatorColor="@android:color/holo_red_dark" app:tabSelectedTextColor="@android:color/holo_red_dark" app:tabTextColor="@android:color/white" />//代码//设置TabLayouttabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);tabLayout.setupWithViewPager(viewpager);//public class TabLayoutMainActivity extends AppCompatActivity { ViewPager viewPager; TextView tv_title; TabLayout tabLayout; ArrayList<MyTabFragment> fragments; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout_main); viewPager = (ViewPager) findViewById(R.id.viewPager); tv_title = (TextView) findViewById(R.id.tv_title); tabLayout = (TabLayout) findViewById(R.id.tabLayout); tv_title.setText("TabLayout的使用"); //初始化数据 fragments = new ArrayList<>(); for (int i=0;i<12;i++){ fragments.add(new MyTabFragment("标题 "+i,"内容 "+i)); } viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),fragments)); //关联ViewPager tabLayout.setupWithViewPager(viewPager); //设置固定的// tabLayout.setTabMode(TabLayout.MODE_FIXED); tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); }}