带红数字提醒的底部栏

一、效果如图：

 二：实现

①、自定义控件

public class MineBottomTabView extends LinearLayout {

    @BindView(R.id.iv_mine_bottom_tab)
    ImageView ivMineBottomTab;
    @BindView(R.id.tv_mine_bottom_tab_title)
    TextView tvMineBottomTabTitle;
    @BindView(R.id.ll_mine_bottom_tab_container)
    LinearLayout llMineBottomTabContainer;
    @BindView(R.id.tv_mine_bottom_tab_number)
    TextView tvMineBottomTabNumber;

    public MineBottomTabView(Context context) {
        this(context, null);
    }

    public MineBottomTabView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MineBottomTabView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initViews(context, attrs);
    }

    private void initViews(Context context, AttributeSet attrs) {
        View view = View.inflate(context, R.layout.view_mine_bottom_tab, null);
        ButterKnife.bind(this, view);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.mineBottomTab);

        //设置图标
        int ivTab = typedArray.getResourceId(R.styleable.mineBottomTab_mine_bottom_tab_iv, 0);
        if (ivTab != 0) {
            ivMineBottomTab.setBackgroundResource(ivTab);
        } else {
            ivMineBottomTab.setBackgroundColor(Color.WHITE);
        }

        //设置标题
        String title = typedArray.getString(R.styleable.mineBottomTab_mine_bottom_tab_title);
        if (!TextUtils.isEmpty(title)) {
            tvMineBottomTabTitle.setVisibility(VISIBLE);
            tvMineBottomTabTitle.setText(StringUtils.getDefaultNullString(title));
        } else {
            tvMineBottomTabTitle.setVisibility(GONE);
        }

        //设置未读消息数字
        int number = typedArray.getInt(R.styleable.mineBottomTab_mine_bottom_tab_number, 0);
        if (number > 0) {
            tvMineBottomTabNumber.setVisibility(VISIBLE);
            tvMineBottomTabNumber.setText(number + "");
        } else {
            tvMineBottomTabNumber.setVisibility(GONE);
        }

        //设置选中状态
        boolean isSelected = typedArray.getBoolean(R.styleable.mineBottomTab_mine_bottom_tab_selected, false);
        ivMineBottomTab.setSelected(isSelected);
        tvMineBottomTabTitle.setSelected(isSelected);

        this.addView(view);
    }

    /**
     * 设置这个tab按钮是否被选中
     *
     * @param selected
     */
    public void setSelected(boolean selected) {
        if (ivMineBottomTab != null) {
            ivMineBottomTab.setSelected(selected);
        }

        if (tvMineBottomTabTitle != null) {
            tvMineBottomTabTitle.setSelected(selected);
        }
    }

    /**
     * 设置未读消息的数量
     *
     * @param unreadNumber
     */
    public void setUnreadNumber(int unreadNumber) {
        if (tvMineBottomTabNumber == null) {
            return;
        }

        if (unreadNumber > 0 && unreadNumber < 100) {
            tvMineBottomTabNumber.setVisibility(VISIBLE);
            tvMineBottomTabNumber.setText(unreadNumber + "");
        } else if (unreadNumber >= 100) {
            tvMineBottomTabNumber.setVisibility(VISIBLE);
            tvMineBottomTabNumber.setText("...");
        } else {
            tvMineBottomTabNumber.setVisibility(GONE);
        }
    }
}

②view_mine_bottom_tab.xml文件。

<?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="match_parent"
    android:gravity="center"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/ll_mine_bottom_tab_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/iv_mine_bottom_tab"
            android:layout_width="24dp"
            android:layout_height="21dp"
            android:background="@drawable/selector_yours" />

        <TextView
            android:id="@+id/tv_mine_bottom_tab_title"
            style="@style/tab_bottom"
            android:text="@string/anjian" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_mine_bottom_tab_number"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/ll_mine_bottom_tab_container"
        android:background="@drawable/shape_circle_redbg"
        android:gravity="center"
        android:inputType="number"
        android:textColor="@color/white"
        android:textSize="8sp" />

</RelativeLayout>

③styles.xml文件。颜色自定义，不粘贴了。

<style name="tab_hangyeduan_bottom">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center</item>
        <item name="android:textSize">10sp</item>
        <item name="android:paddingTop">3dp</item>
        <item name="android:paddingBottom">3dp</item>
        <item name="android:textColor">@color/selector_text_color_</item>
    </style>

④attrs.xml文件样式。自定义控件中 R.styleable.mineBottomTab

<declare-styleable name="mineBottomTab">
        <attr name="mine_bottom_tab_iv" format="reference" />
        <attr name="mine_bottom_tab_title" format="string" />
        <attr name="mine_bottom_tab_number" format="string" />
        <attr name="mine_bottom_tab_selected" format="boolean"></attr>
</declare-styleable>

⑤activity_main.xml文件。

app:mine_bottom_tab_iv：显示的图标。

mine_bottom_tab_number：显示的红色的数字。

mine_bottom_tab_title：显示的文字标题。

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

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager_main_activity"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View style="@style/divider_line_horizontal" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:orientation="horizontal"
        android:paddingTop="3dp">

        <cn.com.views.MineBottomTabView
            android:id="@+id/mine_bottom_tab_shouye"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            app:mine_bottom_tab_iv="@drawable/selector_first"
            app:mine_bottom_tab_number="0"
            app:mine_bottom_tab_title="@string/ceshi" />

        <View
            style="@style/divider_line_vertical"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp" />

        <cn.com.views.MineBottomTabView
            android:id="@+id/mine_bottom_tab_anjian"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            app:mine_bottom_tab_iv="@drawable/selector_second"
            app:mine_bottom_tab_number="10"
            app:mine_bottom_tab_title="@string/ceshi" />

        <View
            style="@style/divider_line_vertical"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp" />

        <cn.com.views.MineBottomTabView
            android:id="@+id/mine_bottom_tab_geren_zhongxin"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            app:mine_bottom_tab_iv="@drawable/selector_second"
            app:mine_bottom_tab_number="0"
            app:mine_bottom_tab_title="@string/ceshi" />

    </LinearLayout>

</LinearLayout>

⑥源码文件中使用：

view.setSelected(true);//设置选中

似乎就是这样了，慢慢进步吧。

原：博观而约取,厚积而薄发
译：在广博读书而简约审慎地取用，在深厚积累之后慢慢地释放出来。