tabbar简单实现消息提示(小红点) - CSDN博客
tabbar简单实现消息提示(小红点)
简单实现消息提示(小红点)
最近有些忙，版本不断叠加，需求一个接一个。这不，其中有一个需求就是在原有的版本上显示一个红点提示，类似于qq未读消息一样，需求图如下：/p/bf
QQ截图30.png
没错，看起来好简单，可我们再看下设计师给我们切的图(设计师很周到哈，这里谢谢谢谢，嘿嘿)
QQ截图43.png
设计师是分不同状态来切的，如果我们按照这个思维去根据不同状态判断实现的话，不是不行，而是稍微麻烦了些。我们能不能尽量对以前代码做轻微的改动就能实现新的需求呢？当然是可以的了。看下以前代码是如何实现的：
&RadioGroup
android:id=&@+id/bottom_radiogroup&
android:layout_width=&match_parent&
android:layout_height=&50dp&
android:layout_marginTop=&1px&
android:background=&@android:color/white&
android:gravity=&center_vertical&
android:orientation=&horizontal&&
&RadioButton
android:id=&@+id/home_index&
android:layout_width=&0dp&
android:layout_height=&wrap_content&
android:layout_weight=&1&
android:button=&@null&
android:checked=&true&
android:drawablePadding=&2dp&
android:drawableTop=&@drawable/home_index_select&
android:gravity=&center&
android:text=&首页&
android:textColor=&@color/home_select_color&
android:textSize=&11sp& /&
&RadioButton
android:id=&@+id/home_bx&
android:layout_width=&0dp&
android:layout_height=&wrap_content&
android:layout_weight=&1&
android:button=&@null&
android:drawablePadding=&2dp&
android:drawableTop=&@drawable/home_bx_select&
android:gravity=&center&
android:text=&保险&
android:textColor=&@color/home_select_color&
android:textSize=&11sp& /&
&RadioButton
android:id=&@+id/home_my&
android:layout_width=&0dp&
android:layout_height=&wrap_content&
android:layout_weight=&1&
android:button=&@null&
android:drawablePadding=&2dp&
android:drawableTop=&@drawable/home_my_select&
android:gravity=&center&
android:text=&我的&
android:textColor=&@color/home_select_color&
android:textSize=&11sp& /&
&/RadioGroup&
很简单，就一个RadioGroup 包含了三个RadioButton，我们都知道RadioGroup其实是继承Linearlayout的，所以这里让他的三个RadioButton平分，然后每个RadioButton在Gravity.Center居中显示即可，最后每个DrawableTop写一个selector就达到以前的需求了。
现在来看下新的需求，怎么办？自定义View可以完美实现这个需求,我们可以做到：
1.几乎不用改变以前的代码2.不需要设计师给出的切图3.不去关心各种状态，完全独立
代码如下：
public class NotifyRadioButton extends RadioButton {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
public NotifyRadioButton(Context context, AttributeSet attrs) {
super(context, attrs);
paint.setColor(Color.RED);
radius = TypedValue.PLEX_UNIT_PX, 12.0f, context.getResources().getDisplayMetrics());
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (notify) {
Drawable drawable = getCompoundDrawables()[1];
Rect bounds = drawable.getBounds();
float cx = getMeasuredWidth() / 2 + bounds.width() / 2 - radius / 2;
float cy = getPaddingTop() + bounds.height() / 4;
canvas.drawCircle(cx, cy, radius, paint);
public void notify(boolean notify) {
this.notify =
invalidate();
首先我们继承自RadioButton，然后在canvas中自己绘制一个小红点即可。
canvas分析:
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (notify) {
Drawable drawable = getCompoundDrawables()[1];
Rect bounds = drawable.getBounds();
float cx = getMeasuredWidth() / 2 + bounds.width() / 2 - radius / 2;
float cy = getPaddingTop() + bounds.height() / 4;
canvas.drawCircle(cx, cy, radius, paint);
计算方式，大家好好理一理，下面测试。我们在以前布局中，将最后一个RadioButton替换为我们自定义的
&RadioGroup
android:id=&@+id/bottom_radiogroup&
android:layout_width=&match_parent&
android:layout_height=&50dp&
android:layout_marginTop=&1px&
android:background=&@android:color/white&
android:gravity=&center_vertical&
android:orientation=&horizontal&&
&RadioButton
android:id=&@+id/home_index&
android:layout_width=&0dp&
android:layout_height=&wrap_content&
android:layout_weight=&1&
android:button=&@null&
android:checked=&true&
android:drawablePadding=&2dp&
android:drawableTop=&@drawable/home_index_select&
android:gravity=&center&
android:text=&首页&
android:textColor=&@color/home_select_color&
android:textSize=&11sp& /&
&RadioButton
android:id=&@+id/home_bx&
android:layout_width=&0dp&
android:layout_height=&wrap_content&
android:layout_weight=&1&
android:button=&@null&
android:drawablePadding=&2dp&
android:drawableTop=&@drawable/home_bx_select&
android:gravity=&center&
android:text=&保险&
android:textColor=&@color/home_select_color&
android:textSize=&11sp& /&
&com.merchantshengdacar.view.NotifyRadioButton
android:id=&@+id/home_my&
android:layout_width=&0dp&
android:layout_height=&wrap_content&
android:layout_weight=&1&
android:button=&@null&
android:drawablePadding=&2dp&
android:drawableTop=&@drawable/home_my_select&
android:gravity=&center&
android:text=&我的&
android:textColor=&@color/home_select_color&
android:textSize=&11sp& /&
&/RadioGroup&
然后在代码中，通过id找到控件，调用notify(true),run起来，效果图如下：
本文已收录于以下专栏：
相关文章推荐
在app中随处可见具有中国红特色的小圆点，比如电商项目的购物车、通讯项目的消息列表等等。
第三方控件BadgeView可以简单粗暴实现。
2.初始化布局
textView...
数字提醒大家肯定都见识过。QQ、微信等app中如果有消息或者提醒的时候，就会展现给用户一个红点或者带有数字的点。前段时间微信上流行把自己的头像换成带有数字提醒的头像，让那些有强迫症的人真是抓狂。
应用市场很多应用程序中都会看见一些数字红点提示的效果，如QQ、微信以及一些提示更新应用的APP，以达到更好的提示功能的应用，本文将介绍一开源控件的使用实现红点更新信息提示效果。
一、BadgeView...
Android或者IOS，在软件更新、新收到信息时，界面上图标在右上角常常会显示一个角标，显示更新或者新收到的信息数量。
这就是我们所说的角标。
要实现这个角标，我们一想有...
先上效果图：
我是用的elementUI结合作用域插槽，
先写slot，直接用的模板定义
注册组件：ponent('tipnotes',{
简单实现消息提示(小红点)最近有些忙，版本不断叠加，需求一个接一个。这不，其中有一个需求就是在原有的版本上显示一个红点提示，类似于qq未读消息一样，需求图如下：没错，看起来好简单，可我们再看下设计师给...
本文作者：dongtao   来自：授权地址
在app.wxss里设置了图片路径,在IDE里正常无误,但是在手机上是没有显示的,
解决办法:(这段话位置放那么偏~ )
在很多APP里面，经常会看到未读消息的小红点，如下图：这个功能用到的是一个控件，叫做BadgeView。
BadgeView的用法很简单，直接把jar文件导入包中就可以使用，使用也很简单，
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)微信小程序实例：编写tabBar模板 - CSDN博客
微信小程序实例：编写tabBar模板
& & & & 众所周知，微信小程序的tabBar都是新开页面的，而微信文档上又表明了最多只能打开5层页面。这样就很容易导致出问题啦，假如我的tabBar有5个呢？下面是微信原话：
一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用
& & & & 因此这几天想着根据微信tabBar数组来自定义模板供页面调用。不过我在list里面每个对象都增加了一个selectedColor和active属性，方便对每个tabBar当前页做样式，如果不传直接使用设置的selectedColor。因此这串数据只能设定在各个页面下，不能设定在公用的app.js配置文件下，稍微有点代码冗余，下次研究下怎么直接配置到app.js完善下。&
& & & & 只要新建一个tarBar.wxml模板页，然后引用模板的页面传入数据即可，代码如下：
&template name=&tabBar&&
&view class=&flex-h flex-hsb tab-bar& style=&color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}&&
&block wx:for=&{{tabBar.list}}& wx:key=&pagePath&&
&navigator url=&{{item.pagePath}}& open-type=&redirect& class=&menu-item& style=&{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}&&
&image src=&{{item.selectedIconPath}}& wx:if=&{{item.active}}&&&/image&
&image src=&{{item.iconPath}}& wx:if=&{{!item.active}}&&&/image&
&text&{{item.text}}&/text&
&/navigator&
&/template&
& & & & 接下来进行测试，首先是index.js的配置对象：
//配置tabBar
&color&: &#9E9E9E&,
&selectedColor&: &#f00&,
&backgroundColor&: &#fff&,
&borderStyle&: &#ccc&,
&pagePath&: &/pages/index/index&,
&text&: &主页&,
&iconPath&: &../../img/tabBar_home.png&,
&selectedIconPath&: &../../img/tabBar_home_cur.png&,
//&selectedColor&: &#4EDF80&,
active: true
&pagePath&: &/pages/village/city/city&,
&text&: &目的地&,
&iconPath&: &../../img/tabBar_village.png&,
&selectedIconPath&: &../../img/tabBar_village_cur.png&,
&selectedColor&: &#4EDF80&,
active: false
&pagePath&: &/pages/mine/mine&,
&text&: &我的&,
&iconPath&: &../../img/tabBar_mine.png&,
&selectedIconPath&: &../../img/tabBar_mine_cur.png&,
&selectedColor&: &#4EDF80&,
active: false
&position&: &bottom&
}& & & & index.wxml引入模板：
&import src=&../../template/tabBar.wxml& /&
&template is=&tabBar& data=&{{tabBar: tabBar}}& /&
& & & & 接下来是mine.js文件引入配置对象：
//配置tabBar
&color&: &#9E9E9E&,
&selectedColor&: &#f00&,
&backgroundColor&: &#fff&,
&borderStyle&: &#ccc&,
&pagePath&: &/pages/index/index&,
&text&: &主页&,
&iconPath&: &../../img/tabBar_home.png&,
&selectedIconPath&: &../../img/tabBar_home_cur.png&,
//&selectedColor&: &#4EDF80&,
active: false
&pagePath&: &/pages/village/city/city&,
&text&: &目的地&,
&iconPath&: &../../../img/tabBar_village.png&,
&selectedIconPath&: &../../../img/tabBar_village_cur.png&,
&selectedColor&: &#4EDF80&,
active: false
&pagePath&: &/pages/mine/mine&,
&text&: &我的&,
&iconPath&: &../../img/tabBar_mine.png&,
&selectedIconPath&: &../../img/tabBar_mine_cur.png&,
&selectedColor&: &#4EDF80&,
active: true
&position&: &bottom&
& & & &mine.wxml引入模板：
&import src=&../../template/tabBar.wxml& /&
&template is=&tabBar& data=&{{tabBar: tabBar}}& /&
& & & & 最后演示如下：
************************************************************************************************************
& & & & 方案二，我把配置数据统一放在app.js文件，通过点击跳转页面后在把数据添加到当前页面实例上，具体做法如下：
& & & & 1、app.js文件配置：
var net = require('common/net');
var a_l, a_d = {}, a_cbSucc, a_cbSuccFail, a_cbFail, a_cbCom, a_h, a_m;
onLaunch: function () {
var that =
//修改tabBar的active值
editTabBar: function () {
var _curPageArr = getCurrentPages();
var _curPage = _curPageArr[_curPageArr.length - 1];//相当于Page({})里面的this对象
var _pagePath=_curPage.__route__;
if(_pagePath.indexOf('/') != 0){
_pagePath='/'+_pageP
var tabBar=this.globalData.tabB
for(var i=0; i&tabBar.list. i++){
tabBar.list[i].active=
if(tabBar.list[i].pagePath==_pagePath){
tabBar.list[i].active=//根据页面地址设置当前页面状态
_curPage.setData({
tabBar: tabBar
globalData: {
userInfo: null,
//配置tabBar
&color&: &#9E9E9E&,
&selectedColor&: &#f00&,
&backgroundColor&: &#fff&,
&borderStyle&: &#ccc&,
&pagePath&: &/pages/index/index&,
&text&: &主页&,
&iconPath&: &/pages/templateImg/tabBar_home.png&,
&selectedIconPath&: &/pages/templateImg/tabBar_home_cur.png&,
&selectedColor&: &#4EDF80&,
active: false
&pagePath&: &/pages/village/city/city&,
&text&: &目的地&,
&iconPath&: &/pages/templateImg/tabBar_village.png&,
&selectedIconPath&: &/pages/templateImg/tabBar_village_cur.png&,
&selectedColor&: &#4EDF80&,
active: false
&pagePath&: &/pages/mine/mine&,
&text&: &我的&,
&iconPath&: &/pages/templateImg/tabBar_mine.png&,
&selectedIconPath&: &/pages/templateImg/tabBar_mine_cur.png&,
&selectedColor&: &#4EDF80&,
active: false
&position&: &bottom&
& & & & 2、index.js+mine.js+city.js页面使用：
var App=getApp();
detail: {},
onLoad:function(options){
App.editTabBar();//添加tabBar数据
& & & & 最终演示和上图一致！
& & & & 下载地址请走：
本文已收录于以下专栏：
相关文章推荐
一：编写tabBar模板
众所周知，微信小程序的tabBar都是新开页面的，而微信文档上又表明了最多只能打开5层页面。这样就很容易导致出问题啦，假如我的tabBar有5个呢？下面是微信原话：
微信小程序的导航栏，也就是标题栏的格式是规定好的，不可以改动。同样，小程序提供的Tab栏也是规定好的格式，不过可以修改其属性。
下面附上使用方法：
比如，如果希望在APP的首页设置tabbar,则...
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.
总算做出来了.分享出来看看.
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.
总算做出来了.分享出来看看.
最近微信小程序这么火，博主虽然是学Android，但毕竟多多少少影响到App开发行业，所以还是得未雨绸缪，话不多说，接下来就从最基础的组件开始，一步一步揭开小程序的面纱。入门学习第一篇: tabBar...
搞了好久原来是位置的原因唉闹心
直接上代码：
出不来的代码：
&pages&: [
&pages/splash/splash&,
&pages/zhuye/zhuye&,
tabBar相对而言用的还是比较多的，但是用起来并没有难，在app.json中配置下tabBar即可，注意tabBar至少需要两个最多五个Item选项主要属性：对于tabBar整体属性设置：对于tab...
微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.
总算做出来了.分享出来看看.
1.index.wxml
手机网站|tabBar相对而言用的还是比较多的，但是用起来并没有难，在app.json中配置下tabBar即可，注意tabBar至少需要...
导航栏样式设置
tabBar导航栏
实例一：导航栏样式设置小程序的导航栏样式在app.json中定义。这里设置导航，背景黑色，文字白色，文字内容测试小程序app.json内容：{
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)XHTabBar,一行代码创建TabBar,支持小红点,数字角标及自定义高度
查看次数：1162
下载次数：58
上传时间：
大小：546 B
一行代码创建TabBar,支持小红点,数字角标及自定义高度
一行代码初始化:
XHTabBar *tabbar = [[XHTabBar alloc] initWithControllerArray:controllerArray titleArray:titleArray imageArray:imageArray selImageArray:selImageArray height:tabBarHeight];
//设置为根控制器
self.window.rootViewController =
使用说明详见github
代码地址:/CoderZhuXH/XHTabBar
您还没有登录！请或
下载过该代码的还下载了
本周热门下载
&2017 Chukong Technologies,Inc.
京公网安备89