android - 带徽章的 Tablayout 垂直标签布局

Question

我在一个小时的大部分时间里都遇到了这个特定布局的一些问题，而且我似乎无法按预期进行布局。我已经对标签的这种格式进行了通常的谷歌搜索，但似乎没有什么是我想要的。

我有一个 TabLayout，其中选项卡垂直排列，其中 ImageView 和 TextView 使用选项卡的默认 View 。

看起来像这样:

理想情况下，我想要做的就是模仿这种布局，并将 TextView 锚定为图标右上角的徽章计数器。

像这样:

因此，考虑到这一点，我找到了默认选项卡布局实际显示方式的近似值，并且它使用了默认 ID，因此我不必以编程方式分配它们，我认为这非常漂亮:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
  <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:layout_marginBottom="4dp"
      android:layout_marginTop="4dp">
    <ImageView
        android:id="@android:id/icon"
        android:layout_gravity="center"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:scaleType="centerInside" />
    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@drawable/tab_selector"
        android:ellipsize="end"
        android:textAllCaps="true"
        android:gravity="center"
        android:maxLines="2" />
  </LinearLayout>
  <TextView
      android:id="@+id/badgeCounter"
      android:layout_width="wrap_content"
      android:layout_height="20dp"
      android:minWidth="20dp"
      android:textAlignment="center"
      android:background="@drawable/count_background"
      android:textSize="15sp" />
</RelativeLayout>

经过大量的修补和尝试不同的事情，我得到了这个:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
    android:layout_marginBottom="4dp"
    android:layout_marginTop="4dp"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/iconFrame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_centerHorizontal="true"
        android:layout_above="@android:id/text1">
        <ImageView
            android:id="@android:id/icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:scaleType="centerInside"
            android:src="@drawable/tab_home" />
    </FrameLayout>
    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@drawable/tab_selector"
        android:ellipsize="end"
        android:textAllCaps="true"
        android:gravity="center"
        android:maxLines="2"
        android:text="Home"
        android:layout_marginBottom="7dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true" />
    <TextView
        android:id="@+id/badgeCounter"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:minWidth="20dp"
        android:layout_toRightOf="@+id/iconFrame"
        android:textColor="@color/FeatureFontColour"
        android:textAlignment="center"
        android:background="@drawable/count_background"
        android:textSize="15sp"
        android:layout_alignTop="@+id/iconFrame" />
</RelativeLayout>

无论我尝试什么，我都无法让徽章 TextView 出现在正确的位置，我已经尝试删除线性布局，以便我可以将它设置为 @android:id/icon 的 Layout_RightOf，我'我已经尝试将图标包装在一个框架中并设置 Layout_RightOf 以防在创建徽章 TextView 之前图标未定位等。

这是我能得到的最接近的(剧透，不是那么接近):

任何帮助将不胜感激，我不确定我到底错过了什么，但很可能这是非常明显的事情。

Answer 1

试试这个:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
  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="wrap_content"
  android:layout_marginBottom="4dp"
  android:layout_marginTop="4dp"
  android:clipChildren="false"
  android:layout_height="match_parent">
  <FrameLayout
    android:id="@+id/iconFrame"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:clipToPadding="false"
    android:layout_marginBottom="2dp"
    android:layout_centerHorizontal="true"
    android:clipChildren="false"
    android:layout_above="@android:id/text1">
    <ImageView
        android:id="@android:id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:scaleType="centerInside"
        android:src="@drawable/tab_home" />
    <TextView
        android:id="@+id/badgeCounter"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:minWidth="20dp"
        android:textColor="@color/FeatureFontColour"
        android:textAlignment="center"
        android:background="@drawable/count_background"
        android:layout_gravity="right"
        android:layout_marginRight="-10dp"
        android:layout_marginTop="-10dp"
        android:textSize="15sp"/>
   </FrameLayout>
   <TextView
    android:id="@android:id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@drawable/tab_selector"
    android:ellipsize="end"
    android:textAllCaps="true"
    android:gravity="center"
    android:maxLines="2"
    android:text="Home"
    android:layout_marginBottom="7dp"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true" />
 </RelativeLayout>

您可以使用 margin right/top 值来微调它。