当前位置: 开发笔记 > 运维 > 正文

Android开发中TextView实现右上角跟随文本动态追加圆形红点

作者：格个蝎子_844 | 来源：互联网 | 2022-03-04 08:34

这篇文章主要介绍了androidtextview右上角跟随文本动态追加圆形红点的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下

在一个比较坑的需求里，一段文字右上角需要追加一个圆形红点。最右侧有个金额，红点动态随着文字移动，然后各种摆布局，一下午坑死我了。后来果断放弃。然后就想试试直接自定义view来实现这个需求。

最坑的就是效果下面的第一种情况和第二种情况，就是这两种情况给逼的

废话不说，开搞。

首先自定义个view 继承自 view 类

public class MyViewAndCircle extends View{
}

然后不用说了，直接飘红，必须要实现几个必要的方法了。

 public MyViewAndCircle(Context context) {
    this(context,null);
    // TODO Auto-generated constructor stub
  }
  public MyViewAndCircle(Context context, AttributeSet attrs) {
    this(context, attrs,0);
    // TODO Auto-generated constructor stub
  }
  public MyViewAndCircle(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

然后就要想想这个需求到底是什么鬼了。

因为目前来说需要一个文本，还要有个红色圆形追加到文本域后边，那么有两种考虑了

- 1、文本+画圆

- 2、文本+图片

在这里我选第一种了，毕竟在view里边画个圆还是比较easy的，这种教程网上一搜一大把

那么既然有了目标

就可以写 attrs了，

如上我们定义了==文本自身==， ==文本size==，==文本color==，为什么不定义圆形用的属性。那是因为。。。用不到，画个圆而已嘛，不用那么麻烦

定义完了属性之后那么就要引入了：

public MyViewAndCircle(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    // TODO Auto-generated constructor stub
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomMyViewTitle, defStyleAttr, 0);
    int n = a.getIndexCount();
    for (int i = 0; i

至此我们就将定义的控件中用的属性撸出来了，那么下面就开始撸代码了。

我贴个完整代码：代码里都加了注释来着

这个是view的代码：

package com.qiao.view;
import com.qiao.Utils.Utils;
import com.qiao.selfview.R;
import com.qiao.selfview.R.styleable;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.text.TextPaint;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.View.MeasureSpec;
/**
 * 在一个比较坑的需求里，一段文字右上角需要追加一个圆形红点。最右侧有个金额，红点动态随着文字移动，然后各种摆布局，我去坑死我了。
 * 后来放弃了，就有了这个东西(⊙o⊙)…
 * 大神请加Q群，大家一起探讨：123869487
 * @author 有点凉了
 *
 */
public class MyViewAndCircle extends View{
  private String mText;//描述文字
  private int mTextColor;//描述文字颜色
  private int mTextSize;//描述文字大小
  private Rect rect;//控制边框 完整控件控制边框显示（宽高之类的）
  private Rect mTextBound;//控制文本范围
  private Rect mCircle;//控制红色圆点的位置
  private Paint mPaint;//控制画笔
  private int mWidth;//宽
  private int mHeight;//高
  private boolean isShow = true;
  RectF oval = null;//控制圆的边界
  public MyViewAndCircle(Context context) {
    this(context,null);
    // TODO Auto-generated constructor stub
  }
  public MyViewAndCircle(Context context, AttributeSet attrs) {
    this(context, attrs,0);
    // TODO Auto-generated constructor stub
  }
  public MyViewAndCircle(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    // TODO Auto-generated constructor stub
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomMyViewTitle, defStyleAttr, 0);
    int n = a.getIndexCount();
    for (int i = 0; i rect.width() "+rect.width());
    rect.left=0;
    rect.top=0;
    rect.right=getMeasuredWidth();
    rect.bottom = getMeasuredHeight();
    canvas.drawRect(rect, mPaint);//这里在绘制最外侧布局的宽高
    mPaint.reset();
    //下面判断文本是否超出了父布局宽，然后分别作了设置
    if (mTextBound.width()>mWidth) {
//     文字超长展示
      mPaint.setTextSize(mTextSize);
      TextPaint paint = new TextPaint(mPaint);
      String msg = TextUtils.ellipsize(mText, paint, (float) mWidth - getPaddingLeft() - getPaddingRight(),
          TextUtils.TruncateAt.END).toString();
      canvas.drawText(msg, getPaddingLeft(), mHeight/2 - getPaddingTop()+mTextBound.height()/2, mPaint);
      mPaint.reset();
      if (isShow) {
        // 控制红色圆形大小
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#FE4D3D"));
        oval = new RectF();
        oval.left = getMeasuredWidth()-30;
        oval.right=getMeasuredWidth();
        oval.top=getMeasuredHeight()/2 - mTextBound.height()/2 - 30;
        oval.bottom=getMeasuredHeight()/2 - mTextBound.height()/2;
        canvas.drawArc(oval, 0, 360, true, mPaint);
        mPaint.reset();
      }
    }else {
      //正常情况
      mPaint.setTextSize(mTextSize);
      canvas.drawText(mText, getPaddingLeft(), (mHeight/2 - mTextBound.height()/2)+mTextBound.height()-getPaddingBottom(), mPaint);
      mPaint.reset();
      if (isShow) {
        // 控制红色圆形大小
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#FE4D3D"));
        oval = new RectF();
        oval.left = mTextBound.width()+getPaddingRight();
        oval.right=mTextBound.width()+getPaddingRight()+30;
        oval.top=getMeasuredHeight()/2 - mTextBound.height()/2 - 30;
        oval.bottom=getMeasuredHeight()/2 - mTextBound.height()/2;
        canvas.drawArc(oval, 0, 360, true, mPaint);
        mPaint.reset();
      }
    }
  }
  public void setTitleText(String mText){
    this.mText = mText;
  }
  public void setIsVisiable(boolean isShow){
    this.isShow = isShow;
  }
  public void notification(){
    invalidate();
  }
}

这个是activity界面：

package com.qiao.selfview;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import com.qiao.base.BaseActivity;
import com.qiao.view.MyViewAndCircle;
public class MySelfView extends BaseActivity{
  private Button button_show;
  private Button button_show_one;
  private Button button_show_circle;
  private Button button_show_circle_no;
  private MyViewAndCircle textView;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_myselfview);
    textView = (MyViewAndCircle) findViewById(R.id.textView);
    button_show_One= (Button) findViewById(R.id.button_show_one);
    button_show = (Button) findViewById(R.id.button_show);
    button_show_circle = (Button) findViewById(R.id.button_show_circle);
    button_show_circle_no = (Button) findViewById(R.id.button_show_circle_no);
    button_show_one.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        // TODO Auto-generated method stub
        textView.setTitleText("收拾收拾");
        textView.notification();
      }
    });
    button_show.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        // TODO Auto-generated method stub
        textView.setTitleText("我的天呐这个不科学，是不是，你说是不是，我说是的,我的天呐。这个东西是个什么鬼。啥玩意？？？？？？？？？？？？？？？？");
        textView.notification();
      }
    });
    button_show_circle.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        // TODO Auto-generated method stub
        textView.setIsVisiable(true);
        textView.notification();
      }
    });
    button_show_circle_no.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        // TODO Auto-generated method stub
        textView.setIsVisiable(false);
        textView.notification();
      }
    });
  }
}

这个当然就是activity布局了：

<&＃63;xml version="1.0" encoding="utf-8"&＃63;>

以上所述是小编给大家介绍的Android开发中TextView 实现右上角跟随文本动态追加圆形红点，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

推荐阅读

touch
优化ListView性能

本文深入探讨了如何通过多种技术手段优化ListView的性能，包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]

蜡笔小新 2024-12-28 10:36:30
touch
Android LED 数字字体的应用与实现

本文介绍了一种适用于 Android 应用的 LED 数字字体（digital font），并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景，能够增强视觉效果。 ... [详细]

蜡笔小新 2024-12-27 10:34:22
port
RecyclerView初步学习(一)

RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式，除了提供ViewHolder缓存模式，还可以自定义动画，分割符，布局样式，相比于传统的ListVi ... [详细]

蜡笔小新 2024-12-26 20:24:01
service
解决JAX-WS动态客户端工厂弃用问题并迁移到XFire

在处理Java项目中的JAR包冲突时，我们遇到了JaxWsDynamicClientFactory被弃用的问题，并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]

蜡笔小新 2024-12-25 18:48:34
service
使用Xshell通过SSH协议远程连接Ubuntu系统

本文介绍如何通过SSH协议使用Xshell远程连接到Ubuntu系统。为了实现这一目标，需要确保Ubuntu系统已安装并配置好SSH服务器，并保证网络连通性。 ... [详细]

蜡笔小新 2024-12-25 16:29:11
service
优化局域网SSH连接延迟问题的解决方案

本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置，可以显著缩短SSH连接的时间。 ... [详细]

蜡笔小新 2024-12-25 11:31:48
service
在Android中排列多行小部件 - Arranging Rows of Widgets in Android

本文介绍如何使用布局文件在Android应用中排列多行TextView和Button，使其占据屏幕的特定比例，并提供示例代码以帮助理解和实现。 ... [详细]

蜡笔小新 2024-12-25 10:33:17
service
Android MARS学习笔记：Intent基础与应用

本文介绍了Android开发中Intent的基本概念及其在不同Activity之间的数据传递方式，详细展示了如何通过Intent实现Activity间的跳转和数据传输。 ... [详细]

蜡笔小新 2024-12-24 12:23:09
service
优化 Android 按钮状态下的背景和文本颜色变化

本文介绍如何通过 Android 的 Selector 实现按钮在不同状态下（如按压）的背景和文本颜色动态变化。我们将详细讲解实现步骤，并提供完整的代码示例。 ... [详细]

蜡笔小新 2024-12-24 10:15:17
service
深入理解HTML基础语法

本文详细介绍超文本标记语言（HTML）的基本概念与语法结构。HTML是构建网页的核心语言，通过标记标签描述页面内容，帮助开发者创建结构化、语义化的Web页面。 ... [详细]

蜡笔小新 2024-12-24 08:21:49
linux
深入探讨JSP技术的优缺点

本文详细分析了JSP（JavaServer Pages）技术的主要优点和缺点，帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术，广泛应用于Web开发中。 ... [详细]

蜡笔小新 2024-12-28 11:00:33
linux
如何使用JavaScript或jQuery检测文本框焦点状态和鼠标悬停事件

本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态，以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]

蜡笔小新 2024-12-27 21:33:33
server
优化Spring Boot项目，大幅提升并发性能

本文探讨了如何通过一系列技术手段提升Spring Boot项目的并发处理能力，解决生产环境中因慢请求导致的系统性能下降问题。 ... [详细]

蜡笔小新 2024-12-19 21:07:12
ssh
配置Git SSH密钥以访问远程仓库

本文详细介绍如何通过设置SSH密钥来获取连接GitHub远程仓库的权限，包括生成密钥、添加到GitHub账户以及验证连接等步骤。 ... [详细]

蜡笔小新 2024-12-19 19:02:13
linux
配置SecureCRT以显示Linux终端颜色

本文介绍如何配置SecureCRT以正确显示Linux终端的颜色，并解决中文显示问题。通过简单的步骤设置，可以显著提升使用体验。 ... [详细]

蜡笔小新 2024-12-19 18:30:14

格个蝎子_844

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章