Android CustomView

react의 컴포넌트 처럼 특정 레이아웃을 가지고 있는 View의 집합을 설정해준다.

1. 커스텀 뷰의 xml 파일

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:background="@drawable/background_radius_10_light_gray"
        android:layout_marginTop="8dp"
        android:padding="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
       
        <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/water_24"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />
       
        <TextView
            android:layout_marginStart="4dp"
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="강수량"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/icon"
            app:layout_constraintTop_toTopOf="parent" />
       
        <TextView
            android:id="@+id/content"
            android:textStyle="bold"
            android:text="시간당 : "
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@id/title"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            />
       
    </androidx.constraintlayout.widget.ConstraintLayout>
   

2. 커스텀 뷰의 kotlin 파일

    class WeatherInfoContainer(context: Context, attrs: AttributeSet): ConstraintLayout(context, attrs) {
    		// 데이터를 보여줄 레이아웃
        private val binding = CustomWeatherInfoContainerBinding.inflate(LayoutInflater.from(context), this, false)
       
        init {
            context.theme.obtainStyledAttributes(
                attrs,
                R.styleable.WeatherInfoContainer,
                0, 0
            ).apply {
                try {
    								// 실제로 연결된 요소에 바인딩
                    val img = getDrawable(R.styleable.WeatherInfoContainer_WeatherInfoImg)
                    binding.icon.setImageDrawable(img)
       
                    val title = getString(R.styleable.WeatherInfoContainer_WeatherInfoTitle)
                    binding.title.text = title
                } catch (e: Error) {
                    Log.e("WeatherInfoContainer", "$e")
                } finally {
                    recycle()
    								// 하단의 코드가 없으면 layout을 만들어도 보이지 않음
                    addView(binding.root)
                }
            }
        }
       
    		// 레이아웃의 이벤트나 변경을 함수로 따로 작성하여 Fragment 나 Activity에서 사용할 수 있음
        fun UnitChange(text: String) {
            binding.content.text = text
        }
    }
   

3. Actvity, Fragment에서 사용하기

    ...
    	<com.example.application.custom
    		android:layout_height="wrap_content"
    		android:layout_width="wrap_content"
    		/>
    ...
   

추가적으로 커스텀 뷰마다 내용이 다르게 들어가고 싶다면 res/value/attr 에 원하는 component 이름과 속성을 적어준다.

<resources>
		// 아래 변수를 가질 component 이름
    <declare-styleable name="WeatherInfoContainer">
				// 변수이름과 타입을 설정
        <attr name="WeatherInfoImg" format="reference|string"/>
        <attr name="WeatherInfoTitle" format="reference|string"/>
        <attr name="WeatherInfoContent" format="reference|string"/>
    </declare-styleable>
</resources>