Tabs¶
摘自 google material design 文档
Tabs 让不同视图或功能之间的浏览切换和浏览分类数据集合变得很容易。
如何添加?¶
I. 在你的 build.gradle
里添加最新版本的 design
和 appcompat
库。
dependencies { compile 'com.android.support:appcompat-v7:X.X.X' compile 'com.android.support:design:X.X.X' compile 'com.android.support:support-v13:X.X.X' // where X.X.X version // if you want to support android sdk < 13 // you need to add support library v4 instead of v13 }
II. 让你的 Activity 继承自 android.support.v7.app.AppCompatActivity
。
public class MainActivity extends AppCompatActivity { ... }
III. 在你的 layout.xml
文件里声明 TabLayout
和 ViewPager
。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
IV. 将 TabLayout
和 ViewPager
组合起来。
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager); //set adapter to your ViewPager viewPager.setAdapter(new TabPagerAdapter(getFragmentManager())); TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout); tabLayout.setupWithViewPager(viewPager);
V. 在 ViewPager 的 adapter 里重写 getPageTitle
方法,并返回 tab 标题。
@Override public CharSequence getPageTitle(int position) { switch (position) { case ITEM_ONE: return "Item One"; ... } }
如何设置样式?¶
I. 在你的 styles.xml
里声明自定义样式。
<style name="TabLayoutStyle" parent="Widget.Design.TabLayout"> <item name="tabMaxWidth">@dimen/tab_max_width</item> <item name="tabIndicatorColor">@color/pink</item> <item name="tabIndicatorHeight">2dp</item> <item name="tabPaddingStart">8dp</item> <item name="tabPaddingEnd">8dp</item> <item name="tabBackground">?attr/selectableItemBackground</item> <item name="tabTextAppearance">@style/TabTextAppearance</item> <item name="tabSelectedTextColor">@android:color/white</item> </style> <style name="TabTextAppearance" parent="TextAppearance.Design.Tab"> <item name="android:textSize">14sp</item> <item name="android:textColor">@color/color_white_semitransparent</item> <item name="textAllCaps">true</item> </style>
II. 设置你的 TabLayout
的 style
属性为上面声明的样式。
<android.support.design.widget.TabLayout style="@style/TabLayoutStyle" android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content"/>
Tabs with icons and text¶
I. 在 ViewPager 的 adapter 里重写 getPageTitle
方法,并返回 tab 标题。
@Override public CharSequence getPageTitle(int position) { switch (position) { case ITEM_ONE: return "Item One"; ... } }
II. 为每一个 tab 图标创建一个选择器。
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/ic_call_selected" /> <item android:state_selected="false" android:drawable="@drawable/ic_call_unselected" /> </selector>
III. 使用 TabLayout.Tab
的 setIcon
方法改变 tab 的图标,你可以使用 TabLayout
的 getTabAt
方法,并传入 tab 的索引,来获取 TabLayout.Tab
对象。
... //after initialization TabLayout and ViewPager TabLayout.Tab tabCall = tabLayout.getTabAt(ITEM_CALL); tabCall.setIcon(R.drawable.selector_call); //repeat this code for all your tabs ...
Tabs with icons only¶
I. 为每一个 tab 图标创建一个选择器。
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/ic_call_selected" /> <item android:state_selected="false" android:drawable="@drawable/ic_call_unselected" /> </selector>
II. 使用 TabLayout.Tab
的 setIcon
方法改变 tab 的图标,你可以使用 TabLayout
的 getTabAt
方法,并传入 tab 的索引,来获取 TabLayout.Tab
对象。
... //after initialization TabLayout and ViewPager TabLayout.Tab tabCall = tabLayout.getTabAt(ITEM_CALL); tabCall.setIcon(R.drawable.selector_call); //repeat this code for all your tabs ...
Scrollable Tabs¶
要让你的 TabLayout
支持滚动,需要添加 custom:tabMode
属性,并设置其值为 scrollable
。
<android.support.design.widget.TabLayout xmlns:custom="http://schemas.android.com/apk/res-auto" android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" custom:tabMode="scrollable" />
Centered tabs¶
创建位置居中的 tabs 需要添加 custom:tabGravity
属性,并设置其值为 center
。
<android.support.design.widget.TabLayout xmlns:custom="http://schemas.android.com/apk/res-auto" android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" custom:tabGravity="center" />
翻译水平有限,欢迎批评指正
原文作者: Volodymyr Yatsykiv 原文链接: Tabs