Drawable In Drawable

우리는 개발을 진행하면서 이미지를 보여줄 때 ImageView를 사용하게 된다.
그리고 이미지 뷰에 이미지를 보여주는 방법은 크게 3가지정도가 있었다.

1. 해당 이미지뷰에 일반적으로 서버로부터 url을 받아와서 흔히 사용하는 이미지 라이브러리(Glide,Picasso등…)을 사용해서 이미지뷰에 load를 시켜주는 식으로 사용한다.
   ex ) Glide.with(context).load()~~~어쩌구저쩌구…
2. 혹은 안드로이드에 vector이미지나 png파일을 저장하여 attribute : src 혹은 background에 지정해서 사용하기도 한다.
   ex ) imageView.setBackgroundResource()
   ex ) <imageView android : src =”@drawble/어쩌구 저쩌구"
3. 혹은 안드로이드에서 제공하는 selector, shape 등을 이용해서 내가 원하는 모양을 어느정도 직접 만들어 낼 수 있다.
   (하지만 이 경우는 백그라운드에서 부분적 round를 줄때 주로 사용했고 사실상 디자이너에게 부탁해 2번처럼 이미지를 svg로 추출해달라고 부탁해서 주로 사용했다.)
   ex )

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid
                android:color="#2e81f8"/>
        </shape>
    </item>
</selector>

이번 포스팅에서 다루고자 하는 내용은 3번의 응용이다.

만약 위와 같이 이미지뷰에 회색 바탕 + 라운드 + 중앙에 카메라 이미지가 필요하다면 어떻게 구현할 수 있을까?

늘 그렇지만 방법은 여러가지가 있다.

1. 이미지뷰를 2개 활용하여 1개는 백그라운드를 나머지 1개는 카메라를 로드한다.
2. 한개의 이미지뷰를 활용하여 setBackground에는 회색 drawble을 로드하고 src에는 카메라를 로드한 뒤 padding으로 카메라의 사이즈와 위치를 잡아준다.
3. layer-list를 이용하여 2개의 item이 들어간 drawable파일을 생성한다.

여기에서 1,2는 각각 문제점이 발생했다.

1번 문제점

회색 배경의 이미지뷰에 서버로부터 받는 이미지가 있을 경우 load해주어야하는데 그 때마다 카메라 아이콘의 이미지뷰를 제거시켜주어야 한다. 즉 서버의 이미지에 대한 값을 상태로 잡고 그것에 맞추어서 visibility를 조절해주어야 한다.

2번 문제점

한개의 이미지뷰에서 src와 background를 동시에 적용하게 되면 1번과 비슷하게 서버의 이미지를 로드할 경우 src를 해제시켜주어야한다.

그래서 3번 방법을 선택하였다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/primaryNatureGrey" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item
        android:bottom="69dp"
        android:drawable="@drawable/ic_camera_grey"
        android:left="60dp"
        android:right="60dp"
        android:top="69dp" />
</layer-list>

다음은 실제로 사용한 drawable파일이다.

1. <layer-list를 이용하여 여러개의 아이템을 사용한다는걸 명시한다.
2. 배경이 될 아이템을 넣고 radius를 적용하여 준다.
3. 그 아래에 내가 넣고싶은 camera 아이콘을 drawble로 넣어주고 해당 레이어에서의 위치를 설정해준다.

어려운 개념이 아니지만 자주 사용하지 않았고 여지껏 이미지를 겹쳐서 표현한 것이 있다면 충분히 응용이 가능할것같다.