Android带下划线的TextView

作者: CoderXiaoTe | 来源:发表于2016-11-24 11:02 被阅读7211次
    前段时间做项目需要做一个待下划线的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大功告成。

    效果图如下: UnderLineTextView

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

    compile 'talon.com:underlineText:1.0.0'

    附上github地址,欢迎star.

    相关文章

      网友评论

        本文标题:Android带下划线的TextView

        本文链接:https://www.haomeiwen.com/subject/cjbrettx.html