Android CircleTextView 커스텀으로 구현하기

 

텍스트뷰나 또는 다른 뷰에 동그랗게 라운드 효과를 주기 위해서 조금만 구글링을 해보면

여러가지 자료가 많이 나온다.

 

대표적으로 아래 코드처럼 Shape Xml 파일을 만들어서 직접 레이아웃에 세팅하는걸 많이 봤을것이다.

 

circle_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/black"/>
    <corners android:radius="4dp"/>
    <size android:width="24dp"
        android:height="24dp"/>

</shape>

 

 

근데 drawable의 백그라운드 컬러를 바꿔야 하는 상황이 온다면?

물론 코드로 작업이 가능하지만 아예 커스텀뷰로 빼서 쉽게 쓰는 방법을 생각해봤다.

커스텀뷰를 만드는 기본방법을 안다는 전제하에 상세한 설명은 생략합니다.

 

CircleTextView.kt

class CircleTextView @JvmOverloads constructor(
    context: Context,
    attr: AttributeSet
): AppCompatTextView(context,attr,0) {

    private var circleBackgroundColor: Int = Color.TRANSPARENT

    init {
        val typeArray = context.obtainStyledAttributes(attr , R.styleable.CircleTextView , 0 , 0)
        circleBackgroundColor = typeArray.getColor(R.styleable.CircleTextView_circleBackgroundColor , Color.TRANSPARENT)
        typeArray.recycle()

        setBackgroundResource(R.drawable.circle_bg)

        if (circleBackgroundColor != Color.TRANSPARENT){
            setDrawableBackgroundColor(circleBackgroundColor)
        }

    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
    }

    fun setDrawableBackgroundColor(color: Int) {
        circleBackgroundColor = color
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            background.colorFilter = BlendModeColorFilter(circleBackgroundColor, BlendMode.SRC_IN)
        }else {
            background.setColorFilter(circleBackgroundColor, PorterDuff.Mode.SRC_IN)
        }
    }


}

 

 

 

attr.xml

    <declare-styleable name="CircleTextView">
        <attr name="circleBackgroundColor" format="color"/>
    </declare-styleable>

 

 

만들고 나면 Xml 에서 이렇게 사용이 가능하다

 

activity_test.xml

    <test.samplecoordinatorlayout.widgets.CircleTextView
        android:id="@+id/circle_text"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:text="1"
        android:textColor="@color/white"
        android:gravity="center"
        android:textSize="12sp"
        />

    <test.samplecoordinatorlayout.widgets.CircleTextView
        android:id="@+id/circle_text2"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:text="2"
        android:textColor="@color/white"
        android:gravity="center"
        android:textSize="12sp"
        app:circleBackgroundColor="@color/teal_700"
        />

    <test.samplecoordinatorlayout.widgets.CircleTextView
        android:id="@+id/circle_text3"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:text="3"
        android:textColor="@color/white"
        android:gravity="center"
        android:textSize="12sp"
        app:circleBackgroundColor="@color/purple_200"
        />

 

 Drawable 백그라운드 컬러를 변경하고 싶다면 커스텀뷰에 선언한 함수를 이용해 쉽게 체인지가 가능하다.

                binding.circleText.setDrawableBackgroundColor(Color.RED)
                binding.circleText2.setDrawableBackgroundColor(Color.YELLOW)
                binding.circleText3.setDrawableBackgroundColor(Color.BLUE)