对于TabLayout谷歌文档给出的说明是 :“TabLayout PRovides a horizontal layout to display tabs.”提供一个水平的布局用来展示tabs,相比于5.0之前的指示器,这次的TabLayout的颜值可以秒杀一切,也就可以不用自定,或者使用第三方自定的指示器了。
下面看一下TabLayout配合ViewPager的运行效果:
下面记录一下简单的使用过程:
总体效果的实现是TabLayout+ViewPager+Fragment:
布局文件:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.studytablayout.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:tabIndicatorColor="@color/colorAccent" app:tabSelectedTextColor="@color/colorYellow" app:tabTextColor="@color/colorWhite" app:tabPadding="10dp" app:tabGravity="fill" app:tabMode="fixed" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager></LinearLayout>MainActivity:
public class MainActivity extends AppCompatActivity { String[] mTabTitle = {"第一页", "第二页", "第三页"}; private TabLayout mTabLayout; private ViewPager mViewPager; private ArrayList<Fragment> mFragmentLists; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); InitUI(); InitData(); MyFragmentPagerAdapter myAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager()); mViewPager.setAdapter(myAdapter); /** * 将ViewPager与TabLayout绑定 */ mTabLayout.setupWithViewPager(mViewPager); /** * 设置Tabs的点击监听 */ mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { Toast.makeText(MainActivity.this, tab.getText()+"被选中",Toast.LENGTH_SHORT).show(); } @Override public void onTabUnselected(TabLayout.Tab tab) { Toast.makeText(MainActivity.this, tab.getText()+"没被选中",Toast.LENGTH_SHORT).show(); } @Override public void onTabReselected(TabLayout.Tab tab) { Toast.makeText(MainActivity.this, tab.getText()+"再一次被选中",Toast.LENGTH_SHORT).show(); } }); } private void InitData() { mFragmentLists = new ArrayList<Fragment>(); for (int i = 0; i <= 2; i++) { mFragmentLists.add(new ViewPagerFragment()); } } private void InitUI() { mTabLayout = (TabLayout) findViewById(R.id.tabLayout); mViewPager = (ViewPager) findViewById(R.id.viewPager); } class MyFragmentPagerAdapter extends FragmentPagerAdapter { public MyFragmentPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return mFragmentLists.get(position); } @Override public int getCount() { return mFragmentLists.size(); } @Override public CharSequence getPageTitle(int position) { return mTabTitle[position]; } }}Fragment的代码比较简单此处省略。
下面记录一下TabLayout的一些常用的属性和方法以供日后查阅:
设置TabLayout的背景颜色:
android:background="@color/colorPrimary"设置指示器的颜色
app:tabIndicatorColor="@color/colorAccent"设置指示器的高度:
app:tabIndicatorHeight="5dp"设置tab中文字选中的颜色
app:tabSelectedTextColor="@color/colorYellow"设置tab中文字的颜色:
app:tabTextColor="@color/colorWhite"设置tab中字体的大小:
//设置文字风格app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"设置tab的模式:
//可滑动app:tabMode="scrollable"默认是fixed,不能滑动,如果tab过多就会被挤压在当前可见的TabLayout中。
设置Tab的Gravity:
app:tabGravity="fill"//fill表示尽可能的填充//center表示居中一般GRAVITY_FILL需要和MODE_FIXED一起使用才有效果
设置TabLayout的监听事件:
mTabLayout.setOnTabSelectedListener新闻热点
疑难解答