最近项目要使用类似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的更多相关文章

  1. TabLayout中Indicator的样式修改

    最近写一个项目的时候用到了TabLayout,其中Indicator只是固定的一条横线,样式只能修改Color和Height,没有办法改变形状和宽度等其他信息. 经过查看TabLayout类的源码,发 ...

  2. android TabLayout实现京东详情效果

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...

  3. TabLayout学习笔记

    配合ViewPager使用,基本布局如下: <?xml version="1.0" encoding="utf-8"?> <LinearLay ...

  4. TabLayout基本使用

    前言 Tablayout继承自HorizontalScrollView,可以用作顶部标签效果.底部导航栏效果.一般多与ViewPager一起使用. 想直接了解如何实现短下滑效果的请看:TabLayou ...

  5. 浅谈 iOS 中的 Activity Indicator

    Activity Indicator 是iOS开发中必不可少的一个视图.本文就简单地总结一下这个Activity Indicator 的使用方法. 默认 Activity Indicator 以下的函 ...

  6. 【转载】TabLayout 源码解析

    原文地址:https://github.com/Aspsine/AndroidSdkSourceAnalysis/blob/master/article/TabLayout%E6%BA%90%E7%A ...

  7. Spring Boot应用的健康监控

    在之前的系列文章中我们学习了如何进行Spring Boot应用的功能开发,以及如何写单元测试.集成测试等,然而,在实际的软件开发中需要做的不仅如此:还包括对应用程序的监控和管理. 正如飞行员不喜欢盲目 ...

  8. 相当郁闷的问题,TabHost选项卡标签图标始终不出现?

    在学习Android TabHost布局过程中,很多教程告诉我,这样来显示选项卡标签的图标和文字: TapSpec spec1 = tabHost.newTabSpec("tab 1&quo ...

  9. TabLayout自定义tab,实现多样导航栏

    代码地址如下:http://www.demodashi.com/demo/14660.html 前言 之前有讲过TabLayout的一些知识, TabLayout实现顶部导航(一) TabLayout ...

随机推荐

  1. .NET平台下,钉钉微应用开发之:工作消息通知

    首先看下官方文档,为我们提供了POST请求地址,和几个必传参数的列表以及参数示例,写的都挺详细的. 无奈提供的SDK请求示例是JAVA的,而我用的是.NET的,所以还是摸了一些坑出来,其实也就是不同平 ...

  2. python循环语句的一些题型

    1. 使用while循环输出1 2 3 4 5 6 8 9 10 i =1 while i <= 10: print(i,end=' ') i = i +1 if i == 7: i = i + ...

  3. spring-cloud-kubernetes与k8s的configmap

    本文是<spring-cloud-kubernetes实战系列>的第六篇,主要内容是在kubernetes上部署一个java web应用,该应用使用了spring-cloud-kubern ...

  4. P4570 [BJWC2011]元素 线性基 + 贪心

    题意 给定n个物品,每个物品有一个编号和价值,问如何取使得拿到的物品价值总和最大,并且取得物品的编号的子集异或和不能为0. 思路 这是个贪心,我们先按照价值从大到小排序,然后贪心地取,如果当前要取的物 ...

  5. URAL-1627-Join 生成树计数

    传送门:https://vjudge.net/problem/URAL-1627 题意: 给定一个n*m的图,问图中“.”的点生成的最小生成树有多少个. 思路: 生成树的计数,需要用Kirchhoff ...

  6. HDU 1003 Max Sum * 最长递增子序列(求序列累加最大值)

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  7. poj 3177 Redundant Paths(tarjan边双连通)

    题目链接:http://poj.org/problem?id=3177 题意:求最少加几条边使得没对点都有至少两条路互通. 题解:边双连通顾名思义,可以先求一下连通块显然连通块里的点都是双连通的,然后 ...

  8. codeforces 765 D. Artsem and Saunder(数学题)

    题目链接:http://codeforces.com/contest/765/problem/D 题意:题目中给出你两个公式,g(h(x))==x,h(g(x))==f(x).现给你f(x) 让你求符 ...

  9. VS2017 之 MYSQL实体数据模

    Photon Server 和 Unity3D 数据交互: Photon Server 服务端编程 Unity3D 客户端编程 VS2017 之 MYSQL实体数据模 一.新建数据库连接后,点击下一步 ...

  10. Linux音频编程(二)声卡介绍

    一.声卡 1.声卡是audio interface,它含有hardware buffer,而这个hardware buffer是在声卡里面,不是内存.声卡的缓存是环状的,则ALSA中是将数据分成连续的 ...