仿短信条目右上角的红色小圆球提示气泡

柔光的暖阳◎ 2023-10-16 20:57 59阅读 0赞

效果图：

![Center][]

可以重写View的onDraw完成该功能，也可以写布局文件完成该功能。现在使用布局文件完成。暂时先简单写一个TextView右上角的提示小红球，也可以根据需要写一个ImageView右上角的小红球提示。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <TextView
            android:padding="2dip"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            
            android:gravity="center"
            android:text="01234567890abcdefghijklmnopqrstuvwxyz！" />
    
        <FrameLayout 
            android:padding="1dip"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
    
            <TextView
                android:layout_width="20dip"
        		android:layout_height="20dip"
                android:layout_gravity="right"
                android:background="@drawable/tips_textview_bg"
                android:gravity="center"
                android:text="9"
                android:textSize="15dip"
                android:textStyle="bold"
                android:textColor="@android:color/white" />
        </FrameLayout>
    
    </FrameLayout>

依赖的tips\_textview\_bg.xml文件

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android= "http://schemas.android.com/apk/res/android"
        android:shape= "oval"
        android:useLevel= "false" >
        
        <solid android:color= "#FF0000" />
        
    </shape>

[Center]: https://img-blog.csdn.net/20150209154045047?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmdwaGls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

发表评论取消回复

表情：

评论列表（有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读

相关仿微信、短信、QQ等消息数目右上角红色小圆球气泡显示（基于Android XML布局文件实现）

效果图如下： ![Center][] 仿微信、短信、来电未接数目、QQ等消息数目右上角红色小圆球气泡显示（基于Android XML布局文件实现）。这种实现方式主

秒速五厘米/ 2023年10月16日 21:01/ 0 赞/ 82 阅读

相关仿短信条目右上角的红色小圆球提示气泡

效果图： ![Center][] 可以重写View的onDraw完成该功能，也可以写布局文件完成该功能。现在使用布局文件完成。暂时先简单写一个TextView右上

柔光的暖阳◎/ 2023年10月16日 20:57/ 0 赞/ 60 阅读

相关小程序tabBar右上角添加角标

小程序可以在 `pages.json` 中使用 `tabBar` 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。关于 `tabBar` 的配置可以查看 [

墨蓝/ 2023年03月02日 05:19/ 0 赞/ 126 阅读

相关 UNI-APP_uni-app微信小程序右上角分享，右上角分享朋友圈

利用uni-app的onShareAppMessage与onShareTimeline来实现的分享给朋友或分享朋友圈！ onShareAppMessage：官网详细讲解地址：

叁歲伎倆/ 2022年12月28日 09:15/ 0 赞/ 645 阅读

相关 div右上角的数字提示

根据父元素的位置写了个差不多的样式 .divright\{ position:absolute;

﹏ヽ暗。殇╰゛Y/ 2022年05月27日 01:39/ 0 赞/ 320 阅读

相关隐藏微信中网页右上角按钮

http://mp.weixin.qq.com/wiki/index.php?title=%E9%9A%90%E8%97%8F%E5%BE%AE%E4%BF%A1%E4%B8%

冷不防/ 2022年03月31日 06:52/ 0 赞/ 470 阅读

相关 css:容器右上角出现红色原点信息提示（提示有多少条目）

第一种 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

本是古典何须时尚/ 2022年01月06日 07:55/ 0 赞/ 351 阅读

相关 Androd之在图片右上角显示红色圆圈里面数字提醒

1 需求在图片右上角显示红色圆圈里面数字提醒 2 效果如图 ![watermark_type_ZmFuZ3poZW5naGV

妖狐艹你老母/ 2021年09月24日 14:22/ 0 赞/ 352 阅读

相关微信小程序获取右上角胶囊按钮布局信息

let res=wx.getMenuButtonBoundingClientRect() 返回值 width number 宽度，单位：px

谁践踏了优雅/ 2021年07月25日 01:13/ 0 赞/ 836 阅读

相关重构-圆角消息提示(右上角)

动画: 消息出现/消失渐变参数: value:PropTypes.oneOfType([PropTypes.string,P

电玩女神/ 2021年07月24日 19:14/ 0 赞/ 507 阅读