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

2024-10-02 10:25:36

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

<declare-styleable name="CustomMyViewTitle">
    <attr name="titleTextview"/>
    <attr name="titleSizeview"/>
    <attr name="titleColorview"/>
  </declare-styleable>
  <attr name="titleTextview" format="string" />
  <attr name="titleColorview" format="color" />
  <attr name="titleSizeview" format="dimension" />

如上我们定义了==文本自身==， ==文本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 < n; i++) {
      int attr = a.getIndex(i);
      switch (attr) {
      case R.styleable.CustomMyViewTitle_titleTextview:
        mText = a.getString(attr);
        break;
      case R.styleable.CustomMyViewTitle_titleSizeview:
        mTextSize = a.getDimensionPixelOffset(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
        break;
      case R.styleable.CustomMyViewTitle_titleColorview:
        mTextColor = a.getInt(attr, Color.BLACK);
        break;
      }
    }
    a.recycle();
  }

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

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

这个是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 < n; i++) {
      int attr = a.getIndex(i);
      switch (attr) {
      case R.styleable.CustomMyViewTitle_titleTextview:
        mText = a.getString(attr);
        break;
      case R.styleable.CustomMyViewTitle_titleSizeview:
        mTextSize = a.getDimensionPixelOffset(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
        break;
      case R.styleable.CustomMyViewTitle_titleColorview:
        mTextColor = a.getInt(attr, Color.BLACK);
        break;
      }
    }
    a.recycle();
    mPaint = new Paint();//这里做初始化
    rect = new Rect();
    mTextBound = new Rect();
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // TODO Auto-generated method stub
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //在这里测量当前控件的宽和高，具体的意思请看
    /**
     * 系统帮我们测量的高度和宽度都是MATCH_PARNET，当我们设置明确的宽度和高度时，系统帮我们测量的结果就是我们设置的结果，
     * 当我们设置为WRAP_CONTENT,或者MATCH_PARENT系统帮我们测量的结果就是MATCH_PARENT的长度。
     * 所以，当设置了WRAP_CONTENT时，我们需要自己进行测量，即重写onMesure方法”：
     * 重写之前先了解MeasureSpec的specMode,一共三种类型：
     * EXACTLY：一般是设置了明确的值或者是MATCH_PARENT;
     * AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT;
     * UNSPECIFIED：表示子布局想要多大就多大，很少使用;
     */
    int specMode = MeasureSpec.getMode(widthMeasureSpec);
    int spenSize = MeasureSpec.getSize(widthMeasureSpec);
    if (specMode ==MeasureSpec.EXACTLY) {
      mWidth = spenSize;
    }
    specMode = MeasureSpec.getMode(heightMeasureSpec);
    spenSize = MeasureSpec.getSize(heightMeasureSpec);
    if (specMode==MeasureSpec.EXACTLY) {
      mHeight = spenSize;
    }else {
      mPaint.setTextSize(16);
      mPaint.getTextBounds(mText, 0, mText.length(), mTextBound);
      float textHeight = mTextBound.height();
      int desired = (int) (getPaddingTop()+textHeight+getPaddingBottom());
      mHeight = desired;
    }
    setMeasuredDimension(mWidth, mHeight);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    //这里就开始执行绘制了
    mPaint.setTextSize(mTextSize);
    mPaint.getTextBounds(mText, 0, mText.length(), mTextBound);//计算文字所需要的宽度
    mPaint.setColor(Color.BLUE);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setTextSize(mTextSize);
    Utils.mLogError("==-->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布局了：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:qiao="http://schemas.android.com/apk/res/com.qiao.selfview"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:padding="3dp" >
    <com.qiao.view.MyViewAndCircle
      android:id="@+id/textView"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:padding="2dp"
      qiao:titleSizeview="13sp"
      qiao:titleTextview="测试测试测试测试测试测试测试测试测试测试" />
  </LinearLayout>
  <Button
    android:id="@+id/button_show_one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="设置短文字01" />
  <Button
    android:id="@+id/button_show"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="设置长文字02" />
  <Button
    android:id="@+id/button_show_circle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="设置圆显示" />
  <Button
    android:id="@+id/button_show_circle_no"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="设置圆不显示" />
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="\n 效果：\n 下面第一种效果是正常的，仅限于文字超短。如果文字超长，就成了第二种情况了 \n"/>
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
      <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/amount" >
        <TextView
          android:id="@+id/textView_balance_service_name"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:ellipsize="end"
          android:singleLine="true"
          android:text="第一种情况：文字短"
          android:textColor="#555555"
          android:textSize="15sp" />
        <ImageView
          android:id="@+id/imageview_has_tag"
          android:layout_width="9dp"
          android:layout_height="9dp"
          android:layout_alignParentTop="true"
          android:layout_marginLeft="3dp"
          android:layout_toRightOf="@+id/textView_balance_service_name"
          android:src="@drawable/from_shop_sell"
          android:visibility="visible" />
      </RelativeLayout>
      <TextView
        android:id="@+id/amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:gravity="right"
        android:text="套餐金额"
        android:textColor="#555555"
        android:textSize="17sp" />
    </RelativeLayout>
  </LinearLayout>
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
      <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/amount_one" >
        <TextView
          android:id="@+id/textView_balance_service_name_one"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:ellipsize="end"
          android:singleLine="true"
          android:text="第二种情况：文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。文字超长这样。。"
          android:textColor="#555555"
          android:textSize="15sp" />
        <ImageView
          android:id="@+id/imageview_has_tag_one"
          android:layout_width="9dp"
          android:layout_height="9dp"
          android:layout_alignParentTop="true"
          android:layout_marginLeft="3dp"
          android:layout_toRightOf="@+id/textView_balance_service_name_one"
          android:src="@drawable/from_shop_sell"
          android:visibility="visible" />
      </RelativeLayout>
      <TextView
        android:id="@+id/amount_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:gravity="right"
        android:text="套餐金额"
        android:textColor="#555555"
        android:textSize="17sp" />
    </RelativeLayout>
  </LinearLayout>
</LinearLayout>

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

Android TextView（圆弧）边框和背景实例详解

Android TextView 圆弧效果图: 布局代码: <TextView android:id="@+id/product_tag" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:singleLine="true" androi
Android中TextView显示圆圈背景或设置圆角的方法

前言在我们学习android这么久,而且使用TextView那么长时间,我们一直没有用过给TextView添加背景,或者是给TextView添加添加边框,以及怎么样设置TextView的形状.今天在写代码的时候就用到了,怎么在java代码部分设置TextView的背景,和TextView的形状及边框. 方法如下: 接下来我们来看一下,怎么在Java代码部分怎么设置TextView的背景颜色,其实很简单的就一句话. tvTemp.setBackgroundColor(Color.parseCol
android TextView属性的详细介绍分享

android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web /email/phone/map/all)android:autoText如果设置,将自动执行输入值的拼写纠正.此处无效果,在显示输入法并输入的时候起作用.android:bufferType指定getText()方式取得的文本类别.选项editable 类似于StringBuilder可追加字符,也就是说getText后可调用append方法设置文本内容
Android控件系列之TextView使用介绍

学习目的: 1.了解在Android中如何使用TextView控件 2.掌握TextView控件重要属性作用:TextView类似一般UI中的Label,TextBlock等控件,只是为了单纯的显示一行或多行文本上图的XML布局如下: 复制代码代码如下: <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_c
Android开发中TextView 实现右上角跟随文本动态追加圆形红点

在一个比较坑的需求里,一段文字右上角需要追加一个圆形红点.最右侧有个金额,红点动态随着文字移动,然后各种摆布局,一下午坑死我了.后来果断放弃.然后就想试试直接自定义view来实现这个需求. 最坑的就是效果下面的第一种情况和第二种情况,就是这两种情况给逼的废话不说,开搞. 首先自定义个view 继承自 view 类 public class MyViewAndCircle extends View{ } 然后不用说了 ,直接飘红,必须要实现几个必要的方法了. public MyViewAndCi
Android开发中TextView文本过长滚动显示实现方法分析

本文实例讲述了Android开发中TextView文本过长滚动显示实现方法.分享给大家供大家参考,具体如下: 项目中在使用TextView时,总会有因要显示的内容过多而需要我们进行处理的问题.我们第一时间想到的是TextView的android:ellipsize属性,比如 android:ellipsize="end",效果是在文字的尾部打三个小点. 但是这个属性要配合android:singLine="true"使用.通常来说,要实现尾端三个点的省略号形式是比较
Android开发中TextView各种常见使用方法小结

本文实例讲述了Android开发中TextView各种常见使用方法.分享给大家供大家参考,具体如下: 效果图: XML布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/root" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:
Android开发实现TextView显示丰富的文本

本文实例讲述了Android开发实现TextView显示丰富的文本的方法.分享给大家供大家参考,具体如下: 如图,显示html的元素控件,点击连接实现上网,发email,拨号实现源码如下: MainActivity.java package com.example.textview2; import android.os.Bundle; import android.app.Activity; import android.text.Html; import android.text.meth
Android开发中button按钮的使用及动态添加组件方法示例

本文实例讲述了Android开发中button按钮的使用及动态添加组件方法.分享给大家供大家参考,具体如下: MainActivity.java package com.example.lab2; import android.os.Bundle; import android.app.Activity; import android.content.Context; import android.view.Menu; import android.view.View; import andro
Android 开发中根据搜索内容实现TextView中的文字部分加粗

实现方式没有引入任何依赖,轻量级实现需求效果最近遇到一个需求,需要做一个搜索功能.搜索的内容需要加粗显示. 完成了这个功能后,写下此博客,记录一下实现过程效果图首先自定义一个StyleSpan,在StyleSpan里做加粗的等匹配状态的设置 @SuppressLint("ParcelCreator") public class SearchStyleSpan extends StyleSpan { public SearchStyleSpan(int style) { super
Android开发Popwindow仿微信右上角下拉菜单实例代码

先给大家看下效果图: MenuPopwindow: package com.cloudeye.android.cloudeye.view; import android.app.Activity; import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.view.LayoutInflater; import android.view.View; import an
Android开发自定义TextView省略号样式的方法

本文实例讲述了Android开发自定义TextView省略号样式的方法.分享给大家供大家参考,具体如下: 在布局xml中设置textView的字段 android:maxLines="2" android:ellipsize="end"字段之后,textview会自动压缩行数,并且对压缩掉的部分用...显示.如果不想用...而想用...或者... ...就需要自定义这个省略号的样式,不需要自定义控件,方法如下. 首先是布局文件 <TextView andro
Android开发中Listview动态加载数据的方法示例

本文实例讲述了Android开发中Listview动态加载数据的方法.分享给大家供大家参考,具体如下: 最近在研究网络数据加载的问题,比如我有几百,甚至上千条数据,这些数据如果一次性全部加载到arraylist,然后再加载到Listview中.我们必然会去单独开线程来做,这样造成的结果就是会出现等待时间很长,用户体验非常不好.我的想法是动态加载数据,第一次加载十条,然后往下面滑动的时候再追加十条,再往下面滑动的时候再去追加,这样大大减少了用户等待的时间,同时给处理数据留下了时间.网上看到了这样一
Android开发中给EditText控件添加TextWatcher监听实现对输入字数的限制(推荐)

做这个功能是因为开发项目的时候,由于后台接口的一些参数的值的长度有要求,不能超过多少个字符,所以在编辑框中输入的字符是要有限制的. 下面就来看一下demo的实现过程: 首先,在xml控件中放置一个EditText控件,然后初始化该控件并对该控件添加文本监听.xml自己简单的设计一下,代码较为简单,直接上代码: package com.example.edittext; import android.app.Activity; import android.os.Bundle; import an

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

相关推荐

随机推荐