TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager完成很好的效果。

一种类似于今日头条指示器,根据ViewPager的页面滑动,文字逐渐变色。

今日头条的顶部tab导航效果的实现,我们一般会用RadioGroup+Fragment+ViewPager来实现,适配器繁多,代码量大,今天我们来介绍TabLayout的使用。TabLayout为Android的Design库中的一个控件。首先我们来看一下运行的效果图:

ColorTrackTabLayout

先看下效果

使用

因为是继承TabLayout,所以用法跟TabLayout一模一样

 //隐藏Indicator
mTab.setSelectedTabIndicatorHeight(0);
//设置左右内边距
mTab.setTabPaddingLeftAndRight(10,10);
mTab.setupWithViewPager(mViewPager);

原理

ColorTrackLayout主要是继承了TabLayout,对它做了一些扩展。

既然是随着页面的滑动文字颜色渐变那么肯定少不了ViewPager的页面监听,这个在我们调用setupWithViewPager的时候TabLayout就已经添加监听。

 private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,
boolean implicitSetup) {
.... if (viewPager != null) {
mViewPager = viewPager; // Add our custom OnPageChangeListener to the ViewPager
if (mPageChangeListener == null) {
//添加了滑动监听
mPageChangeListener = new TabLayoutOnPageChangeListener(this);
}
mPageChangeListener.reset();
viewPager.addOnPageChangeListener(mPageChangeListener); // Now we'll add a tab selected listener to set ViewPager's current item
mCurrentVpSelectedListener = new ViewPagerOnTabSelectedListener(viewPager);
addOnTabSelectedListener(mCurrentVpSelectedListener); final PagerAdapter adapter = viewPager.getAdapter();
if (adapter != null) {
// Now we'll populate ourselves from the pager adapter, adding an observer if
// autoRefresh is enabled
setPagerAdapter(adapter, autoRefresh);
} // Add a listener so that we're notified of any adapter changes
if (mAdapterChangeListener == null) {
mAdapterChangeListener = new AdapterChangeListener();
}
mAdapterChangeListener.setAutoRefresh(autoRefresh);
viewPager.addOnAdapterChangeListener(mAdapterChangeListener); // Now update the scroll position to match the ViewPager's current item
setScrollPosition(viewPager.getCurrentItem(), 0f, true);
} else {
// We've been given a null ViewPager so we need to clear out the internal state,
// listeners and observers
mViewPager = null;
setPagerAdapter(null, false);
}
.... }

创建了mPageChangeListener并添加了监听

所以我们必须要重写setupWithViewPager删除掉原来的监听,换成我们自己的监听

mPageChangeListener = new TabLayoutOnPageChangeListener(this);

    @Override
public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) {
super.setupWithViewPager(viewPager, autoRefresh);
try {
//通过反射找到mPageChangeListener
Field field = TabLayout.class.getDeclaredField("mPageChangeListener");
field.setAccessible(true);
TabLayoutOnPageChangeListener listener = (TabLayoutOnPageChangeListener) field.get(this);
if (listener != null) {
//删除自带监听
viewPager.removeOnPageChangeListener(listener);
mPageChangeListenter = new ColorTrackTabLayoutOnPageChangeListener(this);
mPageChangeListenter.reset();
viewPager.addOnPageChangeListener(mPageChangeListenter);
}
} catch (Exception e) {
e.printStackTrace();
} }

还需要做的一点就是把TabLayout每一个的Tab布局替换成我们的。怎么替换呢?重写addTab,在添加的时候改成我们的布局

 @Override
public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
ColorTrackView colorTrackView = new ColorTrackView(getContext());
colorTrackView.setProgress(setSelected ? 1 : 0);
colorTrackView.setText(tab.getText() + "");
colorTrackView.setTextSize(mTabTextSize);
colorTrackView.setTag(position);
colorTrackView.setTextChangeColor(mTabSelectedTextColor);
colorTrackView.setTextOriginColor(mTabTextColor);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
colorTrackView.setLayoutParams(layoutParams);
tab.setCustomView(colorTrackView); super.addTab(tab, position, setSelected);
if (position == 0) {
//默认选中第一个
setSelectedView(position);
} setTabWidth(position, colorTrackView);
}

借鉴: www.weyye.me/detail/colo…

其关键就是将我们的布局利用setCustomView方法来设置上去。

源码链接 https://github.com/DingXianSen/DcColorTabLayout

自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)的更多相关文章

  1. iOS仿今日头条滑动导航

    之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...

  2. [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果

    APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...

  3. Android仿今日头条和知乎等App顶部滑动导航实现代码分析及源码下载

    一.本文所涉及到的知识点 源码下载 二.目标 通过利用ViewPager+FragmentStatePagerAdapter+TabLayout 实现顶部滑动效果,如图: 三.知识点讲解 1.View ...

  4. 仿今日头条app手机端顶部触屏滑动导航

    swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 自定义tabpageindicator,可以自定义tab是三角形还是矩形,但是tab不具有滑动的功能

    我是不会滴,但是看了一些大神写的,我修改了一下,大家可以参照参照 一,自定义Mytabpageindicator,直接贴代码了,具体的在代码中有注释 package com.wangy.mytabpa ...

  6. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. 自适应图片宽度的jQuery焦点幻灯轮播代码

    自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示   XML/HTML Code <div id="sli ...

  8. EasyUI设置Layout自适应浏览器宽度和高度

    //设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...

  9. tab切换的效果——仿照今日头条APP的切换效果

    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...

随机推荐

  1. WCF(二)三种通信模式

    WCF在通信过程中有三种模式:请求与答复.单向.双工通信 请求与答复模式 客户端发送请求,然后一直等待服务端的响应答复(异步调用除外),期间处于假死状态,直到服务端有了答复后才能继续执行其他程序 请求 ...

  2. JavaScript学习日志(一):变量,作用域和内存问题

    一,变量分为两种类型:基本类型值和引用类型值,基本类型包括:Undefined, String, Boolean, Null, Number,我们无法给基本类型值添加属性: 二,复制变量值的时候,如果 ...

  3. 锤子坚果pro突破京东10万好评,还有什么是锤子科技做不出...

    作为2017年手机圈明星产品的锤子科技坚果Pro,可是一点都不安分呢! 9月份锤子科技推出一款新机型--坚果Pro银魂定制版 这在动漫圈跟手机圈都掀起一股不小的浪潮. 外观漂亮,颜值超高,续航时间长. ...

  4. PHP面向对象知识点

    public private protected __construct() __destruct() __set() __get() extends(继承) :: (重载) abstract cla ...

  5. 第1周-java作业总结与建议

    1. 本周作业简评与建议 存在的问题: 这周的作业普遍存在一个格式混乱的问题.请认真学习Markdown,我们后面的作业都要使用Markdown.Markdown学习请参考http://group.c ...

  6. 201521123036 《Java程序设计》第5周学习总结

    本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 接口(interface):对行为的抽象 方法声明和常量值的集合 方法声明:接口中所有 ...

  7. 201521123070 《JAVA程序设计》第2周学习总结

    1. 本章学习总结 1.学习了string类: 2.了解了ArrayList的特性和使用方法: 3.学习了类名包名. 2. 书面作业 Q1.使用Eclipse关联jdk源代码(截图),并查看Strin ...

  8. JAVA课程设计+五子棋(团队博客)

    JAVA课程设计 利用所学习的JAVA知识设计一个五子棋小游戏 1.团队名称.团队成员介绍(菜鸟三人组) 杨泽斌[组长]:201521123049 网络1512 叶文柠[组员]:20152112305 ...

  9. PTA分享码-Java

    主要用于Java语法练习,非竞赛类题目.   1. Java入门          959dbf0b7729daa61d379ec95fb8ddb0   2. Java基本语法   23bd8870e ...

  10. 杭电acm-2007平方和立方和

    #include<stdio.h>int main(){         int t,m,n,x,y,i;     while(scanf("%d%d",&n, ...