TabLayout+ViewPager轻松搞定Tab栏切换
来源:互联网 发布:意大利知乎 编辑:程序博客网 时间:2024/05/20 03:41
在项目开发中很多场景都会碰到tab栏切换的效果,实现的思路也有很多种,tabhost+fragment,radionbtton+viewpager等方式都可以实现,这里就说下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"> <android.support.design.widget.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"/> <android.support.v4.view.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中设置,也可以使用代码进行设置;需要注意这两个属性:
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关联
tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { //tab被选的时候回调 viewpager.setCurrentItem(tab.getPosition(),true); } @Override public void onTabUnselected(TabLayout.Tab tab) { //tab未被选择的时候回调 } @Override public void onTabReselected(TabLayout.Tab tab) { //tab重新选择的时候回调 } });
3.2、ViewPager滑动关联tabLayout
viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
3.3、设置tabLayout的标签来自于PagerAdapter
tablayout.setTabsFromPagerAdapter(tabAdapter);
3.4、ViewPager设置适配器
viewpager.setAdapter(tabAdapter);
方式二:
3.1、viewpager设置适配器
viewpager.setAdapter(tabAdapter);
3.2、tablayout和viewpager相互关联,并设置tablayout文字
tablayout.setupWithViewPager(viewpager);
使用第二种方式需要注意的是setupWithViewPager();方法的调用必须在viewpager设置完适配器后调用,如果在设置适配器之前调用会抛异常,至于为什么会抛异常,后面tablayout的源码会说到;这样tab栏切换效果就实现了:
在上面说到了tablayout的tabMode和tabGravity两个属性,将这个两个属性对应的值做下修改就可以实现一些其他的效果,这里将tablayout对应的值修改为fixed(不可滑动),tabGravity的值修改为center(tab居中显示),将tab栏的数量改为两个;效果如下:
上面这些效果都是用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: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"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <android.support.design.widget.TabLayout android: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="fixed" app:tabGravity="fill" android:background="@android:color/holo_orange_light" app:tabIndicatorHeight="0dp"/></LinearLayout>
其他的文件不用做改动,效果就可以实现了:
如果想在底部tab栏文字上面添加图片实现类似微信那样的效果也是可以的,在tablayout和viewpager关联后,获取tablayout的tab数量,并对数量进行遍历获取到每个tab,给每个tab设置相应的view就可以了;
//获取当前tab数量int tabCount = tablayout.getTabCount();//遍历循环tab数量for(int i=0;i<tabCount;i++){ //获取每个tab TabLayout.Tab tab = tablayout.getTabAt(i); //通过相应的布局文件获取view 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); //设置tab栏文字 tv.setText(tabList.get(i)); //设置tab图片 iv.setImageResource(R.mipmap.message_icon); //给tab设置view tab.setCustomView(view);}
这样效果就实现了:
源码地址:
http://download.csdn.net/detail/wangwo1991/9915302
- TabLayout+ViewPager轻松搞定Tab栏切换
- Tablayout+viewpager+fragment实现tab导航以及滑动切换
- 自定义tab,viewpager实现仿tablayout切换效果
- tab头部滑动切换,TabLayout和ViewPager实现
- Android TabLayout、ViewPager实现顶部和底部Tab导航 点击滑动切换Tab页面
- 浅谈TabLayout(ViewPager+Tab联动)
- TabLayout、ViewPager实现页面切换
- android TabLayout+ViewPager有较多Tab,Tab随viewPager滚动
- TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签
- TabLayout与ViewPager组合实现tab导航
- Android TabLayout与ViewPager实现动态Tab
- Android fragment+viewpager 切换Tab
- 超简单tab切换--tablayout的使用
- TabLayout和ViewPager实现Tabs切换
- TabLayout+ViewPager撤消左右滑动切换功能
- Android开发:顶部&底部Tab导航栏实现(TabLayout+ViewPager+Fragment)
- ViewPager+RadioButton轻松实现底部Tab导航
- Fragment 多tab切换,顶部tab,顶部tab+viewpager
- php sys_getloadavg
- Spring Data Redis ---笔记2
- 1058. 选择题(20)
- 【转】注册WebStorm
- 数据结构——树(JavaScript)
- TabLayout+ViewPager轻松搞定Tab栏切换
- spring下的dubbo+zookeeper的helloworld
- sicily1822 Fight club(dp)
- k-d tree 快速最邻近查询
- Java对象序列化
- unbuntu下readlien的安装和函数的一些使用总结
- 杭电acm—1017 A Mathematical Curiosity
- H5炫酷特效系列4——炫酷粒子变化特效
- ToLua学习笔记,通信(三)