如何在android中自定义tablayout

Question

如何像这张图片一样制作标签布局我试图自定义它，但它没有做我想要的

Answer 1

创建布局文件bottom_controller_layout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             tools:context="com.reflectionsinfos.arn.home.BottomControllerFragment">

    <include
        layout="@layout/bottom_controller"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</FrameLayout>

创建bottom_controller

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

    <LinearLayout
        android:id="@+id/BottomLinearLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/footer_view_button_layout_height"
        android:layout_gravity="bottom"
        android:background="@color/colorAccent"
        android:orientation="horizontal"
        android:weightSum="1">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:gravity="left"
            android:orientation="horizontal"
            android:paddingBottom="@dimen/smallest_margins"
            android:paddingTop="@dimen/smallest_margins"
            android:weightSum="1">

            <com.reflectionsinfos.arn.ui.CustomRadioButton
                android:id="@+id/tab_info"
                style="@style/footerTheme"
                android:button="@null"
                android:minLines="2"
                android:gravity="center"
                android:drawableTop="@drawable/footer_info_drawable"
                android:text="@string/info"/>

            <com.reflectionsinfos.arn.ui.CustomRadioButton
                android:id="@+id/tab_second_screen"
                style="@style/footerTheme"
                android:button="@null"
                android:minLines="2"
                android:gravity="center"
                android:drawableTop="@drawable/footer_second_screen_drawable"
                android:text="@string/second_screen"/>

        </LinearLayout>

        <View
            android:layout_width="@dimen/footer_view_height"
            android:layout_height="@dimen/footer_view_height"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:layout_weight=".5"
            android:orientation="horizontal"
            android:paddingBottom="@dimen/smallest_margins"
            android:paddingTop="@dimen/smallest_margins"
            android:weightSum="1">

            <com.reflectionsinfos.arn.ui.CustomRadioButton
                android:id="@+id/tab_top_songs"
                style="@style/footerTheme"
                android:button="@null"
                android:minLines="2"
                android:gravity="center"
                android:drawableTop="@drawable/footer_top_songs_drawable"
                android:text="@string/songs"/>

            <com.reflectionsinfos.arn.ui.CustomRadioButton
                android:id="@+id/tab_poems"
                style="@style/footerTheme"
                android:button="@null"
                android:minLines="2"
                android:gravity="center"
                android:drawableTop="@drawable/footer_poems_drawable"
                android:text="@string/poems"/>

        </LinearLayout>

    </LinearLayout>

    <FrameLayout
        android:layout_width="@dimen/footer_view_height"
        android:layout_height="@dimen/footer_view_height"
        android:layout_gravity="center">

        <com.reflectionsinfos.arn.ui.TintableImageButton
            android:id="@+id/button_play_pause_radio"
            android:layout_width="@dimen/footer_view_height"
            android:layout_height="@dimen/footer_view_height"
            android:layout_gravity="center"
            android:background="@null"
            android:src="@drawable/ic_radio_play"/>

        <ImageView
            android:id="@+id/shake_image"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_gravity="right|center_vertical"
            android:src="@drawable/ic_music"
            android:visibility="gone"/>
        <com.reflectionsinfos.arn.ui.EqualizerView
            xmlns:custom="http://schemas.android.com/apk/res-auto"
            android:id="@+id/equalizer_view"
            android:layout_width="@dimen/equalizer_view_dimen"
            android:layout_height="@dimen/equalizer_view_dimen"
            android:layout_gravity="center"
            android:layout_margin="@dimen/medium_margins"
            android:background="@drawable/equalizer_bg"
            android:clickable="true"
            android:paddingBottom="@dimen/equalizer_margin"
            android:paddingLeft="@dimen/equalizer_margin"
            android:paddingRight="@dimen/equalizer_margin"
            android:visibility="gone"
            custom:animDuration="4500"
            custom:foregroundColor="@android:color/black"/>

        <ProgressBar
            android:id="@+id/progressbar_radio"
            android:layout_width="@dimen/small_progressbar_dimen"
            android:layout_height="@dimen/small_progressbar_dimen"
            android:layout_gravity="center"
            android:visibility="gone"/>
    </FrameLayout>
</FrameLayout>

Answer 2

1. 设计自定义布局选项卡的方式。

2

final查看customTab = getLayoutInflater（）。inflate（R.layout.test，null）;

tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tablayout.getTabAt(tab.getPosition()).setCustomView(customTab);
        }

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

        }

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

        }
    });