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

问题描述 投票：15回答：7

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

非常感谢任何帮助。

android badge android-tablayout
7个回答
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);
25
投票

编辑：更新

随着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);
    }
}
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
投票

我不知道为什么，但上述答案都不适合我:(

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

0
投票

我建议使用自定义视图选项卡。您可以使用徽章创建新视图并将其设置为选项卡。

tab.setCustomView(R.layout.badged_tab);
-1
投票

只是使用这个技巧：

BadgeView bv1 = new BadgeView(this, ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(0));
-5
投票

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

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

tabLayout.addTab(tabLayout.newTab().setText("News " + ➊));
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.