顶部页卡效果（TabLayout 官方版）

作者: KT_11 | 来源:发表于2018-05-10 09:38 被阅读38次

顶部页卡效果（TabLayout 官方版）
实现大众点评列表页快速引导功能
TabLayout+ViewPager+Fragment
底部Tab+FrameLayout嵌套CoordinatorLa
TabLayout+ViewPager实现顶部导航切换页面效果
RecyclerView首个Item滑到顶部渐变
Android快速开发库之TabLayout
TabLayout实现切换更新顶部icon+自定义tab长度
TableLayout-顶部导航栏
TabLayout+ViewPager+Toolbar实现顶部标

常见的顶部页卡效果实现（下面三种实现方式足以应付大部分需求）：
稳定版：ViewPager + Fragment （自己来写，简单，适用特殊需求）
官方版：TabLayout（官方推出，MD风格，但不适用下划线圆角等特殊需求）
特效版：MagicIndicator（国人开源项目，加了动画特效）

先直接看实例，然后再介绍一下TabLayout相关属性

1 TabLayout使用案例

ViewPager + TabLayout + Fragment

首先在build.gradle中引入
compile 'com.android.support:design:24.0.0'
准备好简单的Fragment

package com.example.administrator.myapplication;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class MyFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_layout, container, false);
    }
}

Fragment布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30sp"
        android:gravity="center"
        android:textColor="#000000"
        android:text="Fragment"/>

</FrameLayout>

再来看MainActivity的布局，可以看到放入了TabLayout和ViewPager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

最后来看MainActivity的代码

注释写的非常清楚了，基本上就是建立fragment与ViewPager关联，addTab添加Tab页，addOnTabSelectedListener监听，以及调用setupWithViewPager实现ViewPager与TabLayout的关联，最后不要忘记FragmentPagerAdapter 的getPageTitle方法（否则你的Tab上的文字可能会无法显示，原因文章尾部有写）

package com.example.administrator.myapplication;

import android.os.Bundle;
import android.support.annotation.Nullable;
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.util.Log;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    public static final String TAG = "TabActivity";
    public static final String[] sTitle = new String[]{"第一页", "第二页", "第三页"};
    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    //初始化
    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        //添加fragment
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(new MyFragment());
        fragments.add(new MyFragment());
        fragments.add(new MyFragment());
        //适配器
        MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(), fragments);
        //viewPager关联适配器
        mViewPager.setAdapter(adapter);
        //添加TAB
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[0]));
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[1]));
        mTabLayout.addTab(mTabLayout.newTab().setText(sTitle[2]));
        //TabLayout添加监听: 选中、未选中、再次选中
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.i(TAG, "onTabSelected:" + tab.getText());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        //tabLayout与viewPager关联
        mTabLayout.setupWithViewPager(mViewPager);
    }


    class MyFragmentAdapter extends FragmentPagerAdapter {

        private List<Fragment> fragmentList;

        public MyFragmentAdapter(FragmentManager fm, List<Fragment> list) {
            super(fm);
            fragmentList = new ArrayList<>();
            fragmentList.addAll(list);
        }

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

        @Override
        public int getCount() {
            return fragmentList.size();
        }

        //别忘记这个方法
        @Override
        public CharSequence getPageTitle(int position) {
            return sTitle[position];
        }
    }
}

运行效果

2 TabLayout属性

2.1 简介

image

2.2 相关属性

app:tabBackground — 设置的背景。 
app:tabContentStart — 相对起始位置tab的Y轴偏移量。 
app:tabGravity — tab的布局方式，两个值GRAVITY_CENTER （内容中心显示） 和 GRAVITY_FILL （内容尽可能充满TabLayout）。 
app:tabIndicatorColor — 设置tab指示器(tab的下划线)的颜色。 
app:tabIndicatorHeight — 设置tab指示器(tab的下划线)的高度。 
app:tabMaxWidth — 设置tab选项卡的最大宽度。 
app:tabMinWidth — 设置tab选项卡的最小宽度。 
app:tabMode — 设置布局中tab选项卡的行为模式，两个常量MODE_FIXED （固定的tab）和 MODE_SCROLLABLE（滑动的tab）。 
app:tabPadding — 设置tab的内边距（上下左右）。 
app:tabPaddingBottom — 设置tab的底部内边距。 
app:tabPaddingEnd — 设置tab的右侧内边距。 
app:tabPaddingStart — 设置tab的左侧内边距。 
app:tabPaddingTop — 设置tab的上方内边距。 
app:tabSelectedTextColor — 设置tab被选中时的文本颜色。 
app:tabTextColor — 设置tab默认的文本颜色。 
app:tabTextAppearance — 设置tab的TextAppearance样式的引用

介绍一下几种常用的属性和用法：

改变选中字体颜色

app:tabSelectedTextColor="@android:color/holo_orange_light"

改变未选中字体的颜色

app:tabTextColor="@color/colorPrimary"

改变指示器下标的颜色

app:tabIndicatorColor="@android:color/holo_orange_light"

改变整个TabLayout的颜色

app:tabBackground="color"

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"

改变指示器下标的高度

app:tabIndicatorHeight="4dp"

给Tab添加图标

tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

改变Tab的模式

app:tabMode="scrollable" //可滑动的，当标签很多的时候可左右滑动，不影响体验
app:tabMode="fixed" //默认是fixed，固定的，当标签很多的时候会被挤压

设置TabLayout子控件内部的padding

app:tabPadding="3dp"
app:tabPaddingTop="3dp"
app:tabPaddingStart="3dp"
app:tabPaddingEnd="3dp"
app:tabPaddingBottom="3dp"

设置整个TabLayout的padding

app:paddingEnd="3dp"
app:paddingStart="3dp"

内容显示模式

app:tabGravity="center"//居中

Tab的宽度限制

app:tabMaxWidth="3dp" //最大宽度
app:tabMinWidth="3dp" //最小宽度

Tab的Margin

app:tabContentStart="100dp"

TabLayout选中每个Tab的监听事件

 tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        //选中
        public void onTabSelected(TabLayout.Tab tab) {
            viewPager.setCurrentItem(tab.getPosition());
        }
        //未选中
        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }
        //再次选中
        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

与ViewPager联动

tabLayout.setupWithViewPager(Viewpager);

2.3 Tab添加方法

方法一：布局中加入TabLayout，代码中加入Tab子项

布局文件中声明一个TabLayout

<android.support.design.widget.TabLayout
          android:id="@+id/tabLayout"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"/>

在Java代码里添加每个Tab页

tabLayout= (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

效果如下：

方法二：布局中加入TabLayout，同时加入Tab子项控件TabItem

<android.support.design.widget.TabLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
      <android.support.design.widget.TabItem
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Tab1"/>
          ...
</android.support.design.widget.TabLayout>

3 可能出现的问题

问题：TabLayout与Viewpager绑定后TAB上的文字不显示
原因：自身源码导致

解决方法：
在viewpager的adapter中重写getPagerTitle（）方法返回你需要的标题

@Override
public CharSequence getPageTitle(int position) {
        return titles[position];
}

参考：

https://www.jianshu.com/p/2b2bb6be83a8
https://blog.csdn.net/m0_37168878/article/details/73326095
https://blog.csdn.net/sundy_tu/article/details/52682246

顶部页卡效果（TabLayout 官方版）
常见的顶部页卡效果实现（下面三种实现方式足以应付大部分需求）：稳定版：ViewPager + Fragment （...
实现大众点评列表页快速引导功能
效果如图展示：1.TabLayout 跟着列表移动，直到滚到顶部2.列表滚动到对应的内容上时，TabLayout会...
TabLayout+ViewPager+Fragment
上图效果的实现，主要从以下两个链接学习而来：TabLayout轻松实现仿今日头条顶部tab导航效果Android ...
底部Tab+FrameLayout嵌套CoordinatorLa
顶部伸缩效果现在要实现这么一个效果，有一个标题栏（或者其他控件），下面是tablayout+viewpager，...
TabLayout+ViewPager实现顶部导航切换页面效果
引言现如今很多app都在使用顶部导航栏效果，用于多界面的频繁切换，今天我们就来使用TabLayout+Vie...
RecyclerView首个Item滑到顶部渐变
RecyclerView 首个Item顶部渐变效果抖音“新鲜”Tab页上有个效果比较有意思，当Item滑到顶部的...
Android快速开发库之TabLayout
一、效果展示 1. 效果图 2. 关联ViewPage 3. TabLayout固定选项卡或可滚动选项卡 4. T...
TabLayout实现切换更新顶部icon+自定义tab长度
TabLayout实现切换更换顶部图标按钮 1.添加依赖布局文件就是TabLayout+Viewpager搭配使...
TableLayout-顶部导航栏
本文所说的 TabLayout 是指 design 包下的一、概述 TabLayout 主要用于顶部导航栏，是属...
TabLayout+ViewPager+Toolbar实现顶部标
一、简介这个是在上一篇个Demo的升级版：TabLayout和ViewPager实现顶部标签页，在这次中会加入T...

顶部页卡效果（TabLayout 官方版）

1 TabLayout使用案例

2 TabLayout属性

2.1 简介

2.2 相关属性

2.3 Tab添加方法

3 可能出现的问题

参考：

相关文章

顶部页卡效果（TabLayout 官方版）

实现大众点评列表页快速引导功能

TabLayout+ViewPager+Fragment

底部Tab+FrameLayout嵌套CoordinatorLa

TabLayout+ViewPager实现顶部导航切换页面效果

RecyclerView首个Item滑到顶部渐变

Android快速开发库之TabLayout

TabLayout实现切换更新顶部icon+自定义tab长度

TableLayout-顶部导航栏

TabLayout+ViewPager+Toolbar实现顶部标

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android_花式组件，自定义组件

顶部页卡效果 （TabLayout 官方版）

1 TabLayout使用案例

2 TabLayout属性

2.1 简介

2.2 相关属性

2.3 Tab添加方法

3 可能出现的问题

参考：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

顶部页卡效果（TabLayout 官方版）