Android Tablayout タブに WhatsApp のような通知バッジを表示する質問する

Question

編集: 更新

の最新リリースではMaterial Components、Android チームは、要求された結果を達成するためBadgeDrawableにで使用する公式のを提供していますTabLayout。これは、v1.1.0-alpha07 アップデートの一部です。https://github.com/material-components/material-components-android/releases/tag/1.1.0-alpha07

使い方は非常に簡単で、次のように実行できます。

tabLayout.getTabAt(0).showBadge().setNumber(1);

マテリアルコンポーネントのデモアプリでの統合をご覧ください。https://github.com/material-components/material-components-android/commit/111cd001f5302bd6899f181ab7ccea2fd4002f63#diff-bf3e9a8a208f0ecab05088823fba99c4R239

古い答え

上記の解決策をいくつか試してみましたが、適切な結果は得られませんでした。実装を詳しく調べると、が適用されている場合は、textView と iconView を取得しようとしていることTabLayoutがわかります。TabViewCustomView

そのため、ハッキーな実装を行う代わりに、元のレイアウトと同じレイアウトでTabView、バッジを表示できる追加のビューを考案しました。

そのため、badged_tab.xmlレイアウトが必要になります

<?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:layout_marginBottom="4dp"
        android:layout_marginTop="4dp">

        <ImageView
            android:id="@android:id/icon"
            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:ellipsize="end"
            android:gravity="center"
            android:maxLines="2" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/badgeCotainer"
        android:layout_width="wrap_content"
        android:layout_height="16dp"
        android:layout_marginStart="12dp"
        android:background="@drawable/notifications_background"
        android:gravity="center"
        android:minWidth="16dp"
        android:visibility="gone">

        <TextView
            android:id="@+id/badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:textColor="#fff"
            android:textSize="10sp" />
    </LinearLayout>
</RelativeLayout>

そして、何らかの通知背景:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/red" />
</shape>

プログラムでタブを追加する場合は、

tab.setCustomView(R.layout.badged_tab);

そして、いつでも次の方法でバッジカウントを表示/非表示/設定できます。

if(tab != null && tab.getCustomView() != null) {
    TextView b = (TextView) tab.getCustomView().findViewById(R.id.badge);
    if(b != null) {
        b.setText(notifications + "");
    }
    View v = tab.getCustomView().findViewById(R.id.badgeCotainer);
    if(v != null) {
        v.setVisibility(View.VISIBLE);
    }
}

Answer 1