Android带下划线的TextView

Android带下划线的TextView

因为项目中需要做个有下划线的textview，搜索了半天最后找到一份挺好的博客: CoderXiaoTe的博客
经过我的实验确实有用，特此记录一下：

前段时间做项目需要做一个待下划线的TextView,于是研究了下，通过万能的搜索找到这么几个方法：

1. 设置TextView的Paint属性
   tv3.getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG );
2. 用Html类的fromHtml（）方法格式化要放到TextView里的文字 ，与第1种一样，只是是用代码动态设置
   tv1.setText(Html.fromHtml("<u>"+"北京雾霾“净化”塔更名“警示”塔"+"<u/>"));
3. 使用SpannableString类 ‘String text=“北京雾霾“净化”塔更名“警示”塔”;
   SpannableString content = new SpannableString(text); content.setSpan(new UnderlineSpan(), 0, text.length(), 0); tv4.setText(content);

效果图如下：

然而恕小弟愚钝还是没有找到办法只修改下划线颜色的方法，所以只能自定义TextView,又继续扣代码，找到TextView下列属性

TextView的layout里面包含各种获取字符位置、行数、列数等的方法
layout.getLineForOffset获取该字符所在行数.
layout.getLineBounds获取该行的外包矩形（Rect) 这样 这个字符的顶部Y坐标就是rect的top 底部Y坐标就是rect的bottom
layout.getPrimaryHorizontal获取该字符左边的X左边
layout.getSecondaryHorizontal获取该字符字符的右边X坐标**

示例代码如下：

int position = 第几个字符 
Layout layout = textView.getLayout();
Rect bound = new Rect(); 
int line = layout.getLineForOffset(position);
layout.getLineBounds(line, bound);
yAxisTop = bound.top;//字符顶部y坐标 
yAxisBottom = bound.bottom;//字符底部y坐标 
xAxisLeft = layout.getPrimaryHorizontal(position);//字符左边x坐标 
xAxisRight = layout.getSecondaryHorizontal(position);//字符右边x坐标

最后实现的代码如下：

public class UnderLineTextView extends TextView {

private Rect mRect;
private Paint mPaint;
private int mColor;
private float density;
private float mStrokeWidth;

public UnderLineTextView(Context context) {
  this(context, null, 0);
  }
public UnderLineTextView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
}
public UnderLineTextView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context, attrs, defStyleAttr);
}

private void init(Context context, AttributeSet attrs, int defStyleAttr){
  //获取屏幕密度
density=context.getResources().getDisplayMetrics().density;
//获取自定义属性
TypedArray array=context.obtainStyledAttributes(attrs,R.styleable.UnderlinedTextView,defStyleAttr,0);
mColor=array.getColor(R.styleable.UnderlinedTextView_underlineColor,0xFFFF0000);
mStrokeWidth=array.getDimension(R.styleable.UnderlinedTextView_underlineWidth,density*2);
array.recycle();

mRect=new Rect();
mPaint =new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(mColor);
mPaint.setStrokeWidth(mStrokeWidth);

}

@Override
protected void onDraw(Canvas canvas) {
//得到TextView显示有多少行
int count=getLineCount();

//得到TextView的布局
final Layout layout=getLayout();

float x_start,x_stop,x_diff;
int firstCharInLine, lastCharInLine;

for (int i = 0; i < count; i++) {

    //getLineBounds得到这一行的外包矩形,
    // 这个字符的顶部Y坐标就是rect的top 底部Y坐标就是rect的bottom
    int baseline=getLineBounds(i,mRect);
    firstCharInLine=layout.getLineStart(i);
    lastCharInLine = layout.getLineEnd(i);

    //要得到这个字符的左边X坐标 用layout.getPrimaryHorizontal
    //得到字符的右边X坐标用layout.getSecondaryHorizontal
    x_start = layout.getPrimaryHorizontal(firstCharInLine);
    x_diff = layout.getPrimaryHorizontal(firstCharInLine + 1) - x_start;
    x_stop = layout.getPrimaryHorizontal(lastCharInLine - 1) + x_diff;

    canvas.drawLine(x_start,baseline + mStrokeWidth,x_stop, baseline + mStrokeWidth, mPaint);


}
super.onDraw(canvas);

}

public int getUnderLineColor() {
return mColor;
}

public void setUnderLineColor(int mColor) {
 this.mColor = mColor;
 invalidate();
}

public float getUnderlineWidth() {
 return mStrokeWidth;
}

public void setUnderlineWidth(float mStrokeWidth) {
 this.mStrokeWidth = mStrokeWidth;
 invalidate();
 }}

ps:在xml使用范例为:

 <talon.com.underlineText.UnderLineTextView 
  android:id="@+id/tv_underline" 
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:underlineWidth="2dp"
  app:underlineColor="@color/colorAccent"
  android:text="我很好我很好我很好"/

其中自定义属性

app:underlineWidth设置下划线宽度

app:underlineColor设置下划线的颜色 至此带下划线的TextView大功告成。

效果图如下：

注：童鞋们想要便捷的使用如何破呢？在gradle中添加依赖，就可以使用啦，如下：

compile ‘talon.com:underlineText:1.0.0’

大家有兴趣可以访问我的博客 DreamWord