Android開發(fā)中TextView 實現(xiàn)右上角跟隨文本動態(tài)追加圓形紅點(diǎn)
更新時間：2016年11月29日 15:55:16 作者：有點(diǎn)涼了
這篇文章主要介紹了android textview 右上角跟隨文本動態(tài)追加圓形紅點(diǎn)的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
在一個比較坑的需求里，一段文字右上角需要追加一個圓形紅點(diǎn)。最右側(cè)有個金額，紅點(diǎn)動態(tài)隨著文字移動，然后各種擺布局，一下午坑死我了。后來果斷放棄。然后就想試試直接自定義view來實現(xiàn)這個需求。
最坑的就是效果下面的第一種情況和第二種情況，就是這兩種情況給逼的
廢話不說，開搞。
首先自定義個view 繼承自 view 類
public class MyViewAndCircle extends View{
}
然后不用說了 ，直接飄紅，必須要實現(xiàn)幾個必要的方法了。
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的，這種教程網(wǎng)上一搜一大把
那么既然有了目標(biāo)
就可以寫 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==，為什么不定義圓形用的屬性。那是因為。。。用不到，畫個圓而已嘛，不用那么麻煩
next：
定義完了屬性之后那么就要引入了：
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;
/**
* 在一個比較坑的需求里，一段文字右上角需要追加一個圓形紅點(diǎn)。最右側(cè)有個金額，紅點(diǎn)動態(tài)隨著文字移動，然后各種擺布局，我去坑死我了。
* 后來放棄了，就有了這個東西(⊙o⊙)…
* 大神請加Q群，大家一起探討：123869487
* @author 有點(diǎn)涼了
*
*/
public class MyViewAndCircle extends View{
private String mText;//描述文字
private int mTextColor;//描述文字顏色
private int mTextSize;//描述文字大小
private Rect rect;//控制邊框 完整控件控制邊框顯示（寬高之類的）
private Rect mTextBound;//控制文本范圍
private Rect mCircle;//控制紅色圓點(diǎn)的位置
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);
//在這里測量當(dāng)前控件的寬和高，具體的意思請看
/**
* 系統(tǒng)幫我們測量的高度和寬度都是MATCH_PARNET，當(dāng)我們設(shè)置明確的寬度和高度時，系統(tǒng)幫我們測量的結(jié)果就是我們設(shè)置的結(jié)果，
* 當(dāng)我們設(shè)置為WRAP_CONTENT,或者M(jìn)ATCH_PARENT系統(tǒng)幫我們測量的結(jié)果就是MATCH_PARENT的長度。
* 所以，當(dāng)設(shè)置了WRAP_CONTENT時，我們需要自己進(jìn)行測量，即重寫onMesure方法”：
* 重寫之前先了解MeasureSpec的specMode,一共三種類型：
* EXACTLY：一般是設(shè)置了明確的值或者是MATCH_PARENT;
* AT_MOST：表示子布局限制在一個最大值內(nèi)，一般為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);
//這里就開始執(zhí)行繪制了
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);//這里在繪制最外側(cè)布局的寬高
mPaint.reset();
//下面判斷文本是否超出了父布局寬，然后分別作了設(shè)置
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("我的天吶這個不科學(xué)，是不是，你說是不是，我說是的,我的天吶。這個東西是個什么鬼。啥玩意？？？？？？？？？？？？？？？？");
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();
}
});
}
}
這個當(dāng)然就是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="設(shè)置短文字01" />
<Button
android:id="@+id/button_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="設(shè)置長文字02" />
<Button
android:id="@+id/button_show_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="設(shè)置圓顯示" />
<Button
android:id="@+id/button_show_circle_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="設(shè)置圓不顯示" />
<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開發(fā)中TextView 實現(xiàn)右上角跟隨文本動態(tài)追加圓形紅點(diǎn)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Android中TabLayout添加小紅點(diǎn)的示例代碼
- Android實現(xiàn)消息提醒小紅點(diǎn)效果
- Android應(yīng)用圖標(biāo)上的小紅點(diǎn)Badge實踐代碼
- Android高仿QQ小紅點(diǎn)功能
- Android仿QQ未讀消息--紅點(diǎn)拖拽刪除【源代碼】
- Android 未讀消息的紅點(diǎn)顯示
- Android帶數(shù)字或紅點(diǎn)的底部導(dǎo)航攔和聯(lián)網(wǎng)等待加載動畫示例
- Android BadgeView紅點(diǎn)更新信息提示示例代碼
- Android自定義ActionProvider ToolBar實現(xiàn)Menu小紅點(diǎn)
- Android 基于MediatorLiveData實現(xiàn)紅點(diǎn)的統(tǒng)一管理
相關(guān)文章
這篇文章主要為大家分享了Android五子棋游戲程序完整實例，內(nèi)容豐富，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
Jetpack?Compose?DropdownMenu手指跟隨點(diǎn)擊顯示
這篇文章主要為大家介紹了Jetpack?Compose?DropdownMenu手指跟隨點(diǎn)擊位置顯示實現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
工作中總是會用到shape去畫一些背景，每次都要去百度，但是很多都寫的很模糊或者屬性不是很全，所以今天自己總結(jié)了一下，給大家分享一下，自己以后也可以看2017-07-07
Android之自定義實現(xiàn)BaseAdapter（通用適配器二）
這篇文章主要為大家詳細(xì)介紹了Android之自定義實現(xiàn)BaseAdapter通用適配器第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
android:descendantFocusability方法介紹
開發(fā)中很常見的一個問題，項目中的listview不僅僅是簡單的文字，常常需要自己定義listview，問題就出現(xiàn)了，可能會發(fā)生點(diǎn)擊每一個item的時候沒有反應(yīng)，無法獲取的焦點(diǎn)2012-11-11
Android調(diào)用默認(rèn)瀏覽器打開指定Url的方法實例
業(yè)務(wù)員有需求要將一個wap站在手機(jī)上以App的形式打開,還不要嵌套WebView,只能以瀏覽器打開.查了點(diǎn)資料,就有了下面這代碼2013-09-09
Android中實現(xiàn)OkHttp上傳文件到服務(wù)器并帶進(jìn)度
本篇文章主要介紹了Android中實現(xiàn)OkHttp上傳文件到服務(wù)器并帶進(jìn)度，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
本篇文章主要介紹了淺談Android中多線程切換的幾種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Flutter進(jìn)階之實現(xiàn)動畫效果（二）
這篇文章主要為大家詳細(xì)介紹了Flutter進(jìn)階之實現(xiàn)動畫效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
Android加載對話框同時異步執(zhí)行實現(xiàn)方法
Android中通過子線程連接網(wǎng)絡(luò)獲取資料，同時顯示加載進(jìn)度對話框給用戶的操作2012-11-11