文档章节

使用tablayout 打造高度不一样的tab

java9
 java9
发布于 2016/03/02 10:18
字数 802
阅读 1731
收藏 3

要实现下图这样的效果,请忽略红线。


本人的实现综指是以最少的代码来实现。

每一个tab使用自定义view.每个tab是由两个控件叠加的。没有选中的时候下面一层的背景为透明,选中的时候下面一层的背景为放大效果的图片。tab的上面一层的背景为白色。

tabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    if(tab==null){
        continue;
    }
    View view = mSectionsPagerAdapter.getTabView(this,i);
    tab.setCustomView(view);
}

adapter

public class SectionsPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragments = new ArrayList<>();
    private int[] imageResId = {
            R.drawable.bottom_button_index,
            R.drawable.bottom_button_study,
            R.drawable.bottom_button_activity,
            R.drawable.bottom_button_my
    };//图片资源
    private int[] titleResId = {
            R.string.bottom_button_index,
            R.string.bottom_button_study,
            R.string.bottom_button_activity,
            R.string.bottom_button_my
    };//标题资源
    public SectionsPagerAdapter(FragmentManager fm,Fragment... fragments) {
        super(fm);
        mFragments.addAll(Arrays.asList(fragments));
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        // Show 3 total pages.
        return 4;
    }

    //加载自定义布局
    View getTabView(Context context, int position){
        View view = LayoutInflater.from(context).inflate(R.layout.bottom_button,null);
        ((ImageView) view.findViewById(R.id.bottom_button_img)).setImageDrawable(context.getResources().getDrawable(imageResId[position]));
        ((TextView) view.findViewById(R.id.bottom_button_title)).setText(context.getResources().getString(titleResId[position]));
        return view;
    }
}

每个tab的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bottom_button"
    android:orientation="vertical">
<!--外层的LinearLayout即为下面一层的放大区域,选中时设置放大的背景图。当然也可以用FrameLayout。里层的LinearLayout为按钮,背景为白色,选中时背景为绿色。
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/tab_height_limit"//这里需要给放大的区域留一个空间,不然看不到放大的效果
        android:orientation="vertical"
        android:background="@drawable/bottom_button2">

        <ImageView
            android:id="@+id/bottom_button_img"
            android:layout_width="@dimen/tab_img_width"
            android:layout_height="@dimen/tab_img_width"
            android:layout_gravity="center_horizontal"
            android:scaleType="fitCenter"
            tools:src="@drawable/bottom_button_index" />

        <TextView
            android:id="@+id/bottom_button_title"
            android:layout_width="match_parent"
            android:layout_height="@dimen/bottom_btn_text_height"
            android:layout_gravity="bottom"
            android:gravity="bottom|center_horizontal"
            tools:text="@string/bottom_button_index" />
    </LinearLayout>
</LinearLayout>

外层的图片bottom_button.xml,选中时是放大的图片,不选中时是透明的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_selected_bg" android:state_selected="true" />
    <item android:drawable="@android:color/transparent" />
</selector>

里层的背景图片botton_button2.xml,选中时是透明的,不选中时白色的。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" android:state_selected="false"  />
    <item android:drawable="@android:color/transparent" android:state_selected="true"  />
</selector>

这样就基本上实现了上述功能。不过你会发现第一个tab最开始是没有这种效果的。

不管你是设置

android:state_...="true"

还是实现tabselectlistener,去手动更改背景图片也好。效果都不理想。

由此我在想 android:state_selected =true 是如何工作的?怎么样才叫selected? 

最终我发现view中有一个方法叫setSelected(true),通过以下代码使第一个tab刚开始时实现我们的效果。

if (tabLayout.getSelectedTabPosition() == 0){
    tabLayout.getTabAt(0).getCustomView().setSelected(true);
}

由此不得不吐槽一下,既然 tabLayout.getSelectedTabPosition()==0,为啥还要我手动去设置selected效果。

还有viewpager刚开始时,也就是最初显示viewpager时也不触发onpageselected事件。就算你设置setcurrentitem(0)也没有用,因为现在就是显示的就是第0页。

最后再提一点就是,如果设置了tablayout的ontabselectedlistener,你会发现点击tab之后,viewpager不切换了,看一下源代码就知道为什么了。


© 著作权归作者所有

共有 人打赏支持
java9
粉丝 12
博文 65
码字总数 25460
作品 0
武汉
后端工程师
私信 提问
加载中

评论(1)

钢笔布莱恩特
钢笔布莱恩特
源码呢,
TabLayout基本属性全解

前言 之前讲过一篇TabLayout实现顶部导航的文章,这篇文章,来详细介绍下TabLayout的一些基本使用,让大家以后更加方便的使用。 这篇文章涉及的内容有: 控件库的导入 TabLayout导航UI的快速...

奔跑的佩恩
01/07
0
0
关于Android改变TabLayout 下划线(Indicator)宽度实践总结

TabLayout我们再熟悉不过了,在开发中,像这种tab切换的需求都会用到TabLayout,它是由官方提供的一个控件,在support design 包中。使用起来非常简单方便,交互效果也很不错,能满足我们开发...

依然范特稀西
2018/06/03
0
0
Andorid - Material Design之TabLayout

老婆保佑,代码无BUG 前言 Material Design 系列第四篇 TabLayout 目录 一:使用 二:属性介绍 三:与ViewPager一起使用 引用 Untitled.gif 一:使用 1. 静态设置 2. 动态设置 二:属性介绍 ...

Allens_Jiang
2018/01/02
0
0
垂直的 Android TabLayout 组件--VerticalTabLayout

VerticalTabLayout 是一个垂直竖向的 Android TabLayout。 特性: 支持自定义Indicator大小 支持自定义Indicator位置 支持Indicator设置圆角 支持Tab设置Badge 支持Adapter的方式创建Tab 多种...

匿名
2017/02/11
1K
4
TabLayout自定义tab,实现多样导航栏

前言 之前讲过TabLayout的基本属性全解,但是对于TabLayout实现的导航栏仍是有诸多限制,例如不能任意设置text的文字大小,若导航中涉及到图片的话,图片只能简单的设计到文字上方,所以布局...

奔跑的佩恩
01/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
8
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
2
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部