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

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

非常感谢任何帮助。

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

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

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

    我尝试了上面提到的一些解决方案,但它们没有提供正确的结果。 如果仔细查看TabLayout实现,您会发现TabView将尝试从CustomView获取textView和CustomView如果应用)。

    因此,我没有做一些hacky实现,而是提出了一个与原始TabView相同的布局,但是另外一个可以有徽章的视图。

    所以你需要badged_tab.xml布局

     < ?xml version="1.0" encoding="utf-8"?>          

    还有某种通知背景:

     < ?xml version="1.0" encoding="utf-8"?>    

    以编程方式添加标签时,只需拨打电话即可

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

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

    我有自己的解决方案,将与whatsapp与该徽章制作相同的tablayout 🙂

    首先将自定义选项卡布局设为custom_tab

     < ?xml version="1.0" encoding="utf-8"?>       

    其次是badge_background

     < ?xml version="1.0" encoding="utf-8"?>        

    第三个是tab_color_selector

     < ?xml version="1.0" encoding="utf-8"?>     

    在你的活动中排第四

      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;i0) { tv_count.setVisibility(View.VISIBLE); tv_count.setText(""+unreadCount[pos]); } else tv_count.setVisibility(View.GONE); return view; } 

    在回答这个问题时我可能会留下一些东西,只要ping我,我很乐意提供帮助:D

    只是使用这个技巧:

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

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

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

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