Android基础控件——TabLayout的使用、仿爱奇艺导航条
TabLayout的使用、仿爱奇艺导航条
学习,学习,学以致用,让基础控件贴近实战效果
TabLayout是Google新推出的Material Design的控件之一,TabLayout的使用必须结合ViewPager和Fragment的使用,如果对ViewPager不熟悉的同学,请自行查阅资料,很简单的。我们来看下爱奇艺导航条的原效果
我们今天要实现的效果图,在真机上运行效果会更接近原图
一、集成TabLayout
由于TabLayout是Material Design中的控件之一,集成它需要在Gradle文件中添加依赖库,由于我的compileSdkVersion为24,所以采用24的版本就不会提示错误
compile 'com.android.support:design:24.0.0'
我不知道是我电脑项目中东西太多,还是Material Design本来就很大的库,编译的时候花了8分钟
二、实现布局
TabLayout需要和ViewPager一起使用,所以在TabLayout下面放置一个ViewPager
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:background="#fff"android:layout_height="match_parent"android:orientation="vertical"><android.support.design.widget.TabLayout
xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/tl"android:background="#eee"android:layout_width="match_parent"android:layout_height="45dp"app:tabIndicatorHeight="1dp"app:tabGravity="center"app:tabMode="scrollable"app:tabIndicatorColor="#24C026"app:tabSelectedTextColor="#24C026"app:tabTextColor="#000000"/><android.support.v4.view.ViewPager
android:id="@+id/vp"android:layout_width="match_parent"android:layout_height="match_parent"/>
</LinearLayout>
由于使用了TabLayout的自定义属性,所以记得导入资源
xmlns:app="http://schemas.android.com/apk/res-auto"
这里对上面TabLayout的参数进行介绍
- tabIndicatorHeight:Tab指示器下标的高度
- tabGravity:Tab内容的显示模式
- tabMode:Tab的展示模式
- fixed(默认):固定的,标签很多时候会被挤压,不能滑动
- scrollable:可滚动的,标签多的时候可滚动
- tabIndicatorColor:Tab指示器下标的颜色
- tabSelectedTextColor:Tab文字被选中的颜色
- tabTextColor:Tab文字的颜色
其实这些属性都可以在代码中设置,不过为了代码的阅读性和美观,所以将属性设置都在布局文件中实现
三、实现代码
找到对应的控件,并添加对应的Tab和Fragment
public class MainActivity extends AppCompatActivity {private TabLayout tl;private ViewPager vp;private FragmentAdapter adapter;private List<Fragment> fragments;private List<String> strings;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);tl = (TabLayout) findViewById(R.id.tl);vp = (ViewPager) findViewById(R.id.vp);//添加Fragmentfragments = new ArrayList<>();fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());fragments.add(new FragmentOne());//添加Tab文字strings = new ArrayList<>();strings.add("推荐");strings.add("爱上超模");strings.add("电视剧");strings.add("电影");strings.add("综艺");strings.add("动漫");strings.add("订阅");strings.add("北京");strings.add("资讯");strings.add("娱乐");strings.add("搞笑");strings.add("儿童");strings.add("原创");//添加Tabfor (String str : strings) {tl.addTab(tl.newTab().setText(str));}//绑定ViewPageradapter = new FragmentAdapter(getSupportFragmentManager(), fragments, strings);vp.setAdapter(adapter);tl.setupWithViewPager(vp);}
}
可以发现,创建Tab都是通过声明的该TabLayout生成的,这里我们采用的是高级for循环遍历
for (String str : strings) {tl.addTab(tl.newTab().setText(str));
}
然后通过TabLayout的setupWithViewPager()方法绑定一个ViewPager,记得ViewPager是要有东西的,所以需要一个Adapter,ViewPager的使用和ListView大同小异,如果对ViewPager不懂的同学,请先学习ViewPager后再来理解
adapter = new FragmentAdapter(getSupportFragmentManager(), fragments, strings);
vp.setAdapter(adapter);
tl.setupWithViewPager(vp);
下面我们可以创建很多个不同的Fragment来跟我们的标签绑定,这里为了方便演示,所以只创建同一个Fragment
public class FragmentOne extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_one, null);return view;}
}
四、实现Adapter
public class FragmentAdapter extends FragmentPagerAdapter {private List<Fragment> fragments;private List<String> strings;public FragmentAdapter(FragmentManager fm, List<Fragment> fragments ,List<String> strings) {super(fm);this.fragments = fragments;this.strings = strings;}//返回Tab对应的Fragment@Overridepublic Fragment getItem(int position) {return fragments.get(position);}//返回Tab数目@Overridepublic int getCount() {return strings.size();}//返回Tab文字@Overridepublic CharSequence getPageTitle(int position) {return strings.get(position);}}
这里有个方法需要注意:需要重写getPageTitle()方法来为TabLayout的Tab添加上文字,否则会显示不出来文字,这也是为什么我们需要在构造方法中传进来List< String> strings,其他的与ListView的Adapter大同小异
部分源码下载
到这里的课程就结束,如果对基础控件感兴趣的朋友可以关注我博客的基础控件系列
Android基础控件——TabLayout的使用、仿爱奇艺导航条相关推荐
- 爱奇艺首页底部导航按钮android,仿爱奇艺/腾讯视频ViewPager导航条实现
仿爱奇艺/腾讯视频ViewPager导航条实现,支持自定义导航条高度,宽度,颜色变化,字体大小变化.支持多种滚动模式,支持自定义每个TabView的样式.项目地址:https://github.com ...
- Android源码之高仿爱奇艺
Android源码之高仿爱奇艺 支持平台:Android 运行环境:Eclipse 开发语言:Java 下载地址:http://www.devstore.cn/code/info/306.h ...
- android高仿奇艺影视,android仿爱奇艺加载动画实例
本篇文章介绍了android仿爱奇艺加载动画实例,具体代码如下: 效果图: 用到的知识点: Path ValueAnimator 如果对Path和ValueAnimator还不熟悉推荐去看这几个大神的 ...
- 仿爱奇艺加载dialog
仿爱奇艺在加载视频时的动画,想上张图: gif的效果有点卡,先说一下实现的方法, 主要的难点在于怎样将三角形画到空间的中间,我通过三角形中心到顶角的距离来确定三角形的大小, 当三角形在中间时角a的大小 ...
- 仿爱奇艺UI界面(第一天)
仿爱奇艺UI界面 1.整体布局 是一个Activity,再一个Activity界面中填充不同的Fragment. 主界面是一个LinearLayout布局,在布局中放一个FrameLayout用来做显 ...
- 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图(二)之SuperIndicator源码分析
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...
- 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图介绍(一)
请尊重分享成果,转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52327435 前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下 ...
- html实现视频网站,仿爱奇艺,搜狐,迅雷看看(附源码)
文章目录 1.功能模板 1.1 仿爱奇艺 1.2 仿搜狐视频 1.3 仿迅雷看看 1.4 视频播放 1.5 影视公司官网 2.效果和源码 2.1 源代码 2.2 模板目录 源码下载 作者:xcLeig ...
- 苹果cms v8模板 高仿爱奇艺带PC+手机模板
介绍: 苹果cms v8模板 高仿爱奇艺带PC+手机模板 网盘下载地址: http://kekewl.net/frgNDYcaQne0 图片:
最新文章
- 非线性振动 matlab,用MATLAB分析非线性弹簧振子的振动
- springboot2.X 在项目启动后执行一段自定义代码
- PatBlt - [Daliy APIs]
- 还在对java类、类的加载一知半解?这篇文章相信会解决你80%的困惑
- java token生成和验证_SpringBoot集成JWT生成token及校验方法过程解析
- 随机数范围扩展方法总结
- 求两个已排序单链表中相同的数据(C语言)
- java书籍台湾翻译_《现代专业Javasctript 技术》一书中英文目录,翻译记录下来方便学习用...
- [Java] ArrayList、LinkedList、Vector的区别
- 补充“为什么Scrum不行”
- LeetCode447. Number of Boomerangs
- linux编码合适修改_CentOS升级Linux内核备忘录
- 利尔达携手紫光展锐重磅发布5G R16模组,领跑5G To B新纪元
- r语言和python爬虫谁厉害_r语言和python有必要都学吗
- Ubuntu 12.04 使用基本配置
- 教你分割视频,用多个视频随机合并,添加音频
- SEO入门:网站站内优化流程
- STM32最彻底的死机是什么?看门狗也挂了?
- 使用vue-lunar-full-calendar插件展示带有农历和节假日的日历
- 用户留存分析的几种方法
热门文章
- SQL SERVER 2008 2012 数据库损坏 或者 附加数据库 无日志文件出错
- 查看本机 ssh 公钥,生成公钥
- 社会化媒体营销技巧与策略
- 学英语以及中文快速阅读的启迪,从“为什么全世界只有中日两个国家弹幕视频网站成为流行?”说开去
- 基于zxing的仿微信二维码扫描界面
- 第2课:JSP常用开发模式 (黄菊华Java网站开发系列教程)
- 3路DI计数器,2路PWM输出,Modbus TCP协议,WiFi模块WJ165
- oracle to_char 进制转换_Oracle 10进制转换2进制
- java按钮点击事件监听_按钮事件监听
- pytorch Relu