帶有通知徽章的 Android Tablayout 選項卡，例如 WhatsApp

Question

我想用android.support.design.widget.TabLayout實現通知徽章。 我已經盡了最大的努力來實現它，但失敗了。

任何幫助將不勝感激。

Answer 1

編輯：更新

隨着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

---

舊答案

我嘗試了上面提到的一些解決方案，但它們沒有提供正確的結果。 如果您仔細查看TabLayout實現，您會發現TabView將嘗試從CustomView獲取 textView 和 iconView（如果應用）。

因此，我沒有做一些 hacky 的實現，而是想出了一個與原始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 2

我建議你看看這個網站：

https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library

您可以使用此方法遍歷不同的選項卡並將自定義視圖設置為您想要的任何內容：

  // Iterate over all tabs and set the custom view
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(pagerAdapter.getTabView(i));
    }

public View getTabView(int position) {
    // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
    View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
    TextView tv = (TextView) v.findViewById(R.id.textView);
    tv.setText(tabTitles[position]);
    ImageView img = (ImageView) v.findViewById(R.id.imgView);
    img.setImageResource(imageResId[position]);
    return v;
}

}

Answer 3

我對此的解決方案是使用https://github.com/jgilfelt/android-viewbadger並為每個選項卡設置自定義視圖：

我的標簽只有圖標，所以我使用了 ImageView，但我相信您可以使用任何其他視圖，請查看https://github.com/jgilfelt/android-viewbadger/blob/master/README.markdown ：

private BadgeView badge;

---

Tab tab = tabLayout.getTabAt(position);
ImageView imageView = new ImageView(context);
tab.setCustomView(imageView);
badge = new BadgeView(context, imageView);

Answer 4

這是一個古老的提示，但如今它變得更加簡單。 我使用 Kotlin，AndroidX，使用下一個小部件作為 TabLayout：

com.google.android.material.tabs.TabLayout

在我的 Gradel 應用程序文件中：

implementation 'com.google.android.material:material:1.1.0-alpha09'

要設置一個簡單的徽章，只需寫..

yourTabLayout?.getTabAt(currentTabPosition)?.apply{
                        orCreateBadge
                        badge?.isVisible = true
                    }

然后只需設置 isVisible = false 即可隱藏，如下所示：

private fun changeYourTabMethod(newTabPosition : Int) {
    // do some stuff and then hide the badge...
    yourTabLayout?.getTabAt(newTabPosition)?.apply{
        badge?.isVisible = false
    }
}

Answer 5

我會用這個：

  tabLayout.getTabAt(0).getOrCreateBadge().setNumber(10);

Answer 6

我不知道為什么，但以上答案都不適合我:(

我有我自己的解決方案，它將制作與帶有該徽章的 whatsapp 相同的 tablayout :)

首先將自定義選項卡布局設置為 custom_tab

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:padding="12dp">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Calls"
        android:textColor="@drawable/tab_text_color_selector"
        android:textSize="@dimen/large_text" />

    <TextView
        android:id="@+id/tv_count"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginLeft="6dp"
        android:background="@drawable/badge_background"
        android:gravity="center"
        android:text="99"
        android:textColor="@color/colorPrimary"
        android:textSize="@dimen/medium_text" />

</LinearLayout>

</RelativeLayout>

第二個badge_background

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

第三個 tab_color_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/colorTextPrimary"android:state_selected="true" />
<item android:color="@color/colorAccent"/>
 </selector>

活動中的第四名

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setOffscreenPageLimit(3);
    setupViewPager(viewPager);

    //Initializing the tablayout
    tabLayout = (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setupWithViewPager(viewPager);

    try
    {
        setupTabIcons();
    }
    catch (Exception e)
    {
        e.printStackTrace();
    }

五、定義 setupTabIcons 和 prepareTabView 方法

  private void setupTabIcons()
{

    for(int i=0;i<tabTitle.length;i++)
    {
        /*TabLayout.Tab tabitem = tabLayout.newTab();
        tabitem.setCustomView(prepareTabView(i));
        tabLayout.addTab(tabitem);*/

        tabLayout.getTabAt(i).setCustomView(prepareTabView(i));
    }
    }

 String[] tabTitle={"LOL!","LOL@","LOL#"};
int[] unreadCount={1,3,3};

private View prepareTabView(int pos) {
    View view = getLayoutInflater().inflate(R.layout.custom_tab,null);
    TextView tv_title = (TextView) view.findViewById(R.id.tv_title);
    TextView tv_count = (TextView) view.findViewById(R.id.tv_count);
    tv_title.setText(tabTitle[pos]);
    if(unreadCount[pos]>0)
    {
        tv_count.setVisibility(View.VISIBLE);
        tv_count.setText(""+unreadCount[pos]);
    }
    else
        tv_count.setVisibility(View.GONE);


    return view;
    }

我可能在回答這個問題時留下了一些東西，只要 ping 我，我很樂意提供幫助：D

Answer 7

答案在2022 年工作

您好，我回答有點晚了，但是到目前為止，使用 Material 組件，您不必尋找任何自定義視圖或第三方庫

我正在使用com.google.android.material.tabs.TabLayout和androidx.viewpager2.widget.ViewPager2並且工作正常

val requestsTab = viewBinding.tabLayout.getTabAt(2)
            val orCreateBadge = requestsTab?.orCreateBadge
            orCreateBadge?.number=10
            orCreateBadge?.backgroundColor = resources.getColor(R.color.blue,context?.theme)
            orCreateBadge?.badgeTextColor =  resources.getColor(R.color.white,context?.theme)

Answer 8

只需使用這個技巧：

BadgeView bv1 = new BadgeView(this, ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(0));

Answer 9

在科特林，作品：

if(list.isNotEmpty()) {
    mTlSaved.getTabAt(0)?.orCreateBadge?.number = list.size
}

Answer 10

binding.tabLayout.getTabAt(0)?.orCreateBadge?.number = 5

Answer 11

我建議對標簽使用 CustomView。 您可以使用徽章創建一個新視圖並將其設置為您的選項卡。

tab.setCustomView(R.layout.badged_tab);

Answer 12

也有簡單的方法。 只需在后面附加一個特殊字符。 它看起來就像whatsapp一樣。

➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓

tabLayout.addTab(tabLayout.newTab().setText("News " + ➊));