TabLayout——浅谈
来源:互联网 发布:qe 知乎 编辑:程序博客网 时间:2024/06/10 01:21
TabLayout——浅谈
TabLayout是Google新推出(其实好久了。。。)的一个组件,在android5.0的之后的应用中被广泛应用,最近做的一个项目当中也使用到,所以抽空花点时间,整理总结一番。
TabLayout是什么?
TabLayout是一个用来横向显示Tab组件的布局。用来显示Tab组件非常方便,是Android应用中使用最广泛的布局组件之一。
TabLayout的基本用法
首先引入TabLayout的库,项目是基于Android Studio的,所以引入库是十分方便的,在应用的build.gradle文件中加入这一句,其中后面的版本号跟自己的 compileSdkVersion保持一致就好:
dependencies { …… compile 'com.android.support:design:23.2.0'}
java调用代码如下:
TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
xml布局举例:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tablayout" android:isScrollContainer="true" app:tabMinWidth="100dp" app:tabIndicatorColor="@android:color/holo_red_light" app:tabSelectedTextColor="@android:color/holo_blue_light" app:tabTextColor="@android:color/black" > </android.support.design.widget.TabLayout></LinearLayout>
显示效果(这里是用平板模拟器做演示):
TabLayout与ViewPager结合使用
TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果,因此用来做导航页,是十分方便的,使用时需要注意的一个地方如下:
mTabLayout.addTab(mTabLayout.newTab().setText(R.string.DTV)); mTabLayout.addTab(mTabLayout.newTab().setText(R.string.broadband_pay)); mVPBody = (ViewPager)findViewById(R.id.vp_search_body); dvbSearchFragment = new DVBSearchFragment(); brandSearchFragment = new BrandSearchFragment(); listSearch = new ArrayList<>(); listSearch.add(dvbSearchFragment); listSearch.add(brandSearchFragment); adapter = new SearchBodyAdapter(getSupportFragmentManager(),listSearch); mVPBody.setAdapter(adapter); mTabLayout.setupWithViewPager(mVPBody); //tablayout 与ViewPager关联 //必须在后面重新为Tab设置value mTabLayout.getTabAt(0).setText(R.string.DTV); mTabLayout.getTabAt(1).setText(R.string.broadband_pay);
从上述代码中可以清楚的看到,我们在调用TabLayout的setupWithViewPager()
方法后需要再次为已添加的Tab赋值,否则之前的tab的value就会消失。(直接拿一个小项目的配图看了)效果如下:
而正确的效果应该如下:
- TabLayout中Tab字体大小修改
修改TabLayout中Tab字体大小需要通过定义Style的方式来完成,然后将值赋给TabLayout,代码如下:
首先定义style:
<style name="tablayout_textstyle"> <item name="android:textSize">@dimen/text_size_title</item> </style>
其次讲style赋给TabLayout,代码如下:
<android.support.design.widget.TabLayout android:background="#EBEEF3" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tablayout" android:isScrollContainer="true" <!--tab的最小宽度--> app:tabMinWidth="100dp" <!--indicator的颜色--> app:tabIndicatorColor="@android:color/holo_blue_dark" <!--选中时的字体颜色--> app:tabSelectedTextColor="@android:color/holo_blue_dark" <!--未选中时的字体颜色--> app:tabTextColor="@android:color/black" <!--字体风格--> app:tabTextAppearance="@style/tablayout_textstyle" > </android.support.design.widget.TabLayout>
- TabLayout中Tab背景修改
修改背景的方法比较简单,直接使用如下代码,:
app:tabBackground="@drawable/tab_selector"
如果不需要变换颜色,可以直接使用一种颜色, 但是通常我们会分为选中和未选中两种状态为不同的颜色,因此需要使用state-select文件来做,样例代码如下:
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/tab_select" android:state_selected="true" /> <item android:drawable="@color/tab_normal" /></selector>
需要注意的是,写select文件,要把normal-state放在最后。
以上就是我对TabLayout的一些基本认识以及在实际项目当中遇到的一些问题,分享与此,与君共勉!
三日不读书,便觉语言无味,面目可憎;
三天不动笔,必会思维迟钝,头脑发空;
- TabLayout——浅谈
- TabLayout——浅谈
- 浅谈TabLayout(ViewPager+Tab联动)
- 浅谈design的tablayout基本使用
- Android——TabLayout实现选项卡
- Material Design —— TabLayout学习笔记
- 个人笔记—TabLayout使用详解
- TabLayout
- tablayout
- Tablayout
- TabLayout
- TabLayout
- TabLayout
- TabLayout
- TabLayout
- TabLayout
- TabLayout
- tablayout
- 如何使用百度地图API自动获取地址和经纬度
- Unreal Engine 4 —— HairStrandPlugin开发日志
- python scrapy安装
- Android Mvp实践
- android音频hal层简介
- TabLayout——浅谈
- [深入理解Android卷二 全文-第一章]开发环境部署
- java基础部分
- Android之ClipDrawable资源简单使用
- 剑指offer-位运算
- Shortest Prefixes
- 修改SSH的端口
- urllib2使用总结
- [深入理解Android卷一全文-第十章]深入理解MediaScanner