[Android] Custom View

면접기록용 Custom View 정리

 

커스텀 뷰 사용하는 목적

1. 완전 맞춤 렌더링 된 뷰 유형을 만들 수 있음
2. 기존 view 구성요소 그룹을 새로운 단일 구성요소로 만들 수 있음
3. 키 누름과 같은 다른 이벤트를 확인하고 맞춤 방식으로 처리할 수 있음
4. 재사용 가능

 

구현 방법

attrs.xml 정의

: 커스텀 뷰에서 사용하고자 하는 속성이 있다면 attrs.xml에 정의해줌

1. res > values 폴더에 attrs.xml 을 생성
2. declare-styleable 태그를 생성 후 name에는 커스텀뷰 클래스명을 입력
3. attr 태그를 생성해서 name에는 속성명, format에는 속성의 type을 입력해줌

// 예시

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CustomViewProgress">
        <attr name="duration" format="integer"/>
        <attr name="textColor" format="color"/>
        <attr name="backgroundColor" format="color"/>
        <attr name="foregroundColor" format="color"/>
    </declare-styleable>

</resources>

 

커스텀 뷰 클래스 생성

1. View 클래스를 상속 받는 클래스를 생성, 이때의 클래스명은 위 attrs.xml 파일에서 정의한 커스텀뷰의 클래스명과 동일해야 됨
2. 생성자 정의

// xml 파일이 아닌 코드상에서 직접 뷰를 생성할 때 호출하는 생성자임
constructor(context: Context?) : super(context)

// 레이아웃 xml에 등록한 View가 안드로이드에 의해 Inflate 될 때 호출되는 생성자
// AttributeSet 객체를 통해 사용자가 입력한 커스텀 속성을 사용 가능
constructor(context: Context?, attribute: AttributeSet?) : super(context, attribute)

 

attrs 속성 사용

: View가 inflate 될 때 xml에서 파싱된 속성들은 AttributeSet으로 묶임. → 이를 TypedArray를 이용해서 AttributeSet에서 styleable 리소스에 정의된 것들을 가져올 수 있음.

// 예시

private fun initAttribute(attributeSet: AttributeSet ? ) {
    if (attributeSet == null) return
    val attrs = context.theme.obtainStyledAttributes(
        attributeSet,
        R.styleable.CustomViewProgress,
        0,
        0
    )
    try {
        fgColor = attrs.getColor(
            R.styleable.CustomViewProgress_foregroundColor,
            fgColor
        )
        fgPaint.color = fgColor
        bgColor = attrs.getColor(
            R.styleable.CustomViewProgress_backgroundColor,
            bgColor
        )
        bgPaint.color = bgColor
        textColor = attrs.getColor(
            R.styleable.CustomViewProgress_textColor,
            textColor
        )
        textPaint.color = textColor
        remainingSecond = attrs.getInt(
            R.styleable.CustomViewProgress_duration,
            remainingSecond
        )
    } finally {
        attrs.recycle()
    }
    countDownProgress(remainingSecond.toLong())
}

따라서 나는 위 코드처럼 val attrs = context.theme.obtainStyledAttributes(attributeSet, R.styleable.커스텀뷰클래스명, 0, 0) 으로 정의하고 이를 이용해 불러왔음

 

onDraw() override

onDraw() 함수를 오버라이드해 onDraw() 함수 내부에서 draw 객체를 정의하여 그림. 단, draw를 사용하려면 객체에서 사용할 paint를 먼저 선언해줘야 함.

//Paint
val fgPaint = Paint().apply {
        flags = Paint.ANTI_ALIAS_FLAG
        style = Paint.Style.STROKE
        strokeWidth = mStrokeWidth
        color = fgColor
}

//프로그레스 진행이 되는 부분 그리기
canvas?.drawArc(
        viewBound.left + mStrokeWidth,
        viewBound.top + mStrokeWidth,
        viewBound.right - mStrokeWidth,
        viewBound.bottom - mStrokeWidth,
        -90f,
        progress,
        false,
        fgPaint
)

 

사용 override 메소드

1. onFinishInfalte() 뷰 및 뷰의 모든 하위가 xml에서 확장되었을 때 호출
2. onMeasure(Int, Int) 이 뷰 및 모든 하위 크기 요구사항을 결정할 때 호출
3. onLayout(boolean, int, int, int, int) 뷰가 모든 하위에 크기와 위치를 할당해야 할 때 호출
4. onSizeChanged(int, int, int, int) 뷰의 크기가 변경되었을 때 호출
5. onDraw(canvas) 뷰가 콘텐츠를 렌더링할 때 호출
   1. 최적화 시 주의해서 볼 메소드. onDraw에서 할당을 하게 되면 안됨. 또한 invalidate() 함수가 onDraw()를 실행시키기 때문에 invalidate()의 불필요한 호출도 있어서는 안 됨.
6. onKeyDown(int, KeyEvent), onKeyUp(int, KeyEvent) 키 이벤트
7. … 등등

 

호출 순서

생성자 → Measure → Layout → Draw → Visible to User

1. 생성자
   1. View(Context context) : 코드에서 View를 동적으로 만들 때 사용하는 생성자
   2. View(Context context, @Nullable AttributeSet attrs) : xml에서 View를 inflation할 때 호출되는 생성자
   3. View(Context context, @Nullable AttributeSet attrs, int defStyleAttr): xml에서 View를 inflation하고 테마 속성에서 클래스 별 기본 스타일을 적용 : defStyleAttr 매개 변수는 View의 기본값을 제공하는 Style 리소스에 대한 참조를 포함하는 현재 테마의 속성, 기본값을 찾지 않으려면 0으로 지정
   4. View(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes): defStyleRes는 View의 defStyleAttr이 0이거나 테마를 찾을 수 없는 경우에 기본값을 제공하는 Style 리소스 ID임, 기본값을 찾지 않으려면 0으로 지정
2. onMeasure(int widthMeasureSpec, int heightMeasureSpec) : 뷰의 크기를 확인하기 위해 호출됨. onMeasure 자체는 값을 반환하는데 사용되지 않고 setMeasureDimension()을 호출해 뷰의 너비와 높이를 명시적으로 설정함 : 매개변수인 width/heightMeasureSpec은 콜백으로 들어오며 이 값을 통해 xml에서 설정한 width, height의 모드와 크기를 알 수 있음 : 모드 MeasureSpec.getMode(measureSpec) → EXACTLY(match_parent, fill_parent, 혹은 실제 값을 입력해준 경우), AT_MOST(wrap_content로 설정한 경우), UNSPECIFIED(따로 설정하지 않은 경우): 크기 MeasureSpec.getSize(measureSpec)
3. onLayout(): 뷰를 측정하여 화면에 배치한 후 호출
4. onDraw(): 뷰가 그리는 단계

 

Greme에서 사용한 부분

// attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    // ...

    <declare-styleable name="ChallengeButton">
        <attr name="menu_icon" format="reference"/>
        <attr name="menu_description" format="string"/>
    </declare-styleable>

</resources>

// button_challenge.xml

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

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/menu"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:id="@+id/icon"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_challenge_basic"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="챌린지"
            android:textSize="@dimen/text10"
            android:layout_marginTop="@dimen/margin12"
            app:layout_constraintEnd_toEndOf="@+id/icon"
            app:layout_constraintStart_toStartOf="@+id/icon"
            app:layout_constraintTop_toBottomOf="@+id/icon" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

// ChallengeButton.xml

class ChallengeButton : ConstraintLayout {

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        init(context, attrs)
    }

    private val binding : ButtonChallengeBinding = ButtonChallengeBinding.inflate(
        LayoutInflater.from(context), this, true
    )

    lateinit var listener: ChallengeMenuButtonClickInterface

    private fun init(context: Context, attrs: AttributeSet){
        binding
        setAttrs(context, attrs)
        setClickListener()

    }

    private fun setAttrs(context: Context, attrs: AttributeSet) {
        try {
            val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ChallengeButton)
            val icon = typedArray.getResourceId(R.styleable.InterestButton_interest_icon, R.drawable.ic_challenge_main)
            binding.icon.setImageDrawable(AppCompatResources.getDrawable(context, icon))
            binding.description.text = typedArray.getString(R.styleable.InterestButton_interest_description)

            typedArray.recycle()
        } catch (exception: Exception) {
            exception.printStackTrace()
        }
    }

    private fun setClickListener() {
        binding.menu.setOnClickListener {
            if (this::listener.isInitialized) {
                listener.challengeMenuOnClick(binding.description.text.toString())
            }
        }
    }

    fun setCustomListener(listener: ChallengeMenuButtonClickInterface) {
        this.listener = listener
    }

    fun getMenuIconView(): ImageView {
        return binding.icon
    }

    fun getMenuDescView(): TextView {
        return binding.description
    }

}

this::listener.isInitialized : lateinit으로 선언한 것 할당 되었는지 확인

// fragment_home.xml 
// custom view 사용한 부분

<com.shootit.greme.ui.custom.ChallengeButton
		android:id="@+id/btnPopular"
		android:layout_columnWeight="1"
		android:layout_width="wrap_content"
		android:layout_gravity="center"
		android:layout_height="wrap_content"
		app:menu_icon="@drawable/ic_challenge_popular"
		app:menu_description="인기 챌린지"/>

 

레퍼런스

https://developer.android.com/guide/topics/ui/custom-components?hl=ko

https://www.charlezz.com/?p=29013

https://sungcheol-kim.gitbook.io/android-custom-view-programming/chapter01