时间戳

首页 > 解决方案 > 在 TabLayout 中的选项卡之间添加空格

android-studio - 在 TabLayout 中的选项卡之间添加空格

问题描述

我正在尝试在选项卡之间添加空格。

这是目前的样子

我想在选项卡之间添加间隙，我尝试使用填充，但这会更改整个选项卡布局填充，而不是单个选项卡。我也尝试过其他方法，例如 minWidth，在寻找一个想法但无法弄清楚的时候，所以我在这里。当我创建选项卡式布局活动时，大部分项目都是默认的，这是我添加/更改的代码：

提前致谢。

tab_background

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <corners
        android:radius="18dp"/>
    <!-- TabLayout background color -->
    <solid
        android:color="@color/colorPrimaryDark"/>

</shape>

tab_selected

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- radius should be half of the desired TabLayout height -->
    <corners
        android:radius="18dp"/>
    <!-- color of the selected tab -->
    <solid
        android:color="@color/colorWhite"/>



</shape>

tab_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- drawable for selected tab -->
    <item
        android:drawable="@drawable/tab_selected"
     android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"

    android:state_selected="true"/>
    <!-- drawable for unselected tab -->
    <item
        android:drawable="@drawable/tab_background"
        android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"

        android:state_selected="false"/>

</selector>

活动主

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        >

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:gravity="top|center_horizontal"
            android:minHeight="?actionBarSize"
            android:padding="@dimen/appbar_padding"
            android:text="@string/app_name"
            android:fontFamily="@font/sofiabold"
            android:background="@color/colorPrimary"
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:tabTextColor="@color/colorWhite"
            app:tabMode="auto"
            app:tabGravity="center"
            android:layout_gravity="center"
            android:background="@color/colorPrimary"
            app:tabBackground="@drawable/tab_selector"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabPaddingStart="16dp"
            app:tabPaddingEnd="16dp"
            android:paddingBottom="20dp"
            app:tabIndicatorHeight="0dp"
            app:tabRippleColor="@null"
            app:tabTextAppearance="@style/TabTextAppearance"/>
    </com.google.android.material.appbar.AppBarLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

标签： android-studioandroid-tablayout

解决方案

您应该使用专门为此目的设计的 xml drawable - Inset Drawable：http: //developer.android.com/guide/topics/resources/drawable-resource.html#Inset

例如：

res/drawable/tab_selector_inset.xml：

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/tab_selector"
    android:insetRight="10dp"
    android:insetLeft="10dp" />

并将其用于您的TabLayout：

app:tabBackground="@drawable/tab_selector_inset"

（灵感来自瓦西里·索钦斯基）

推荐阅读