自定义TabLayout的Indicator
最近项目要使用类似TabLayout的控件,其实我感觉就是TabLayout只是换了一个Indicator,先说一说TabLayout这是Android Support Design的控件要使用的同学们应导入Design库在Gradle中在dependencies加入下面代码同步Gradle就可以使用了,Design里面还有很多有意思的东西推荐大家都看看。
compile 'com.android.support:design:23.1.1'
想改变TabLayout Indicator还是有点麻烦的,主要是TabLayout没有暴露出一些东西,这就导致我们在自定义Indicator的时候不是那么的方便呢。我的想法是在TabLayout后面加一个View来跟随TabLayout自己来画Indicator,实现方法有很多我只给大家提供一个思路,下面是布局方式。
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"> <com.indicator.ShapeIndicatorView //自定义Indicator
android:id="@+id/custom_indicator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="10dp"
app:fullColor="@android:color/holo_blue_dark"
/> <android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.design.widget.TabLayout> </FrameLayout>
用一个FrameLayout包含一个TabLayout与一个自定义的Indicator, ShapeIndicatorView的代码包含三个部分,设置TabLayout,设置ViewPager,然后将TabLayout与ViewPager组合起来。
下面代码说明它们是如何组合的,其实TabLayout有一个setupWithViewPater方法可以直接设置ViewPager但这样会产生一个问题,TabLayout内部会为ViewPager添加一个自身的OnViewPagerScrollListener,而我们自己定义的也会添加一个listener这就会导致有一些冲突我的解决办法是不为TabLayout设置ViewPager将ViewPager设置在自定义的View由我们管理TabLayout与ViewPager的切换工作。
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); // Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter); TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
ShapeIndicatorView shapeIndicatorView = (ShapeIndicatorView) findViewById(R.id.custom_indicator); tabLayout.setTabsFromPagerAdapter(mViewPager.getAdapter());
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); shapeIndicatorView.setupWithTabLayout(tabLayout);
shapeIndicatorView.setupWithViewPager(mViewPager);
准备好上面的工作后再看ShapeIndicatorView内部的代码。首先将TabLayout原生的Indicator的颜色设置为不可见,然后设置个listener监听Tab切换事件, 最后要添加一个全局的滚动listener如果TabLayout的Mode是SCROLLABLE的话这是有必要的,因为我们的Indicator也要跟直滚动。
public void setupWithTabLayout(final TabLayout tableLayout){
mTabLayout = tableLayout; tableLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT);
tableLayout.setOnTabSelectedListener(this); tableLayout.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
if (mTabLayout.getScrollX() != getScrollX())
scrollTo(mTabLayout.getScrollX(), mTabLayout.getScrollY());
}
}); ViewCompat.setElevation(this, ViewCompat.getElevation(mTabLayout));
tableLayout.post(new Runnable() {
@Override
public void run() {
if (mTabLayout.getTabCount() > 0)
onTabSelected(mTabLayout.getTabAt(0)); }
}); //清除Tab background
for(int tab = 0; tab < tableLayout.getTabCount() ; tab++){
View tabView = getTabViewByPosition(tab);
tabView.setBackgroundResource(0);
}
}
效果图
还有的一些就是协作方法就不贴出来呢,有兴趣的可以看源码。
https://github.com/yjwfn/tablayoutindicator.git
自定义TabLayout的Indicator的更多相关文章
- TabLayout中Indicator的样式修改
最近写一个项目的时候用到了TabLayout,其中Indicator只是固定的一条横线,样式只能修改Color和Height,没有办法改变形状和宽度等其他信息. 经过查看TabLayout类的源码,发 ...
- android TabLayout实现京东详情效果
Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...
- TabLayout学习笔记
配合ViewPager使用,基本布局如下: <?xml version="1.0" encoding="utf-8"?> <LinearLay ...
- TabLayout基本使用
前言 Tablayout继承自HorizontalScrollView,可以用作顶部标签效果.底部导航栏效果.一般多与ViewPager一起使用. 想直接了解如何实现短下滑效果的请看:TabLayou ...
- 浅谈 iOS 中的 Activity Indicator
Activity Indicator 是iOS开发中必不可少的一个视图.本文就简单地总结一下这个Activity Indicator 的使用方法. 默认 Activity Indicator 以下的函 ...
- 【转载】TabLayout 源码解析
原文地址:https://github.com/Aspsine/AndroidSdkSourceAnalysis/blob/master/article/TabLayout%E6%BA%90%E7%A ...
- Spring Boot应用的健康监控
在之前的系列文章中我们学习了如何进行Spring Boot应用的功能开发,以及如何写单元测试.集成测试等,然而,在实际的软件开发中需要做的不仅如此:还包括对应用程序的监控和管理. 正如飞行员不喜欢盲目 ...
- 相当郁闷的问题,TabHost选项卡标签图标始终不出现?
在学习Android TabHost布局过程中,很多教程告诉我,这样来显示选项卡标签的图标和文字: TapSpec spec1 = tabHost.newTabSpec("tab 1&quo ...
- TabLayout自定义tab,实现多样导航栏
代码地址如下:http://www.demodashi.com/demo/14660.html 前言 之前有讲过TabLayout的一些知识, TabLayout实现顶部导航(一) TabLayout ...
随机推荐
- python小白短期基础入门
一.编程语言介绍与分类 1.什么是编程语言 编程语言本质就是人类的语言,主要用于沟通交流.我们通过编程语言与计算机进行互动交流,从而使计算机来帮助我们实现一些特定的功能和一些复杂的工作. 2.编程语言 ...
- 深入浅出TypeScript(3)- 函数重载和泛型
面向对象特性中,最根本的就是面向对象的三大基本特征:封装.继承.多态.同时,TypeScript中也存在多态的使用,比如函数重载,今天我们先看一下函数重载以及泛型的概念. 什么是函数重载 简单来说,函 ...
- NLP(二十四)使用LSTM构建生成式聊天机器人
准备 数据集:AIML数据集 下载数据集并用Notepad++打开,复制到txt文件中方便打开 代码实现 数据很少,训练轮次不多,结果不好,仅当示例 import numpy as np import ...
- bzoj 1588: [HNOI2002]营业额统计(splay入门)
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1588 题解:这题如果用普通的bst的话是可以过时间差不多4s左右如果用splay的话是14 ...
- 牛客小白月赛4 H 相邻的糖果 思维
链接:https://www.nowcoder.com/acm/contest/134/H来源:牛客网 题目描述 有n个盒子摆成一排,每个盒子内都有ai个糖果. 现在你可以执行以下操作: ·你可以选择 ...
- 天梯杯 L2-008. 最长对称子串
L2-008. 最长对称子串 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 对给定的字符串,本题要求你输出最长对称子串的长度. ...
- hdu 4081 Qin Shi Huang's National Road System(次小生成树prim)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4081 题意:有n个城市,秦始皇要修用n-1条路把它们连起来,要求从任一点出发,都可以到达其它的任意点. ...
- Period UVALive - 3026
For each prefix of a given string S with N characters (each character has an ASCII code between 97 a ...
- jquery中的 $(function(){ .. }) 函数
2017-04-29 在讲解jquery中的 $(function(){ .. }) 函数之前,我们先简单了解下匿名函数.匿名函数的形式为:(function(){ ... }),又如 functio ...
- 封装axios来管控api的2种方式
前言:我们在开发项目的时候,往往要处理大量的接口.并且在测试环境 开发环境 生产环境使用的接口baseurl都不一样 这时候如果在开发环境完成之后切换每一个接口的baseurl会变的非常的麻烦,(要去 ...