前言

　　Tablayout一般做主页底下的导航栏开发或者上面的选择栏开发,就个人感觉Tablayout用于主页导航栏会比BottomNavigationView更好,自定义方面也更容易.缺点是没有动画也不是Material Design设计模式的一部分.下面就讲解用于有导航栏的主页开发:

　　一般主页导航栏与内容用Tablayout与Fragment配合使用

　　1.第一种Tablayout+ViewPager+Fragment,好处是可以左右滑动不需要自己实现滑动,并且可以有动画出现

　　2.第二种Tablayout+Fragment,如果你不需要左右滑动就可以轻松的选择这个模式.

在xml里

　　因为有2种添加Item的方式,所以写法也可以是2个种

　　第一种,这种方法可以直接配置Item的名称属性，注意！这种方法还可以设置图标android:icon=

<com.google.android.material.tabs.TabLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabItem

            android:layout_width="wrap_content"

            android:layout_height="wrap_content" />

        <com.google.android.material.tabs.TabItem

            android:layout_width="wrap_content"

            android:layout_height="wrap_content" />

    </com.google.android.material.tabs.TabLayout>

第二种,这种需要自己在代码里添加子Item,并且可以实现自定义布局和View的Item(下面会说明在代码里添加Item)

<com.google.android.material.tabs.TabLayout

        android:id="@+id/tablayout"

        android:layout_width="0dp"

        android:layout_height="56dp"

        app:tabIndicatorHeight="0dp"

        app:tabBackground="@android:color/transparent"

        app:tabRippleColor="@android:color/transparent"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent">

    </com.google.android.material.tabs.TabLayout>

代码部分讲解

方式1.如果你需要与ViewPager配合使用,那么你需要知道下面的关键代码

ContentFragment fragment1 = new ContentFragment();

ContentFragment fragment2 = new ContentFragment();

ContentFragment fragment3 = new ContentFragment();

ContentFragment fragment4 = new ContentFragment(); 
fragments.add(fragment1); 
fragments.add(fragment2); 
fragments.add(fragment3); 
fragments.add(fragment4);

adapter = new FragmentAdapter(getSupportFragmentManager(), fragments); 
viewpager.setAdapter(adapter);

tablayout.setupWithViewPager(viewpager);

tablayout.setupWithViewPager(viewpager);是关键,负责连接ViewPager与Tablayout,当然选择的适配器FragmentAdapter也是关键。

也可以使用FragmentStatePagerAdapter与FragmentPagerAdapter 这2个适配器， FragmentStatePagerAdapter适合在页面很多的情况下使用因为它会清理一些已经滑动走的Fragment，而FragmentPagerAdapter会保存所有Fragment

方式2.如果你是需要自定义Item(下面用创建Tab的方式添加到TabLayout里,就前面说的代码里添加Item)

private void addTabData() {

　　　mTablayout = findViewById(R.id.tablayout);

        String[] tabContentArray = {"首页", "通知", "圈子", "我的"};

        int[] tabIconArray = {R.drawable.ic_home_homepage, R.drawable.ic_home_notice, R.drawable.ic_home_circle, R.drawable.ic_home_my};

        for (int i = 0; i < 4; i++) {

            TabLayout.Tab tab = mTablayout.newTab();//关键的创建一个Tab,注意这里使用的是已经实例的mTablayout创建的Tab,很容易疏忽使用new Tablayout().new Tab()的方式创建,这个是会报错的.

            View view = LayoutInflater.from(this).inflate(R.layout.home_tab_item,mTablayout,false);

            ImageView icon = view.findViewById(R.id.icon);

            TextView content = view.findViewById(R.id.content);

            icon.setImageResource(tabIconArray[i]);

            content.setText(tabContentArray[i]);

            tab.setCustomView(view);

            if (i == 0){

                mTablayout.addTab(tab,0,true);//设置选择的item

            }else {

                mTablayout.addTab(tab);

            }

        }

    }

home_tab_item.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:orientation="vertical"

    android:layout_width="35dp"

    android:layout_height="wrap_content">

    <TextView

        android:id="@+id/red_dot"

        android:layout_width="10dp"

        android:layout_height="10dp"

        android:background="@drawable/bg_reddot"

        app:layout_constraintTop_toTopOf="@id/icon"

        app:layout_constraintLeft_toRightOf="@id/icon"

        app:layout_constraintRight_toRightOf="@id/icon"/>

    <ImageView

        android:id="@+id/icon"

        android:layout_width="24dp"

        android:layout_height="24dp"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"/>

    <TextView

        android:id="@+id/content"

        android:textColor="@color/fontColorMain2"

        android:textSize="@dimen/font_size_11"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="2dp"

        app:layout_constraintTop_toBottomOf="@id/icon"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

ic_home_homepage.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@mipmap/ic_home_page_select"/>

    <item android:state_selected="false" android:drawable="@mipmap/ic_home_page"/>

</selector>

实现图片的选中变化

Tablayout选中回调

private void initTablayoutListener(){

        mTablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            @Override

            public void onTabSelected(TabLayout.Tab tab) {

                //选中某个tab

            }

            @Override

            public void onTabUnselected(TabLayout.Tab tab) {

                //当tab从选择到未选择

            }

            @Override

            public void onTabReselected(TabLayout.Tab tab) {

                //已经选中tab后的重复点击tab

            }

        });

    }

XML属性讲解

设置Tab的TextSize

首先你需要在styles.xml文件里创建这个文字属性的styles

<style name="TabLayoutTextStyle">

    <item name="android:textSize">@dimen/font_size_16</item>

</style>

然后在使用以下属性导入styles

app:tabTextAppearance="@style/TabLayoutTextStyle"

如果你不需要选中下划线,可以使用这个属性取消

app:tabIndicatorHeight="0dp"

如果你不需要点击后的阴影加涟漪动画效果,可以使用下面2个属性取消

app:tabBackground="@android:color/transparent"

app:tabRippleColor="@android:color/transparent"

app:tabIndicatorColor ：指示线的颜色

app:tabIndicatorHeight ：指示线的高度

app:tabIndicatorFullWidth="false" ：指示线是否铺满整个tab宽度，可以配合实现圆角

app:tabSelectedTextColor ： tab选中时的字体颜色

app:tabTextColor="@color/colorPrimary" ：未选中字体颜色

app:tabBackground="color" ：整个tab的背景颜色

app:tabMode="scrollable" ：默认是fixed，固定的；scrollable：可滚动的

app:tabMaxWidth="0dp" ：tab的最大宽度

app:tabMinWidth="0dp" ：tab的最小宽度

app:tabPaddingTop="0dp" ：tab上内边距

app:tabPadding="0dp" ：tab的内边距

app:tabGravity="center" ：tab的位置

app:tabIndicator= : 自定义指示线，注意！这里的指示线其实是android:state_selected="true"的选中状态，所以如果单单写一个shape的xml文件设置是无法显示的,需要在写一个选中状态的xml。参考如下：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:bottom="8dp"

        android:left="8dp"

        android:right="8dp"

        android:top="8dp"> <!-- 设置边距 -->

        <shape> <!-- 设置圆角 -->

            <corners android:radius="5dp" /> <!-- 设置边框 -->

            <stroke

                android:width="1dp"

                android:color="@color/colorAccent" />

        </shape>

    </item>

</layer-list>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/indicator" android:state_selected="true" />

</selector>

app:tabTextAppearance="@style/tab_layout_item_text" ：改变字体大小颜色等等，style参考如下：

    <style name="tab_layout_item_text">

        <item name="android:textSize">16sp</item>

        <item name="android:textColor">@color/color_18</item>

    </style>

以下是从View的源码里复制来的属性,以下属性仅做参考,有些并没有提供方法设置.比如tabTextSize 有归有,但是人家不提供方法设置..除非自己继承重写

int tabPaddingStart;
int tabPaddingTop;
int tabPaddingEnd;
int tabPaddingBottom;
int tabTextAppearance;
android.content.res.ColorStateList tabTextColors;
android.content.res.ColorStateList tabIconTint;
android.content.res.ColorStateList tabRippleColorStateList;
@androidx.annotation.Nullable
android.graphics.drawable.Drawable tabSelectedIndicator;
android.graphics.PorterDuff.Mode tabIconTintMode;
float tabTextSize;
float tabTextMultiLineSize;
final int tabBackgroundResId;
int tabMaxWidth;
private final int requestedTabMinWidth;
private final int requestedTabMaxWidth;
private final int scrollableTabMinWidth;
private int contentInsetStart;
int tabGravity;
int tabIndicatorAnimationDuration;
int tabIndicatorGravity;
int mode;
boolean inlineLabel;
boolean tabIndicatorFullWidth;
boolean unboundedRipple;

补充内容

在代码里选中某一个TabItem

mTabLayout.getTabAt(0).select();

你从select()方法就可以看出.就是希望你使用select()方法来切换item

end

app:tabPaddingTop="0dp"
app:tabPaddingStart="0dp"

Android开发 Tablayout的学习

前言

在xml里

代码部分讲解

方式1.如果你需要与ViewPager配合使用,那么你需要知道下面的关键代码

方式2.如果你是需要自定义Item(下面用创建Tab的方式添加到TabLayout里,就前面说的代码里添加Item)

Tablayout选中回调

XML属性讲解

补充内容

在代码里选中某一个TabItem

Android开发 Tablayout的学习的相关教程结束。

相关推荐

android蓝牙开发要注意哪些事项

android颜色选择器怎么使用

android颜色渐变动画怎么实现

Android首选项框架ListPreference怎么用

Android中MVI框架的用法是什么

Android中MVI框架的功能有哪些

Android中MVI框架的特点有哪些

Android数据加密与安全存储的方法是什么