Android tablayout вкладки с уведомлением значок, как whatsApp

Я хочу реализовать значок уведомления с android.support.design.widget.TabLayout. Я приложил все усилия, чтобы реализовать его, но не смог.

любая помощь была бы очень признательна.

13
android android-tablayout badge

6 ответов

моим решением для этого было использование 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

Я бы предложил вам посмотреть на этом сайте:

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

}
16

я попробовал некоторые из вышеупомянутых решений, но они не дали надлежащих результатов. Если вы посмотрите внимательнее в TabLayout реализация вы поймете, что TabView попытается получить textView и iconView из CustomView если их применять.

поэтому вместо того, чтобы делать некоторые хакерские реализации, я скорее придумал макет, равный тому, что было в оригинале 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);

и затем вы можете показать / скрыть / установить значок cound в любое время через:

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

Я не знаю, почему, но ни один из ответов не работал для меня :(

у меня есть собственное решение, которое сделает тот же tablayout, что и whatsapp с этим значком :)

сначала сделайте пользовательский макет вкладки как 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;
    }

я мог бы оставить что-то во время ответа на этот вопрос, просто пинг меня, я был бы рад помочь :D

1

просто используйте этот трюк:

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

есть простой способ, а также. Просто добавьте специальные символы позади. Это будет выглядеть как WhatsApp делает.

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

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