[UI] Drawable

패스트캠퍼스 강의 [UI] 21

이미지를 외부에서 받아서 사용하는 방법도 있지만 drawable file을 간단하게 코드로 구현해서 직접 만들 수도 있다.

 

<파일 만들기>

Drawable 파일 우클릭 -> New -> Drawable Resource File

---

<gradation>

1. selector를 shape로 바꿔줌

2. shape 엔딩 태그 안에서 android:shape=""

   선택지: line, oval, rectangle, ring이 있음. 일단은 rectangle 설정

 

3. gradient 를 열어줌

   centercolor, endcolor, startcolor를 설정한다.

4. angle: 회전, 각도 바꾸기

 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:centerColor="#E91E63"
        android:endColor="#00BCD4"
        android:startColor="#FFEB3B"
        android:angle=""/>

</shape>

예시

그라데이션이 들어간 이미지 파일을 사용하는 것보다 직접 그려서 사용하는 것이 좋다. 이미지 파일을 불러오면 매끄럽지 않을 수가 있기 때문.

---

<stroke>

선을 긋는 것

1. selector를 shape로 바꿔줌

2. shape 엔딩 태그 안에서 android:shape="rectangle"

 

3. stroke를 열어줌

4. color: 설정

   width: 선의 두께 설정

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="20dp"
        android:color="#FF5722" />
    
</shape>

예시

---

<solid>

면을 그리는 것

1. selector를 shape로 바꿔줌

2. shape 엔딩 태그 안에서 android:shape="rectangle"

 

3. solid를 열어줌

4. color 설정

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#8BC34A" />

</shape>

예시

---

<coners>

모서리 깎는 것

1. solid 생성 후

2. coners 열어줌

3. radius 값 설정

    radius: 4 모서리 모두 동등하게 설정

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#009688" />

    <corners
        android:bottomLeftRadius="50dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="100dp" />
</shape>

예시

---

<추가>

항상 상단에 있는 코드: xmlns:android="http://schemas.android.com/apk/res/android"

아래 코드에서 android 라고 써져있는 option을 사용하려면 항상 저 코드를 최상위 view에 지정해주어야 한다.