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

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

效果图:


可以重写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>


相关文章
|
8月前
|
JavaScript
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
有关vue中两张图片,一个底图一个右上角的图片 点击右上角不触发底图方法
52 0
|
小程序
小程序右上角的胶囊颜色怎么修改?
小程序右上角的胶囊颜色怎么修改?
203 0
|
3月前
|
前端开发 JavaScript
图片区域点击处理
【10月更文挑战第25天】在前端开发中,图片区域点击处理可通过 HTML、CSS 和 JavaScript 实现。首先创建包含图片的 HTML 元素,使用 CSS 调整样式,再通过 JavaScript 获取图片元素并添加点击事件监听器,根据点击坐标判断区域,实现特定功能。也可借助 Paper.js 或 Fabric.js 等库简化开发。
|
5月前
Axure 选中同意复选框后,改变登录按钮的颜色
Axure 选中同意复选框后,改变登录按钮的颜色
49 0
|
小程序
【笔记】微信小程序右上角胶囊按钮(标题设置透明后的处理)
微信小程序右上角胶囊按钮(标题设置透明后的处理)
2045 0
【笔记】微信小程序右上角胶囊按钮(标题设置透明后的处理)
|
iOS开发
iOS开发 - 系统导航栏左右上角按钮如何不需要定义就可以添加小红点
iOS开发 - 系统导航栏左右上角按钮如何不需要定义就可以添加小红点
176 0
下方那个移动的滑块的设计
下方那个移动的滑块的设计
72 0
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)
tab栏切换制作(点击那一栏显示那一栏的内容,其他栏的内容隐藏)