效果圖

寫一篇短小精悍，好用的知識積累吧。開發中時常會出現信息提醒，新內容提示等等一堆問題。其實就是在各種控件或者是item上面加“小圓點”。網上一搜一大堆。。。但是感覺說的好多。我們只需要基本功能2333.
下面介紹三種方式吧，但是大體套路相同。

一、解需求思路

在 RadioGroup 的 RadioButton 上面直接加小圓點，對于我來說實現有點困難，因為我下面還有文字。搞不好，文字就擠沒了。 所有我現在在原有的 RadioGroup 上面加一層覆蓋物，類似于 ui 常常接觸的圖層。

二、布局

就是在原有的 RadioGroup 上覆蓋一層透明的 button 并且保證位置相同相同

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:background="@color/colorGrayBg"tools:context="cn.ln80.happybirdcloud119.activity.MainActivity"><android.support.v4.view.ViewPagerandroid:id="@+id/vp_main_page"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginBottom="61dp" /><!--底欄--><RadioGroupandroid:id="@+id/rg_main_bottom"android:layout_width="match_parent"android:layout_height="@dimen/iconsize_60"android:layout_alignParentBottom="true"android:background="@android:color/white"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rb_main_task"style="@style/BottomRadio"android:drawableTop="@drawable/bg_bottom_task"android:text="可視化"android:textColor="@drawable/txt_bottom_notify" /><RadioButtonandroid:id="@+id/rb_main_notify"style="@style/BottomRadio"android:layout_height="match_parent"android:drawableTop="@drawable/bg_bottom_notify"android:text="通知"android:textColor="@drawable/txt_bottom_notify" /><RadioButtonandroid:id="@+id/rb_main_home"style="@style/BottomRadio"android:layout_marginTop="@dimen/widget_margin_5"android:checked="true"android:drawableTop="@drawable/bg_bottom_home"android:text="主頁"android:textColor="@drawable/txt_bottom_notify" /><RadioButtonandroid:id="@+id/rb_main_inspect"style="@style/BottomRadio"android:drawableTop="@drawable/bg_bottom_inspect"android:text="巡檢"android:textColor="@drawable/txt_bottom_notify" /><RadioButtonandroid:id="@+id/rb_main_mine"style="@style/BottomRadio"android:drawableTop="@drawable/bg_bottom_mine"android:text="我的"android:textColor="@drawable/txt_bottom_notify" /></RadioGroup><LinearLayoutandroid:layout_width="match_parent"android:layout_height="@dimen/iconsize_60"android:layout_alignParentBottom="true"android:orientation="horizontal"><Buttonandroid:id="@+id/btn_main_task"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@null" /><Buttonandroid:id="@+id/btn_main_notification"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@null" /><Buttonandroid:id="@+id/btn_main_home"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@null" /><Buttonandroid:id="@+id/btn_main_inspect"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@null" /><Buttonandroid:id="@+id/btn_main_my"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@null" /></LinearLayout> </RelativeLayout>

三、第一種方式

import android.content.Context; import android.graphics.Color; import android.graphics.Typeface; import android.graphics.drawable.ShapeDrawable; import android.graphics.drawable.shapes.RoundRectShape; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.FrameLayout; import android.widget.LinearLayout; import android.widget.TabWidget;/*** Content：* Actor：韓小呆 ヾ(ﾟ▽ﾟ)ノ* Time: 2018/8/6 17:47* Update:* Time:*/ public class BadgeView extends android.support.v7.widget.AppCompatTextView {private boolean mHideOnNull = true;public BadgeView(Context context) {this(context, null);}public BadgeView(Context context, AttributeSet attrs) {this(context, attrs, android.R.attr.textViewStyle);}public BadgeView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init();}private void init() {if (!(getLayoutParams() instanceof LinearLayout.LayoutParams)) {LinearLayout.LayoutParams layoutParams =new LinearLayout.LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT,android.view.ViewGroup.LayoutParams.WRAP_CONTENT,Gravity.END | Gravity.TOP);setLayoutParams(layoutParams);}// set default fontsetTextColor(Color.WHITE);setTypeface(Typeface.DEFAULT_BOLD);setTextSize(TypedValue.COMPLEX_UNIT_SP, 11);setPadding(dip2Px(5), dip2Px(1), dip2Px(5), dip2Px(1));// set default backgroundsetBackground(9, Color.parseColor("#d3321b"));setGravity(Gravity.CENTER);// default valuessetHideOnNull(true);setBadgeCount(0);}public void setBackground(int dipRadius, int badgeColor) {int radius = dip2Px(dipRadius);float[] radiusArray = new float[]{radius, radius, radius, radius, radius, radius, radius, radius};RoundRectShape roundRect = new RoundRectShape(radiusArray, null, null);ShapeDrawable bgDrawable = new ShapeDrawable(roundRect);bgDrawable.getPaint().setColor(badgeColor);setBackground(bgDrawable);}/*** @return Returns true if view is hidden on badge value 0 or null;*/public boolean isHideOnNull() {return mHideOnNull;}/*** @param hideOnNull the hideOnNull to set*/public void setHideOnNull(boolean hideOnNull) {mHideOnNull = hideOnNull;setText(getText());}/** (non-Javadoc)** @see android.widget.TextView#setText(java.lang.CharSequence, android.widget.TextView.BufferType)*/@Overridepublic void setText(CharSequence text, BufferType type) {if (isHideOnNull() && (text == null || text.toString().equalsIgnoreCase("0"))) {setVisibility(View.GONE);} else {setVisibility(View.VISIBLE);}super.setText(text, type);}public void setBadgeCount(int count) {setText(String.valueOf(count));}public Integer getBadgeCount() {if (getText() == null) {return null;}String text = getText().toString();try {return Integer.parseInt(text);} catch (NumberFormatException e) {return null;}}public void setBadgeGravity(int gravity) {FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) getLayoutParams();params.gravity = gravity;setLayoutParams(params);}public int getBadgeGravity() {FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) getLayoutParams();return params.gravity;}public void setBadgeMargin(int dipMargin) {setBadgeMargin(dipMargin, dipMargin, dipMargin, dipMargin);}public void setBadgeMargin(int leftDipMargin, int topDipMargin, int rightDipMargin, int bottomDipMargin) {FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) getLayoutParams();params.leftMargin = dip2Px(leftDipMargin);params.topMargin = dip2Px(topDipMargin);params.rightMargin = dip2Px(rightDipMargin);params.bottomMargin = dip2Px(bottomDipMargin);setLayoutParams(params);}public int[] getBadgeMargin() {FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) getLayoutParams();return new int[]{params.leftMargin, params.topMargin, params.rightMargin, params.bottomMargin};}public void incrementBadgeCount(int increment) {Integer count = getBadgeCount();if (count == null) {setBadgeCount(increment);} else {setBadgeCount(increment + count);}}public void decrementBadgeCount(int decrement) {incrementBadgeCount(-decrement);}/** Attach the BadgeView to the TabWidget** @param target the TabWidget to attach the BadgeView** @param tabIndex index of the tab*/public void setTargetView(TabWidget target, int tabIndex) {View tabView = target.getChildTabViewAt(tabIndex);setTargetView(tabView);}/** Attach the BadgeView to the target view** @param target the view to attach the BadgeView*/public void setTargetView(View target) {if (getParent() != null) {((ViewGroup) getParent()).removeView(this);}if (target == null) {return;}if (target.getParent() instanceof FrameLayout) {((FrameLayout) target.getParent()).addView(this);} else if (target.getParent() instanceof ViewGroup) {ViewGroup parentContainer = (ViewGroup) target.getParent();int groupIndex = parentContainer.indexOfChild(target);parentContainer.removeView(target);FrameLayout badgeContainer = new FrameLayout(getContext());ViewGroup.LayoutParams parentLayoutParams = target.getLayoutParams();badgeContainer.setLayoutParams(parentLayoutParams);target.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));parentContainer.addView(badgeContainer, groupIndex, parentLayoutParams);badgeContainer.addView(target);badgeContainer.addView(this);} else if (target.getParent() == null) {Log.e(getClass().getSimpleName(), "ParentView is needed");}}/** converts dip to px*/private int dip2Px(float dip) {return (int) (dip * getContext().getResources().getDisplayMetrics().density + 0.5f);} }

將這個代碼直接 C、V 到自己的 類內，然后在使用的地方直接填寫如下代碼：

BadgeView badgeView = new BadgeView(this);badgeView.setTargetView(btnMainNotification);badgeView.setBadgeCount(12);badgeView.setBackground(20, getResources().getColor(R.color.colorRed));

這個自定義的代碼是一位外國大佬搞出來的，原版代碼在這，歡迎查閱：BadgeView。

這里面的一些屬性：

//設置依附的控件setTargetView(View) //設置顯示的數字setBadgeCount(int) //設置顯示的位置setBadgeGravity(Gravity) //設置背景色setBackgroundColor() //設置背景圖片setBackgroundResource() //設置顯示字體 比如說加粗、傾斜、啥的setTypeface() //設置字體陰影setShadowLayer()

四、第二種方式

引用這位大佬的依賴 ：BadgeView ---> compile 'q.rorbin:badgeview:1.1.3'

代碼代碼中使用：

new QBadgeView(this).bindTarget(btnMainNotification).setBadgeText("99+").setBadgeBackgroundColor(getResources().getColor(R.color.colorRed));

可以返回一個 Badge 對象提高開發者操作。

一些常用屬性

//設置Badge數字setBadgeNumber(int i);//設置Badge文本setBadgeText(String text); //設置文本字體大小setBadgeTextSize(int size); // 設置文本顏色setBadgeTextColor();//設置是否顯示精確模式數值setExactMode();//設置Badge相對于TargetView的位置setBadgeGravity(); //設置外邊距setGravityOffset();//設置內邊距setBadgePadding();//設置背景色setBadgeBackgroundColor(); //設置背景圖片setBadgeBackground();//設置是否顯示陰影setShowShadow();//打開拖拽消除模式并設置監聽setOnDragStateChangedListener();//描邊stroke();//隱藏Badgehide(); 官方的演示

五、最后一種實現方式

BGABadgeView-Android

六、總結

總體的實現思路就是，在底部導航欄覆蓋一層透明的布局，然后在透明布局內的控件上面依賴（寄生）上小圓點。

總結

以上是生活随笔為你收集整理的Android 底部导航栏添加消息数目提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。