Android的TabLayout右上角展示数量

Posted 2021-09-01 拖鞋王子猪

先直接上图

主要使用了TabLayout、ViewPager、Fragment
这三个控件的使用就不多介绍了，如有不熟悉的朋友，可自行先去了解一下这三个控件的使用。
activity_main的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="#AAEBEBEB">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabSelectedTextColor="@color/green"
        android:background="@color/white"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</LinearLayout>

MainActivity.java代码也比较简单，主要是TabLayout.Tab.setCustomView()方法。
核心代码：

private void init(){
        viewPager = findViewById(R.id.viewpager);
        tabLayout =  findViewById(R.id.tablayout);
        for(int i=0;i<titles.length;i++){
            fragments.add(new TabFragment());
            tabLayout.addTab(tabLayout.newTab());
        }

        tabLayout.setupWithViewPager(viewPager,false);
        pagerAdapter = new FmPagerAdapter(fragments,getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);

        for(int i=0;i<titles.length;i++){
            tabLayout.getTabAt(i).setText(titles[i]);
            tabLayout.getTabAt(i).setCustomView(makeTabViewText(i));
        }
    }

/**
     * 引入布局设置图标和标题
     * @param position
     * @return
     */
    private View makeTabViewText(int position){
        View tabView = LayoutInflater.from(this).inflate(R.layout.tab_text_value,null);
        TextView textView = tabView.findViewById(R.id.textview);
        TextView textviewValue = tabView.findViewById(R.id.textview_value);
        textView.setText(titles[position]);
        textviewValue.setText(picText[position]);
        textviewValue.setTextColor(getResources().getColor(R.color.white));
        return tabView;
    }

tab_text_value.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="40dp"
    android:layout_gravity="center"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="17sp" />

    <TextView
        android:id="@+id/textview_value"
        android:layout_toRightOf="@+id/textview"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:visibility="visible"
        android:textSize="10sp"
        android:textColor="@android:color/white"
        android:background="@drawable/bg_red_dot" />
</RelativeLayout>

FragmentPagerAdapter这个使用就自己去看看，
Demo下载地址

欢迎关注下面公众号，里面有大量免费的android进阶资料，回复 资料 即可领取。