android textview에 밑줄 그리기 (커스텀뷰로 구현)

android textview에 밑줄을 그려야하는 경우가 있는데요.

저같은 경우에는 직접 커스텀뷰로 구현하고 그걸 xml에 호출하는 방식으로 구현해 보았습니다.

1 . Java 클래스를 새로 만듭니다.

저의 경우에는 UnderlineTextView 로 이름을 지었지만 임의로 아무거나 해주셔도 상관이 없습니다.

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

import cookandroid.com.grabitysubproject.R;

@SuppressLint("AppCompatCustomView")
public class UnderlineTextView extends TextView {

    private int UnderlineColor;
    private int UnderlineWidth;

    private Paint paint;

    private float width , height;

    public UnderlineTextView(Context context) {
        super(context);

        UnderlineColor = Color.TRANSPARENT;
        UnderlineWidth = 0;
    }

    public UnderlineTextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public UnderlineTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray typedArray = context.obtainStyledAttributes( attrs , R.styleable.UnderlineTextView , defStyleAttr , 0);

        UnderlineColor = typedArray.getColor(R.styleable.UnderlineTextView_underlineColor , Color.TRANSPARENT);
        UnderlineWidth = typedArray.getDimensionPixelSize(R.styleable.UnderlineTextView_underlineWidth,0);

        typedArray.recycle();
        this.viewInit();
    }

//    public UnderlineTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
//        super(context, attrs, defStyleAttr, defStyleRes);
//    }


//    @Override
//    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//
//        width = MeasureSpec.getSize(widthMeasureSpec);
//        height = MeasureSpec.getSize(heightMeasureSpec);
//
//
//        Log.e("width","===="+width);
//        Log.e("height","===="+height);
//
//    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;

        Log.e("텍스트뷰width","==="+width);
        Log.e("텍스트뷰height","==="+height);


    }

    private void viewInit(){
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setUnderlineText(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(UnderlineColor);
        paint.setStrokeWidth(UnderlineWidth);

    }

    @Override
    protected void onDraw(Canvas canvas) {

        /**
         * 텍스트뷰에 밑줄을 그려준다.
         * drawLine 매개변수 startX , startY , stopX , stopY , paint
         * 텍스트뷰의 앞부분 startX 부터 텍스트뷰의 길이만큼 그려주고
         * 그리는 위치는 텍스트뷰의 하단부(height)로 그린다.
         */

        canvas.drawLine(0,height,width,height,paint);

        super.onDraw(canvas);
    }


    public int getUnderlineColor() {
        return UnderlineColor;
    }

    public void setUnderlineColor(int underlineColor) {
        UnderlineColor = underlineColor;
    }

    public int getUnderlineWidth() {
        return UnderlineWidth;
    }

    public void setUnderlineWidth(int underlineWidth) {
        UnderlineWidth = underlineWidth;
    }
}

2. res -> values -> attrs 로 가셔서 코드를 추가해 줍니다. 만약 attrs 가 없으면 만드시면 됩니다.

attrs 로 들어가신 다음에

해당코드를 추가해 주세요.

만약 커스텀뷰 클래스 이름을 Test 로 지었다면 declare-styleable name="Test" 로 해주셔야 합니다.

<declare-styleable name="UnderlineTextView">  //만약 클래스 이름이 Test 일경우 name="Test"

    <attr name="underlineColor" format="color"/>
    <attr name="underlineWidth" format="dimension"/>

</declare-styleable>

이제 모든 작업이 끝났습니다.

이제 XML에서 호출하면 됩니다.

잘보시면 app:underlineWidth , app:underlineColor 라는 옵션이 있는데 이건 커스텀뷰에서 추가한 옵션입니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <cookandroid.com.grabitysubproject.Widgets.UnderlineTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="텍스트뷰밑줄 1번"
        android:textSize="20dp"
        app:underlineWidth="2dp"
        app:underlineColor="#00F" />
    
    <cookandroid.com.grabitysubproject.Widgets.UnderlineTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="20dp"
        android:text="텍스트뷰밑줄 2번"
        app:underlineColor="#0FF"
        app:underlineWidth="5dp"
        />

    <cookandroid.com.grabitysubproject.Widgets.UnderlineTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="텍스트뷰밑줄 3번"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:textSize="20dp"
        app:underlineColor="#F00"
        app:underlineWidth="10dp"
        android:layout_marginBottom="10dp"/>


</RelativeLayout>

결과화면 XML화면

결과화면 모바일화면(노트 8)