OutLineTextView 글자 외곽선

프로젝트를 진행하다 TextView의 text에 원하는 컬러로 외곽선을 그리게 구현해야 할 일이 생겼다.
CustomView를 생성해 속성을 추가하여 Canvas로 그려 Text의 외곽선을 그리는 방법이 있어 구현해보았다.

 

attrs.xml 생성

<resources>
    
    ...
    
    <declare-styleable name="OutlineTextView">
        <attr name="textStroke" format="boolean"/>         //외곽선 사용유무 속성
        <attr name="textStrokeWidth" format="dimension"/>  //외곽선 두께 - dp 사용위해 dimension
        <attr name="textStrokeColor" format="color"/>      //외곽선 컬러
    </declare-styleable>
    
</resources>

 

CustomTextView 생성

class OutlineTextView : AppCompatTextView {
    private var stroke = false
    private var strokeWidth = 0.0f
    private var strokeColor = 0

    constructor(context: Context?) : super(context!!) {}
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        initView(context, attrs)
    }

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        initView(context, attrs)
    }

    private fun initView(context: Context, attrs: AttributeSet?) {
        //attributes 가져오기
        val type = context.obtainStyledAttributes(attrs, R.styleable.OutlineTextView)
        
        //뒤에 지정해주는 값들은 속성을 지정하지 않을때 default가 될 값 수치 이다.
        stroke = type.getBoolean(R.styleable.OutlineTextView_textStroke, false)
        strokeWidth = type.getDimension(R.styleable.OutlineTextView_textStrokeWidth, 0.0f)
        strokeColor = type.getColor(R.styleable.OutlineTextView_textStrokeColor, -0x1)
        
    }

    override fun onDraw(canvas: Canvas) {
        if (stroke) {
            //draw stroke
            val states = textColors
            paint.style = Paint.Style.STROKE
            paint.strokeWidth = strokeWidth
            setTextColor(strokeColor)
            super.onDraw(canvas)
            
            //draw fill
            paint.style = Paint.Style.FILL
            setTextColor(states)
        }
        super.onDraw(canvas)
    }
}

 

 

Layout에 적용

xml에 TextView 대신 만들어준 CustomView를 사용하고 생성했던 속성들을 지정해준다.

<com.lguplus.mobile.kids.main.quiz.OutlineTextView
     android:id="@+id/today_quiz_score"
     android:layout_width="@dimen/common_57dp"
     android:layout_height="@dimen/common_48dp"
     android:layout_marginEnd="@dimen/common_2dp"
     android:gravity="center_horizontal"
     android:shadowColor="@color/color_df7804"
     android:textColor="@color/color_ff8700"
     android:textSize="@dimen/common_45dp"
     app:fontFamily="@font/lguplustv_sdgothicneoround_heb"
     app:textStroke="true"
     app:textStrokeColor="@color/color_ffffff"
     app:textStrokeWidth="@dimen/common_6dp"
     tools:text="80" />

 

OutLineTextView
https://bbang-work-it-out.tistory.com/15