带有通知徽章的Android Tablayout标签，例如whatsApp

时间：2015-08-12 14:30:12

标签： android badge android-tablayout

我想用android.support.design.widget.TabLayout实施通知徽章。我已尽最大努力实现它但失败了。

非常感谢任何帮助。

10 个答案:

答案 0 :(得分：21)

我尝试了上面提到的一些解决方案，但是它们没有提供正确的结果。如果您仔细查看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);
    }
}

答案 1 :(得分：16)

我建议你看一下这个网站：

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;
}

}

答案 2 :(得分：4)

我的解决方案是使用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);

答案 3 :(得分：2)

我不喜欢＆＃39;知道为什么，但上述答案都不适合我:(

我有自己的解决方案，它将与带徽章的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

答案 4 :(得分：2)

我将使用这个：

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

答案 5 :(得分：0)

我建议对选项卡使用CustomView。 您可以使用徽章创建一个新视图并将其设置到标签中。

tab.setCustomView(R.layout.badged_tab);

答案 6 :(得分：0)

这是一个古老的指示，但是如今，它要简单得多。 我正在使用AndroidX的Kotlin，并将下一个小部件用作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
    }
}

答案 7 :(得分：0)

在 kotlin 中，工作：

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

答案 8 :(得分：-1)

只是使用这个技巧：

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

答案 9 :(得分：-5)

也有简单的方法。只需添加一个特殊字符。它看起来像whatsapp。

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

tabLayout.addTab(tabLayout.newTab().setText("News " + ➊));
相关问题
最新问题