自定义一个带角标的菜单图标

最新推荐文章于 2024-06-26 16:58:12 发布

原创最新推荐文章于 2024-06-26 16:58:12 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#角标

本文介绍了一种在Android应用中创建带有加粗样式和角标菜单图标的自定义方法。通过XML布局文件和自定义视图组件，实现了一个包含图标、标题和角标计数的导航按钮。该方法适用于希望提升应用UI细节的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加粗样式带角标的菜单图标

在这里插入图片描述

创建一个自定义xml

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

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/nav_iv_icon"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_gravity="center_horizontal"
            android:contentDescription="@string/app_name"
            android:paddingLeft="@dimen/lay_2"
            android:paddingRight="@dimen/lay_2"
            android:paddingTop="@dimen/lay_2"
            android:scaleType="fitCenter"
            android:src="@drawable/tab_icon_new" />

        <TextView
            android:id="@+id/nav_tv_dot"
            android:layout_width="wrap_content"
            android:layout_height="16dp"
            android:layout_gravity="top|center"
            android:layout_marginLeft="@dimen/lay_8"
            android:background="@drawable/ic_red_dot"
            android:gravity="center"
            android:lines="1"
            android:minWidth="14dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:singleLine="true"
            android:textColor="@color/white"
            android:textSize="@dimen/font_10"
            android:visibility="gone"
            tools:text="1"
            tools:visibility="visible" />
    </FrameLayout>

    <TextView
        android:id="@+id/nav_tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_marginTop="1dp"
        android:gravity="center"
        android:textColor="@drawable/primarybar_txt"
        android:textSize="12sp"
        tools:text="消息" />

</LinearLayout>

自定义按钮

package com.sanshi.housingAssetsLease.custom.customlayout;

import android.content.Context;
import android.os.Build;
import android.support.annotation.DrawableRes;
import android.support.annotation.RequiresApi;
import android.support.annotation.StringRes;
import android.support.v4.app.Fragment;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import com.sanshi.housingAssetsLease.R;

public class NavigationButton extends FrameLayout {
    private Fragment mFragment = null;
    private Class<?> mClx;
    private ImageView mIconView;
    private TextView mTitleView;
    private TextView mDot;
    private String mTag;

    public NavigationButton(Context context) {
        super(context);
        init();
    }

    public NavigationButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public NavigationButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public NavigationButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        LayoutInflater inflater = LayoutInflater.from(getContext());
        inflater.inflate(R.layout.layout_nav_item, this, true);

        mIconView = (ImageView) findViewById(R.id.nav_iv_icon);
        mTitleView = (TextView) findViewById(R.id.nav_tv_title);
        mDot = (TextView) findViewById(R.id.nav_tv_dot);
    }

    public void setSelected(boolean selected) {
        super.setSelected(selected);
        mIconView.setSelected(selected);
        mTitleView.setSelected(selected);
    }

    public void showRedDot(int count) {
        mDot.setVisibility(count > 0 ? VISIBLE : GONE);
        mDot.setText(String.valueOf(count));
    }

    public void init(@DrawableRes int resId, @StringRes int strId, Class<?> clx) {
        mIconView.setImageResource(resId);
        mTitleView.setText(strId);
        mClx = clx;
        mTag = mClx.getName();
    }

    public Class<?> getClx() {
        return mClx;
    }

    public Fragment getFragment() {
        return mFragment;
    }

    public void setFragment(Fragment fragment) {
        this.mFragment = fragment;
    }

    public String getTag() {
        return mTag;
    }

}

使用布局

  <main.customlayout.NavigationButton
            android:id="@+id/nv_index"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center" />

nvInfo.init(R.drawable.main_info_selector, R.string.nv_info, InfoListNewFragment.class);//图标/文字/打开fragment
nvInfo.showRedDot(99);//角标个数