最近項(xiàng)目中新增的一個(gè)頁面中囚霸,Textview文本需要實(shí)現(xiàn)上圖效果腰根,特此記錄。
參考資料: http://blog.csdn.net/industriously/article/details/53493392
為了實(shí)現(xiàn)上述效果拓型,用一個(gè)Textview比較好實(shí)現(xiàn)额嘿。若由多個(gè)Textview拼接在布局中,在最后的Texiview換行時(shí)劣挫,第二行無法從頭開始顯示文本(如果有相關(guān)思路册养,請(qǐng)?jiān)谠u(píng)論區(qū)交流)。讓一個(gè)Textview顯示多樣的文本压固,可以用SpannableString類實(shí)現(xiàn)球拦。但是常用的場(chǎng)景只是改變文字的顏色以及增加相關(guān)文字的點(diǎn)擊事件,若要實(shí)現(xiàn)上訴效果帐我,我們需要重寫ReplacementSpan類:
public class RadiusBackgroundSpan extends ReplacementSpan {
private int mSize;
private int mColor;
private int mRadius;
private Context mContext;
/**
* @param color 背景顏色
* @param radius 圓角半徑
*/
public RadiusBackgroundSpan(int color, int radius,Context context) {
mColor = color;
mRadius = radius;
mContext = context;
}
@Override
public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
mSize = (int) (paint.measureText(text, start, end) + 2 * mRadius +25);
//mSize就是span的寬度坎炼,span有多寬,開發(fā)者可以在這里隨便定義規(guī)則
//我的規(guī)則:這里text傳入的是SpannableString拦键,start点弯,end對(duì)應(yīng)setSpan方法相關(guān)參數(shù)
//可以根據(jù)傳入起始截至位置獲得截取文字的寬度,最后加上左右兩個(gè)圓角的半徑得到span寬度
return mSize;
}
@Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
int color = paint.getColor();//保存文字顏色
paint.setColor(mColor);//設(shè)置背景顏色
paint.setAntiAlias(true);// 設(shè)置畫筆的鋸齒效果
RectF oval = new RectF(x, y + paint.ascent(), x + mSize, y + paint.descent());
//設(shè)置文字背景矩形矿咕,x為span其實(shí)左上角相對(duì)整個(gè)TextView的x值抢肛,y為span左上角相對(duì)整個(gè)View的y值。paint.ascent()獲得文字上邊緣碳柱,paint.descent()獲得文字下邊緣
canvas.drawRoundRect(oval, mRadius, mRadius, paint);//繪制圓角矩形捡絮,第二個(gè)參數(shù)是x半徑,第三個(gè)參數(shù)是y半徑
paint.setColor(mContext.getResources().getColor(R.color.white));//恢復(fù)畫筆的文字顏色
canvas.drawText(text, start, end, x + mRadius, y, paint);//繪制文字
//添加文字右側(cè)的圖片
Bitmap bitmap = BitmapFactory.decodeResource( mContext.getResources(),R.drawable.icon_arrow_down);
//drawBitmap方法第二莲镣、第三個(gè)參數(shù)分別代表圖案距TextView左側(cè)距離福稳,以及距TextView上邊框距離。
canvas.drawBitmap(bitmap, x+mSize-40, 10, paint);
}
}
在Activity或Fragment中:
int radiusColor = getResources().getColor(R.color.orange_ff);
String content = "喂瑞侮,您好的圆!歐陽先生在忙,您找TA有什么事半火?";
SpannableString spanString = new SpannableString(content);
int start = content.indexOf("歐陽先生");
int end = start + "歐陽先生".length();
spanString.setSpan(new RadiusBackgroundSpan(radiusColor, 25,SettingCallNameActivity.this),start, end, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
//給"歐陽先生"添加點(diǎn)擊事件
spanString.setSpan(new ClickableSpan() {
@Override
public void onClick(View view) {
//點(diǎn)擊事件
}
@Override
public void updateDrawState(TextPaint ds) {
ds.setUnderlineText(false); //取消下劃線
}
}, start, end, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTvCallName.setText(spanString);
mTvCallName.setMovementMethod(LinkMovementMethod.getInstance());