Android Design Support Library之TabLayout
2015-08-28 04:25
453 查看
Google在今年的IO大会上发布了新的support library,用于设计出MD风格的相关的控件。可以兼容android 2.1以上设备。如果使用的Android studio需要在build.gradle文件中添加
今天将要介绍其中的TabLayout(android.support.design.widget.TabLayout 选项卡)。
TabLayout 既可以实现固定的选项卡,其每个tab宽度平均分配,也可实现可滚动的选项卡,tab宽度不固定同时可以横向滚动。并且可以方便的ViewPager+fragment结合使用实现 tab之间横向切换,可以直接从PagerAdapter的getPageTitle() 中创建选项卡,然后使用setupWithViewPager()将其联系在一起。它可以使tab的选中事件能更新ViewPager,同时 ViewPager 的页面改变能更新tab的选中状态。如下图:
现在先来看看TabLayout有哪一些常用的方法:
addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中
addTab(TabLayout.Tab tab, boolean setSelected) 同上
addTab(TabLayout.Tab tab) 同上
getTabAt(int index) 得到index选项卡
getTabCount() 得到选项卡的总个数
getTabGravity() 得到 tab 的 Gravity
getTabMode() 得到 tab 的模式
getTabTextColors() 得到 tab 中文本的颜色
newTab() 新建个 tab
removeAllTabs() 移除所有的 tab
removeTab(TabLayout.Tab tab) 移除指定的 tab
removeTabAt(int position) 移除指定位置的 tab
setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器,稍候会讲解其回调方法
setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置
setTabGravity(int gravity) 设置 Gravity(fill填充,center居中)
setTabMode(int mode) 设置 Mode(设置可否滑动,scrollable可滑动)
setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色
setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色 默认 选中
setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter
setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动
接下来看看其具体使用:
首先在xml中可以做如下设置:
设置选中下滑线颜色,当然还有其他属性可以设置,下去自己可以尝试尝试。
注意记得添加:
在java代码中:
这样就可以显示出来了。还是比较简单的。
接下来就要给TabLayout设置监听:
三个回调,从字面就可以知道分别是选中,失去选中,点击已经选中tab时回调。自己调试一下就可以知道怎么执行。
我们通常滑动布局都会和ViewPager配合起来使用:
我们在上边布局加上Viewpager:
需要将Viewpager和TabLayout关联起来:
其中fragments是fragment的集合,titles是需要显示的title。这样就将Viewpager和Fragment结合起来了。可以实现联动。
TabFragmentPagerAdapter代码如下:
compile 'com.android.support:design:22.2.0'
今天将要介绍其中的TabLayout(android.support.design.widget.TabLayout 选项卡)。
TabLayout 既可以实现固定的选项卡,其每个tab宽度平均分配,也可实现可滚动的选项卡,tab宽度不固定同时可以横向滚动。并且可以方便的ViewPager+fragment结合使用实现 tab之间横向切换,可以直接从PagerAdapter的getPageTitle() 中创建选项卡,然后使用setupWithViewPager()将其联系在一起。它可以使tab的选中事件能更新ViewPager,同时 ViewPager 的页面改变能更新tab的选中状态。如下图:
现在先来看看TabLayout有哪一些常用的方法:
addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中
addTab(TabLayout.Tab tab, boolean setSelected) 同上
addTab(TabLayout.Tab tab) 同上
getTabAt(int index) 得到index选项卡
getTabCount() 得到选项卡的总个数
getTabGravity() 得到 tab 的 Gravity
getTabMode() 得到 tab 的模式
getTabTextColors() 得到 tab 中文本的颜色
newTab() 新建个 tab
removeAllTabs() 移除所有的 tab
removeTab(TabLayout.Tab tab) 移除指定的 tab
removeTabAt(int position) 移除指定位置的 tab
setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器,稍候会讲解其回调方法
setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置
setTabGravity(int gravity) 设置 Gravity(fill填充,center居中)
setTabMode(int mode) 设置 Mode(设置可否滑动,scrollable可滑动)
setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色
setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色 默认 选中
setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter
setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动
接下来看看其具体使用:
首先在xml中可以做如下设置:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" app:tabSelectedTextColor="@color/title_red" app:tabIndicatorColor="@color/title_red" app:tabTextColor="@color/black" app:tabGravity="fill"> </android.support.design.widget.TabLayout> </RelativeLayout>
app:tabIndicatorColor="@color/title_red"
设置选中下滑线颜色,当然还有其他属性可以设置,下去自己可以尝试尝试。
注意记得添加:
xmlns:app="http://schemas.android.com/apk/res-auto"
在java代码中:
public void initTabLayout(){ String[] catesTag={"衣","食","住","行","用","玩","学"}; if(lists==null){ return; } for (int i=0;lists.size()>i;i++){ if(i==0){ //初始化创建tabs。true表示默认选中该tab mTabLayout.addTab(prosClasses.newTab().setText(catesTag[0]),true); }else { //false默认不选中 mTabLayout.addTab(prosClasses.newTab().setText(catesTag[i]),false); } } //设置TabLayout模式可以用 //mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //默认是不可滑动的 }
这样就可以显示出来了。还是比较简单的。
接下来就要给TabLayout设置监听:
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { //选中触发 } @Override public void onTabUnselected(TabLayout.Tab tab) { //失去选中触发 } @Override public void onTabReselected(TabLayout.Tab tab) { //连续点击触发 } });
三个回调,从字面就可以知道分别是选中,失去选中,点击已经选中tab时回调。自己调试一下就可以知道怎么执行。
我们通常滑动布局都会和ViewPager配合起来使用:
我们在上边布局加上Viewpager:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" app:tabSelectedTextColor="@color/title_red" app:tabIndicatorColor="@color/title_red" app:tabTextColor="@color/black" app:tabGravity="fill"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_below="@+id/tabs" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
需要将Viewpager和TabLayout关联起来:
mTabLayout = (TabLayout) findViewById(R.id.tablayout); mTabLayout.setTabTextColors(Color.Red, Color.Black);//设置文本在选中和为选中时候的颜色 vp = (ViewPager) findViewById(R.id.vp); TabFragmentPagerAdapter adapter=new TabFragmentPagerAdapter( getSupportFragmentManager(),fragments,titles); mViewPager.setAdapter(adapter); mTabLayout.setupWithViewPager(mViewPager); mTabLayout.setTabsFromPagerAdapter(adapter);
其中fragments是fragment的集合,titles是需要显示的title。这样就将Viewpager和Fragment结合起来了。可以实现联动。
TabFragmentPagerAdapter代码如下:
import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import android.support.v4.view.ViewPager; import java.util.List; public class TabFragmentPagerAdapter extends FragmentStatePagerAdapter{ private List<Fragment>fragments; private List<String>titles; public TabFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragments, List<String> titles) { super(fm); this.fragments=fragments; this.titles=titles; } @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public int getCount() { return fragments.size(); } @Override public CharSequence getPageTitle(int position) { return titles.get(position); } } TabLayout用起来还是比较容易的,虽然类似的效果可以用其他方式实现,但是毕竟是Google官方的库,还是了解一下。
相关文章推荐
- 使用uiautomator的python封装进行android的UI测试
- Qt On Android开发环境安装、配置
- GitHub优秀的 Android 开源项目整理-经典版
- Android之发送短信和接收验证码
- Android 数据库SQLite的操作总结
- android---Intent.Action大全
- Android屏幕适配全攻略(最权威的官方适配指导)
- Android开发入门问题集
- android开发技巧——仿新版QQ锁屏下弹窗
- image button on android
- android不同应用程序之间启动Activity
- Android 界面滑动卡顿分析与解决方案(入门)
- android全局处理非捕捉异常
- Volley的unit test
- android读写sd卡文件
- android开机启动activity或service
- 删除android项目多余的资源
- android google map研究
- 第一个Android程序
- Android Studio内存优化