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

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);}

<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" />

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();  }

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();  }}

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();      }    });  }}

<?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>