TabLayout的高级使用
前言
前面介绍了TabLayout的基本属性和基本的使用方法。我是传送门。
真实的业务场景中,很多的效果,原生的TabLayout,并不支持。例如下滑线短于文字的效果,底部导航栏效果,标签文字选中是需要加粗效果等等。
所以我们需要使用TabLayout的自定义tab标签。
先上图。
先为急用的朋友上代码,后面做讲解
java类
- import android.content.Context;
- import android.os.Bundle;
- import android.support.design.widget.TabLayout;
- import android.support.v4.app.Fragment;
- import android.support.v4.app.FragmentManager;
- import android.support.v4.app.FragmentPagerAdapter;
- import android.support.v4.view.ViewPager;
- import android.support.v7.app.AppCompatActivity;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.widget.CheckBox;
- import java.util.ArrayList;
- import java.util.List;
- import butterknife.BindView;
- import butterknife.ButterKnife;
- public class MainActivity extends AppCompatActivity {
- @BindView(R.id.vp_all)
- ViewPager vpAll;
- @BindView(R.id.tab_custom)
- TabLayout tabCustom;
- //存放自定义tab标签的列表
- List<View> customTabList = new ArrayList<>();
- //存放对应tab标签的fragment页面
- List<PageFragment> fgList = new ArrayList<>();
- //选中的自定义标签,标记器。默认选中第一个。标记位是0;
- int indicator = 0;
- ViewPagerAdapter pagerAdapter;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- ButterKnife.bind(this);//此处是用的是butterKnife框架,等同于findviewbyid获取各个控件。
- initTabCustomAndViewPager();
- initListener();
- }
- /**
- * 初始化tab标签和viewpager内容。
- */
- private void initTabCustomAndViewPager() {
- //初始化10个自定义tab标签
- for (int i = 0; i < 10; i++) {
- final View tabView = getCustomTabView(this, "自定义" + i);
- customTabList.add(tabView);
- if (i==0){
- //设置默认第一个选中效果
- ((CheckBox) tabView.findViewById(R.id.cb_name)).setChecked(true);
- tabView.findViewById(R.id.cb_slide).setVisibility(View.VISIBLE);
- }
- tabCustom.addTab(tabCustom.newTab().setCustomView(tabView));
- }
- //初始化10个fragment页面
- for (int i = 0; i < 10; i++) {
- fgList.add(PageFragment.newInstance("我是内容栏目" + i));
- }
- pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fgList);
- vpAll.setAdapter(pagerAdapter);
- }
- /**
- * 将viewpager和tabLayout之间的滑动事件和点击事件关联起来。
- * 此处不能使用tabLayout的setupWithViewPager()方法,否则会造成自定义view失效
- */
- private void initListener() {
- //添加关联接口,此处不能用自带的绑定方法,否则自定义view会失效
- vpAll.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
- @Override
- public void onPageScrolled(int i, float v, int i1) {
- }
- @Override
- public void onPageSelected(int i) {
- tabCustom.getTabAt(i).select();
- }
- @Override
- public void onPageScrollStateChanged(int i) {
- }
- });
- tabCustom.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
- @Override
- public void onTabSelected(TabLayout.Tab tab) {
- //viewpager联动
- vpAll.setCurrentItem(tab.getPosition());
- //将之前选中的tab标签,设置为未选中状态
- View oldView = customTabList.get(indicator);
- CheckBox oldCbName = (CheckBox) oldView.findViewById(R.id.cb_name);
- View oldCbSlide = oldView.findViewById(R.id.cb_slide);
- oldCbName.setChecked(false);
- oldCbSlide.setVisibility(View.INVISIBLE);
- //当前选中的tab标签,设置为选中状态。
- indicator = tab.getPosition();
- View newView = customTabList.get(indicator);
- CheckBox newCbName = (CheckBox) newView.findViewById(R.id.cb_name);
- View newCbSlide = newView.findViewById(R.id.cb_slide);
- newCbName.setChecked(true);
- newCbSlide.setVisibility(View.VISIBLE);
- }
- @Override
- public void onTabUnselected(TabLayout.Tab tab) {
- }
- @Override
- public void onTabReselected(TabLayout.Tab tab) {
- }
- });
- }
- /**
- * ViewPager的适配器。
- */
- class ViewPagerAdapter extends FragmentPagerAdapter {
- List<PageFragment> fragmentList;
- public ViewPagerAdapter(FragmentManager fm, List<PageFragment> fragmentList) {
- super(fm);
- this.fragmentList = fragmentList;
- }
- @Override
- public Fragment getItem(int position) {
- return fragmentList.get(position);
- }
- @Override
- public int getCount() {
- return fragmentList.size();
- }
- }
- /**
- * 获取自定义Tab标签的显示的内容
- *
- * @param context
- * @param
- * @return
- */
- public static View getCustomTabView(Context context, String text) {
- View view = LayoutInflater.from(context).inflate(R.layout.item_custom_tab, null);
- CheckBox tabText = (CheckBox) view.findViewById(R.id.cb_name);
- tabText.setText(text);
- return view;
- }
- }
pageFragment的代码和布局就不贴了。不想写的朋友可以看上一篇:我是传送门
布局文件
activity_main的布局文件
- <?xml version="1.0" encoding="utf-8"?>
- <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:orientation="vertical"
- tools:context="com.example.administrator.tablayoutdemo.MainActivity">
- <android.support.design.widget.TabLayout
- android:id="@+id/tab_custom"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- app:tabIndicatorHeight="0dp"
- app:tabMode="scrollable"
- />
- <android.support.v4.view.ViewPager
- android:id="@+id/vp_all"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
- </LinearLayout>
自定义tab标签的布局文件:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:paddingLeft="10dp"
- android:paddingRight="10dp"
- android:orientation="vertical"
- android:gravity="center"
- android:descendantFocusability="blocksDescendants">
- <CheckBox
- android:id="@+id/cb_name"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:button="@null"
- android:text=""
- android:textColor="@drawable/select_text_color"
- android:textSize="15sp"
- android:paddingTop="13dp"
- android:ellipsize="end"
- android:singleLine="true"
- android:maxEms="5"
- android:textStyle="bold"
- android:paddingBottom="13dp"
- android:clickable="false"
- />
- <View
- android:id="@+id/cb_slide"
- android:layout_width="20dp"
- android:layout_height="3dp"
- android:visibility="invisible"
- android:background="#ff4fbf86"/>
- </LinearLayout>
色值文件select_text_color,放在drawable目录下
- <?xml version="1.0" encoding="utf-8"?>
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:color="#ff4fbf86" android:state_checked="true"/>
- <item android:color="#BBBBBB" android:state_checked="false" />
- </selector>
讲解:
OK上完代码,针对关键点在做一次说明
1、标签在初始化的过程中,需要对第一个tab标签提前进行选中状态的初始化,否则可能会造成第一次启动的时候,第一个标签没有出现选中状态。
2、viewpager和TabLayout标签进行联动的时候,不可以使用TabLayout的setupWithViewPager()方法,而是要通过ViewPager的addOnPageChangeListener()和Tablayout的addOnTabSelectedListener()方法进行两个控件之间的联动效果。否则会造成自定义的CustomeTab被TabLayout默认生成的标签覆盖掉。
3、在布局文件中,需要将TabLayout的tabIndicatorHeight设为0。用来屏蔽掉控件自动生成的下滑线。
通过自定义的Tab标签可以完全实现自己控制tab标签的内容,这里就不展示tab标签做为底部导航栏的效果了。原理都是一样的。
TabLayout的高级使用的更多相关文章
- TabLayout基本使用
前言 Tablayout继承自HorizontalScrollView,可以用作顶部标签效果.底部导航栏效果.一般多与ViewPager一起使用. 想直接了解如何实现短下滑效果的请看:TabLayou ...
- 重磅推出TabLayout高级窗口组件
TabLayout是在APICloud现有窗口系统基础上升级而来的高级窗口组件,符合Material Design规范,可通过简单的配置为窗口实现原生的导航栏和TabBar,它将帮助您节省30%以上的 ...
- 高级UI晋升之常用View(三)中篇
更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从ViewPager来介绍常用View:文章目录 一.简介 二.基本使用 ...
- doT的高级用法及loadData的使用
本文出自APICloud官方论坛, 感谢论坛版主 gp3098的分享. 之前直接把模板写在页面底部的script标签内的,但是现在不同. 使用了doT.js配合api的loadData方法,整个页面就 ...
- MySQL高级知识- MySQL的架构介绍
[TOC] 1.MySQL 简介 概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同的表中,而 ...
- PayPal高级工程总监:读完这100篇论文 就能成大数据高手(附论文下载)
100 open source Big Data architecture papers for data professionals. 读完这100篇论文 就能成大数据高手 作者 白宁超 2016年 ...
- TabLayout + ViewPager
一.实现思路 1.在build.gradle中添加依赖,例如: compile 'com.android.support:support-v4:23.4.0'compile 'com.android. ...
- 马哥linux运维初级+中级+高级 视频教程 教学视频 全套下载(近50G)
马哥linux运维初级+中级+高级 视频教程 教学视频 全套下载(近50G)目录详情:18_02_ssl协议.openssl及创建私有CA18_03_OpenSSH服务及其相关应用09_01_磁盘及文 ...
- JS高级前端开发群加群说明及如何晋级
JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...
随机推荐
- [strongswan][autoconf][automake][cento] 在CentOS上编译strongswan git源码时遇到的autoconf问题
编译strongswan的git源码问题 1. 概述 首先,我们想要通过源码编译strongswan.当满足以下条件时,通常你会遇见此问题: 源码时通过git clone的得来的,而不是官网下载的源码 ...
- Autofac之类型关联
前面的学习一直使用的是直接注册类型并不是Autofac已经依赖注入的主要使用方式,最佳的依赖注入与Autofac的使用方式,都是要结合面向接口(抽象)编程的概念的.推崇的是依赖于抽象而不是具体 pub ...
- less命令查看文件时的常用操作
下键或者回车:往下一行 D:往下半页 空格和f:往下一页 上键:往上一行 B:往上一页 shift+G:直接切到末尾 ?+搜索条件:从下往上搜索 /+搜索条件:从上往下搜索
- coreseek/sphinx中的匹配模式
所谓匹配模式就是用户怎样依据keyword在索引库中查找相关的记录. SPH_MATCH_ALL, 匹配全部查询分词(默认模式); 如"手机配件".不匹配 "我有一部手机 ...
- 2018-2019-2 网络对抗技术 20165236 Exp6 信息搜集与漏洞扫描
2018-2019-2 网络对抗技术 20165236 Exp6 信息搜集与漏洞扫描 一.实验内容 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 ...
- JavaScript基本概念
JavaScript概念:JavaScript是一个弱类型语言,而且不要进行编译,是解释性语言.JavaScript最初是为了处理一些相较简单的数据验证,从而减少客户端与服务器端的通信提升效率,发展至 ...
- Azure基础(二)- 核心云服务 - Azure简介
Azure fundamentals - Core Cloud Services - Introduction to Azure Learn what Microsoft Azure is and h ...
- svg合并
假如页面有多个svg图标要加载,多次加载不利,可将多个svg合并为一个加载 如下有两个svg <svg xmlns="http://www.w3.org/2000/svg" ...
- hightopo学习之旅一 -- 节点动画
参照官网 动画手册 1.引入所需HT文件 <script src="plugins/ht/core/ht.js"></script> <script ...
- std::vector<bool> 在 auto 推断下的返回值是 bool & 引用
转自: https://www.cnblogs.com/hustxujinkang/p/5218148.html //////////// std::vector<bool> featur ...