[TIL] #23 Custom View + Error...😢

🌻 CustomView

1. CustomView?

• 안드로이드 애플리케이션에서 UI 요소를 사용자 정의하여 만드는 것을 말함

2. Why Create Custom Views?

• 재사용이 가능한 뷰를 만듦으로써 조금 더 쉽게 뷰를 사용하기 위해!
• 기본적으로 안드로이드 프레임워크는 여러 가지 미리 정의된 UI 요소를 제공하지만, 이러한 미리 정의된 요소만으로는 원하는 기능을 구현하기 어려운 경우가 있는데, 이때 커스텀 뷰를 생성하여 직접 구현하면 됨!

😢 Error...

커스텀 뷰를 공부하면서 간단한 코드를 작성해봤는데 약간의 오류가 생겼다.
분명 각각의 실제 이미지 사이즈는 같은데 에뮬레이터를 실행해보면 들쑥날쑥하다....

item들의 이미지의 크기를 다 똑같이 맞추고 싶어서 여러 가지를 시도해봤는데 해결이 안되서 튜터님한테 질문을 했다. 생각보다 너무 간단하게 해결되서 약간 민망했다😂 범인은 item.xml에 있었다!!

1. Before

이미지가 들쑥날쑥하게 나왔던 코드이다.

🖤 item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/iconItem"
        android:layout_width="@dimen/icon_size"
        android:layout_height="@dimen/icon_size"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:layout_marginHorizontal="10dp"
        android:padding="@dimen/icon_padding"
        android:scaleType="centerCrop"
        android:src="@drawable/sample_0" />

    <LinearLayout
        android:id="@+id/textContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textItem1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Name"
            android:padding="@dimen/list_item_padding"
            android:textColor="@color/black"
            android:textSize="@dimen/list_item_text_size1" />

        <TextView
            android:id="@+id/textItem2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="EP"
            android:padding="@dimen/list_item_padding"
            android:textColor="@color/gray"
            android:textSize="@dimen/list_item_text_size2" />
    </LinearLayout>

</LinearLayout>

이렇게만 봐서는 딱히 문제가 없는데 왜이러지? 이러면서 괜히 ImageView에 LinearLayout도 씌워봤다가, scaleType도 여러 가지로 바꿔도 보고, 이미지 사이즈가 1px이라도 다르면 안되나 싶어서 사이즈도 다 똑같이 맞추고,layout_weight를 삭제도 해봤다...
그런데 layout_weight를 삭제했을때 사이즈는 다 똑같은데 너무 작아져서 이건 아니구나 싶어서 다시 쓰고ㅠㅠㅜㅠㅠㅠㅜㅜ

gpt한테 물어봐도 이상한 소리만 해서 심란했다😭
이러다가 진주님한테 하소연을 했는데 튜터님한테 물어보자고 하셨당...그동안 한번도 질문해본적이 없어서 걱정하니까 같이 가주셨다ㅎㅎㅎ

2. After

종범 튜터님이 코드를 보시고 바로 집어주셨다!

1) 튜터님 해결방법

id/iconItem에 있는 layout_weight를 삭제하는 것을 말씀해주셨다!

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/iconItem"
        android:layout_width="@dimen/icon_size"
        android:layout_height="@dimen/icon_size"
        android:layout_gravity="center_vertical"
        android:padding="@dimen/icon_padding"
        android:scaleType="centerCrop"
        android:src="@drawable/sample_0" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textItem1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Name"
            android:padding="@dimen/list_item_padding"
            android:textColor="@color/black"
            android:textSize="@dimen/list_item_text_size1" />

        <TextView
            android:id="@+id/textItem2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="EP"
            android:padding="@dimen/list_item_padding"
            android:textColor="@color/gray"
            android:textSize="@dimen/list_item_text_size2" />
    </LinearLayout>

</LinearLayout>

layout_weight를 삭제하면 이미지 크기가 다 똑같이 된다. 이건 나도 시도했던 것인데 너무 작아져서 내가 뭔가 잘못한건가 해서 되돌린건데 맞는 방법이었다!!
대신 이미지 크기를 키우고 싶다면 dimen.xml에 정의한 icon_size 값을 수정해야 하는 것이다.
이전에는 60dp로 설정했었는데 100dp로 수정하니 아주 보기 좋은 사이즈로 됐다😊

2) 내 해결방법

튜터님이 알려주신 방법 말고도 또 할 수 있는게 뭐가 있을지 이것저것 또 만져보다가 id/iconItem의 sibling elements인 id/textContainer의 layout_width 값을 wrap_content에서0dp로 수정해봤다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/iconItem"
        android:layout_width="@dimen/icon_size"
        android:layout_height="@dimen/icon_size"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:padding="@dimen/icon_padding"
        android:scaleType="centerCrop"
        android:src="@drawable/sample_0" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textItem1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Name"
            android:padding="@dimen/list_item_padding"
            android:textColor="@color/black"
            android:textSize="@dimen/list_item_text_size1" />

        <TextView
            android:id="@+id/textItem2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="EP"
            android:padding="@dimen/list_item_padding"
            android:textColor="@color/gray"
            android:textSize="@dimen/list_item_text_size2" />
    </LinearLayout>

</LinearLayout>

id/iconItem의 layout_weight는 그대로 유지한채 했는데도 이미지들의 사이즈가 일정하다!

또 다른 해결방법이 있을 수 있지만 이걸로도 만족한다😊

---

[참고 사이트]

'Customview', developers