首页 > 学院 > 开发设计 > 正文

Design库中的TabLayout的使用

2019-11-09 16:57:40
字体:
来源:转载
供稿:网友

对于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
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表