标签:
Google I/O 2015 推出的 Android Design Support Library令人非常激动。Material Design的推出确实振奋了不少 Android开发者以及用户的心。以前Google给我的感觉就像是他并没太在乎他们的UI(或者审美不同,Gmail不忍吐槽),但是当Material Design伴随Android5.0发布之后,一切好像就都变了个样,Google好像意识到了设计的重要性以及自己以往的种种不足,决定也要迎头赶上,不仅仅只是推出一套Material Design的语言同时也推出了很多新的控件,接下来我们就来学习下 AndroidDesign Support Library库下的所有新的控件,首先从android.support.design.widget.TabLayout开始。
TabLayout,滑动指示选项卡,继承自HorizontalScrollView(注:与TableLayout毫无关系),提供了一个水平的可滚动布局来展示Tabs。所以有了它我们就不必在去自己定义实现类似ActionBar的Tab栏了(TabLayout provides a horizontal layout to display tabs)与以前早期TabHost不同TabLayout兼容性更强、使用更简单并且效果更好,还自带小滑块的动画效果。如果熟悉Github里的TabPageIndicator,他们的原理大同小异。在开发中结合ViewPager和Fragment使用,我们就可以快速搭建一个Tabs切换的主界面,类似微信、知乎、网易新闻、新浪等等。
TabLayout除了Android控件常有的属性(以android:为命名空间)之外,还定义了些独有的属性(是以”app:”的命名空间的,形如app:tabMode),这里只列出部分属性和部分方法(getter、setter和属性是一一对应的)。
属性 | 说明 |
---|---|
app:tabMode | tab布局模式,取值常量,fixed,scrollable,默认fixed:标签很多时候会被挤压,不能滑动。 |
app:tabSelectedTextColor | 选中时字体的颜色 |
app:tabTextColor | 未选中时字体的颜色 |
app:tabIndicatorColor | sliding的颜色 |
app:tabBackground | 整个Tab布局的背景 |
app:tabTextAppearance | Tab上的标题文字大小 |
app:tabIndicatorHeight | Sliding的高度 |
app:tabPadding | Tab里内容的内边距 |
app:paddingEnd | 整个TabLayout的内边距 |
app:tabGravity | Tab里内容的布局,center,fill |
app:tabMaxWidth | Tab的最大宽度 |
app:tabContentStart | TabLayout的外边距 |
方法 | 说明 |
TabLayout(Context context) | 构造方法,我们可以通过构造方法来获取TabLayout对象 |
TabLayout(Context context, AttributeSet attrs) | |
TabLayout(Context context, AttributeSet attrs,int defStyleAttr) | |
Tab newTab() | 构造一个Tab对象即TabLayout里盛放的二级容器 |
int getTabCount() | 获取Tab的数量 |
Tab getTabAt(int index) | 根据Tab的索引值获取对应的Tab,当我们初始化时系统会自动为我们的Tab添加index值,从0开始依次增加1 |
int getSelectedTabPosition() | 获取当前选中的Tab的index,为空则返回-1 |
void addTab(@NonNull Tab tab) | 添加Tab至TabLayout(也可以添加至指定index处,, addTab(@NonNull Tab tab,int position) |
void removeTab(Tab tab) | 移除指定Tab(也可通过removeTabAt(int position)) |
void removeAllTabs() | 移除所有Tabs |
void setupWithViewPager(@NonNull ViewPager viewPager) | 设置与ViewPager关联起来,注:不允许传递空的ViewPager,否则会异常 |
void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter) | 设置TabLayout的适配器,注:不允许传递空的PagerAdapter,否则会异常 |
OnTabSelectedListener | Tab事件回调接口,包含onTabSelected,onTabUnselected,onTabReselected回调方法 |
void setOnTabSelectedListener(OnTabSelectedListener onTabSelectedListener) | 设置Tab选中时的监听、未由选中变成未选中到释放的监听 |
构造TabLayout对象和其他控件一样,欲使用先得到对象,也是有两种方式:代码和xml布局。
<!--注意一下tabMode这些属性的前缀app:,为什么呢?因为xmlns:app="http://schemas.android.com/apk/res-auto"-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/id_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="center"
/>
</LinearLayout>
TabLayout tabLayout=new TabLayout(MainActivity.this);
然后设置其一系列属性
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setBackgroundColor(Color.parseColor("#2b2b2b"));
tabLayout.setSelectedTabIndicatorHeight(4);
tabLayout.setTabTextColors(Color.parseColor("#236f28"), Color.parseColor("#bc6e1c"));
记住,TabLayout其本质上一个ViewGroup,只是一个容器用于存放其他View的,这里我们存放的View是Tab,所以我们得把Tab添加到TabLayout里
tabLayout.addTab(tabLayout.newTab().setText("Tab1").setIcon(android.R.drawable.ic_menu_search));
tabLayout.addTab(tabLayout.newTab().setText("Tab2").setIcon(android.R.drawable.ic_menu_agenda));
tabLayout.addTab(tabLayout.newTab().setText("Tab3").setIcon(android.R.drawable.ic_menu_camera));
最后,虽然我们已经把Tab添加到TabLayout了,但是归根结底TabLayout也是一个ViewGroup,所以还需要设置到当前的布局里才能显示。
mFrameLayout.addView(tabLayout);
至此,相信大家应该学会使用这个全新的空间里了吧,下一篇再结合ViewPager+Fragment的主流架构讲解下应用的注意事项和常见错误的解决。
Android进阶——Material Design新控件之初识TabLayout(一)
标签:
原文地址:http://blog.csdn.net/crazymo_/article/details/52022389