TabLayout+ViewPager实现tab切换
声明:
此文章主要来自:TabLayout+ViewPager轻松搞定Tab栏切换 ,原作者写的很详细。但是为了加深印象,以及对其中的部分现象进行更好的演示,特此重新写一遍。
前言:
在项目开发中很多场景都会碰到tab栏切换的效果,实现的思路也有很多种,tabhost+fragment和
radionbtton+viewpager等方式都可以实现,其中关于“RadionButton+ViewPager”的实现方式可参考我的另一篇文章:ViewPager+Fragment实现底部导航栏(左右滑动/点击切换),今天这里主要介绍下tablayout+viewpager的实现方式;tablayout是android5.0推出来的一个MaterialDesign风格的控件,是专门用来实现tab栏效果的;功能强大,使用方便灵活;
1、引入依赖库
compile 'com.android.support:design:25.3.1'
compile 'com.android.support:support-v4:25.3.1'
2、xml布局文件中使用
<?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.mdtablayout.MainActivity"><!-- tabIndicatorColor:指示器颜色--><!-- tabTextColor: tab栏字体颜色--><!-- tabSelectedTextColor:tab栏字体被选颜色--><android.support.design.widget.TabLayoutandroid:id="@+id/tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorColor="@color/colorAccent"app:tabTextColor="@android:color/black"app:tabSelectedTextColor="@color/colorAccent"app:tabMode="scrollable"app:tabGravity="fill"app:tabBackground="@android:color/holo_orange_dark"/><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent"/>
</LinearLayout>
tablayout提供了很多的属性可以设置:
app:tabIndicatorColor 指示器颜色
app:tabTextColor tab栏字体颜色
app:tabSelectedTextColor tab栏字体被选颜色
app:tabIndicatorHeight 指示器高度
app:tabBackground tab背景颜色
app:tabMaxWidth tab栏最大宽度
app:tabTextAppearance tab栏字体样式
app:tabMinWidth tab栏最小
......
大家在使用的过程中,可以尝试更改下相关属性,看看效果。
还是那句话:凡是能够在xml中设置的属性,都可以在java代码进行设置;
需要注意这两个属性:
app:tabMode="";有scrollable和fixed两个属性值
scrollable:可滑动;
fixed:不能滑动,平分tabLayout宽度;app:tabGravity="";有center和fill两个属性值
fill:tabs平均填充整个宽度;
center:tab居中显示;
有什么区别待会告诉你。
3、设置tablayout和viewpager,并将tablayout和viewpager进行关联
在设置tablayout和viewpager,并将tablayout和viewpager进行关联有两中方式可以实现:
方式一:
3.1、TabLayout和Viewpager关联
TabAdapter tabAdapter = new TabAdapter(getSupportFragmentManager());//1.TabLayout和Viewpager关联tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {Log.i(TAG, "onTabSelected: 000");//tab被选中的时候回调viewpager.setCurrentItem(tab.getPosition(), true);}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {//tab未被选择的时候回调Log.i(TAG, "onTabUnselected: 111");}@Overridepublic void onTabReselected(TabLayout.Tab tab) {//tab重新选择的时候回调Log.i(TAG, "onTabReselected: 222");}});
3.2、ViewPager滑动关联tabLayout
//2.ViewPager滑动关联tabLayout,如果不设置的话,当tab超出屏幕宽度时候,从右向左滑动,tab不会自动向左滚动viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
3.3、设置tabLayout的标签来自于PagerAdapter
//设置tabLayout的标签来自于PagerAdaptertablayout.setTabsFromPagerAdapter(tabAdapter);
3.4、ViewPager设置适配器
//viewpager设置适配器viewpager.setAdapter(tabAdapter);
方式二:
3.1、viewpager设置适配器
//viewpager设置适配器viewpager.setAdapter(tabAdapter);
3.2、tablayout和viewpager相互关联,并设置tablayout文字
//必须在viewpager设置适配器后调用tablayout.setupWithViewPager(viewpager);
使用第二种方式需要注意的是 setupWithViewPager();方法的调用必须在viewpager设置完适配器后调用,如果在设置适配器之前调用会抛异常; 这样tab栏切换效果就实现了:
在上面说到了tablayout的tabMode和tabGravity两个属性,将这个两个属性对应的值做下修改就可以实现一些其他的效果,这里将tablayout对应的值修改为fixed(不可滑动),tabGravity的值修改为center(tab居中显示),将tab栏的数量改为两个;效果如下:
注意:如果tab的个数很多,而此时设置tabMode=“fixed”的话,所有tab会平分tabLayout的宽度,
如下图:
上面这些效果都是用tablayout实现的顶部tab栏切换,tablayout照样可以实现底部tab栏切换的效果;
修改xml布局文件,将tablayout和viewpager的位置互换,并设置viewpager的weight,同时将tablayout的tabIndicatorHeight属性值设为0dp,将指示器隐藏掉,tabMode属性值设置为fixed,tabGravity的属性值设置为fill;
<?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"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.mdtablayout.MainActivity"><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><android.support.design.widget.TabLayoutandroid:id="@+id/tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:color/holo_orange_light"app:tabGravity="fill"app:tabIndicatorColor="@color/colorAccent"app:tabIndicatorHeight="0dp"app:tabMode="fixed"app:tabSelectedTextColor="@color/colorAccent"app:tabTextColor="@android:color/black" />
</LinearLayout>
如果想在底部tab栏文字上面添加图片实现类似微信那样的效果也是可以的,在tablayout和viewpager关联后,获取tablayout的tab数量,并对数量进行遍历获取到每个tab,给每个tab设置相应的view就可以了;
代码如下:
//获取当前tab数量int tabCount = tablayout.getTabCount();//遍历循环tab数量for(int i=0;i<tabCount;i++){//获取每个tabTabLayout.Tab tab = tablayout.getTabAt(i);View view = View.inflate(this, R.layout.tab_view, null);ImageView iv = (ImageView) view.findViewById(R.id.iv);TextView tv = (TextView) view.findViewById(R.id.tv);tv.setText(tabList.get(i));iv.setImageResource(R.mipmap.message_icon);//给tab设置viewtab.setCustomView(view);}
效果如图:
另附上示例链接:
https://download.csdn.net/download/zhangqunshuai/10588658
孰能生巧,以此自勉!
TabLayout+ViewPager实现tab切换相关推荐
- android 页卡切换实现,TabLayout+ViewPager实现选项卡切换效果
原来项目中一直使用tabhost做切换效果,最近在整理代码,决定放弃tabhost,使用google自带的切换布局TabLayout . 其实TabLayout实现切换效果还是蛮简单的,跟tabpag ...
- android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果(微信和QQ底部多标签切换)...
前言 之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果,比较简陋.这次改用ViewPager+TabLayout 实现联动的效果. 实现效果 ViewPager 多 ...
- android 局部tab页,安卓TabLayout+ViewPager实现切页
安卓使用TabLayout+ViewPager+Fragment 实现页面切换,可实现左右滑动切换视图界面和点击切换 可自定义菜单栏是在顶部还是在底部 一.实现效果: 二.实现过程: 2.1 一些重要 ...
- 小牛的安卓笔记-----底部导航栏的实现以及用TabLayout+ViewPager+Fragment实现页面滑动切换
昨夜西风凋碧树,独上高楼,望尽天涯路. 今天难得有时间,准备写一写我们在APP中经常用到的页面形式,废话不多说,直接一张图看看页面效果你就知道为啥是常用的页面形式.先看看逻辑和最后的效果是怎么样的: ...
- Tablayout+ViewPager+Fragment 实现页面切换
项目也快上线了,就来总结下Tablayout+ViewPager+Fragment 的使用啦 主activity public class DoSomethingAct extends BaseAct ...
- Kotlin + AndroidX + Tablayout + ViewPager + Fragment 实现Tab切页
1.前沿 Google已经受够了V4,V7包的各种冲突.所以直接不再维护V4,V7包了.以后就统一使用AndroidX. 2.gradle配置: 除了原有的androidX的库,还需要使用materi ...
- TabLayout+Viewpager+Fragment实现分页滚动
效果如上,顶部标签滚动底下的页面也跟着滚动 灰色的标签只是一个recyclerview装起来的 这里用TabLayout+Viewpager+Fragment实现 先看布局 <?xml vers ...
- TabLayout+ViewPager+Fragment实现切页展示
写在前面 目前大多数的APP都采用的是几个Tab标签以及多个界面滑动的形式来提供多层次的交互体验,最为常用的做法就是采用TabLayout+ViewPager+Fragment的方式,最近在公司项目中 ...
- 使用TabLayout+ViewPager+Fragment实现切页展示
使用TabLayout+ViewPager+Fragment是比较常见的实现切页展示的方式,本例是在fragment中实现主要代码 步骤: 1,定义TabLayout和ViewPager的布局 2,实 ...
最新文章
- 数据库原理与设计 P75作业 学号2013211466 班级0401302
- 【CSS3教程】CSS3基础常用技巧实例集合
- Nginx源码分析:惊群处理与负载均衡
- 链表问题1——打印两个有序链表的公共部分
- 腾讯游戏主美:二次元卡通渲染有哪些黑科技?
- [你必须知道的.NET]第二十四回:认识元数据和IL(上)
- Golang——接口、多态、接口继承与转换、空接口、类型断言
- 16-margin的用法
- python学了基础之后方向_学习了解python基础后,该进去哪一个方向呢?
- 20165313 课程总结
- 前端实现文件下载的功能
- [No0000105]java sdk 开发环境变量powershell 自动配置脚本
- 尔雅网络选课 大学计算机知识,2017-2018学年第1学期超星尔雅网络课程选课指南.PDF...
- 人力资源管理-各类激励理论
- 网易云音乐在 Ubuntu 下缩放的问题
- android 自动亮屏解锁,android 点亮手机屏幕与屏幕解锁方法
- Linux进程通信的试验
- 服务器如何解决被流量攻击
- Executor及Executors
- android 关闭jack_编译Android时禁用Jack Server
热门文章
- 报名 微信 投票 php,女神微信投票PHP源码带PC报名和手机报名吸粉做微信活动必备...
- Debussy 快速上手教程
- mac OS下的资源限制 以及 引出的ulimit, launchctl, sysctl区别
- 从两幅图像的匹配点计算焦距f
- Photoshop辅助线和标尺的使用技巧
- 路由器和三层交换机的基本实验操作
- SQLI DUMB SERIES-2
- HarvestText
- c语言kbhit函数头文件,有没有办法在标准C中替换kbhit()和getch()函数?
- 【小米手环7】使用 Zeus + 表盘自定义工具 为小米手环7开发和安装小程序