Design庫中的TabLayout的使用

2019-11-09 15:44:21

字體：大中小

來源：轉載

供稿：網友

對于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"