모바일/안드로이드앱

안드로이드 드로어블 만들기/ Android Studio / 안드로이드 앱만들기 공부 12

yy_dd2 2021. 2. 24. 18:05
반응형

드로어블 만들기

새로 만든 드로어블 XML에 버튼의 스타일을 입힌 뒤에

메인 XML에 불러와서 사용이 가능하다는 것이 드로어블이다

 

뷰의 배경 이미지

배경 이미지로 설정하면 이미지는 아무런 변화가 없다 그런데 버튼이 눌렸을 때 눌린 이미지가 보이게 하고 싶다면 어떻게 할까? 드로어블을 사용한다 드로어블은 상태에 따라 그래픽이나 이미지가 선택적으로 보이게 할 수 있다.

 

1. SampleDrawable 프로젝트 생성

2. activity_main.xml 텍스트뷰 삭제

3. 한가운데 새버튼 추가

4. 이미지 추가 (finger.png / finger_pressed.png)

5. 추가한 이미지를 화면 중앙에 추가한 버튼의 배경으로 설정

background 속성을 찾아서 [...]을 누르면 이미지를 선택할 수 있는 대화상자가 나온다

대화상자 왼쪽의 탭 항목 중에서 가장 위쪽에 있는 Drawable 탭이 선택되어있다

Drawable탭은 이미지나 드로어블을  선택할 때 사용되는 탭이다

project, android 폴더로 나누어져 있는데 project 폴더는 내가 만든 프로젝트에 포함된 이미지나 드로어블을 가리킨다.

android 폴더는 안드로이드 기본 API에 포함된 이미지나 드로어블을 가리킨다.

6. project 폴더에 넣은 복사해 붙여넣은 이미지 finger를 선택 후 ok 한다

드로어블을 이용해 버튼을 누르면 다른 이미지가 보이도록 하기

 

드로어블

드로어블은 뷰에 설정이 가능한 객체다 그 위에 그래픽을 그릴 수 있다

드로어블은 보통 소스코드에 작성하게되지만, 소스코드가 아닌 XML로 그래픽을 그린다면 더 편리하다고함

드로어블 XML 파일은 이미지를 버튼 배경으로 한 것 처럼 /app/res/drawable 폴더 안에 넣고 버튼뷰의 배경으로 설정이 가능하다. (drawable 폴더 안에 이미지가 아닌 XML 파일에 들어가는 이미지처럼 설정된다)

 

드로어블 설명
비트맵 드로어블 (BitmapDrawable) 이미지 파일을 보여줄 때 사용
비트맵 그래픽 파일(png, jpg, gif 등)을 사용해서 생성
상태 드로어블 (StateListDrawable) 상태별로 다른 비트맵 그래픽 참조
전환 드로어블 (TransitionDrawable) 두 개의 드로어블을 서로 전환 함
셰이프 드로어블 (ShapeDrawable) 색상과 그라데이션을 포함해 도형 모양 정의
인셋 드로어블 (InsetDrawable) 지정된 거리만큼 다른 드로어블 보여줌
클립 드로어블 (ClipDrawable) 레벨 값을 기준으로 다른 드로어블 클리핑이 가능
스케일 드로어블 (ScaleDrawable) 레벨 값을 기준으로 다른 드로어블 크기 변경 가능

상태 드로어블 (StateDrawable)과 셰이프 드로어블 (ShapeDrawable)을 많이 사용함

 

상태 드로어블 만들기

뷰의 상태에 따라 뷰에 보여줄 그래픽을 다르게 지정하는것

 

1. 새로운 드로어블 XML 파일 만들기

- 프로젝트 /app/res/drawable 폴더 -> 마우스 오른쪽 -> [New Drawable resource file] 선택

- [New Resource File] 대화상자에 File name : finger_drawable.xml 입력

- <selector> 태그가 보이는데 최상위 태그의 <selector> 안에는 <item> 태그를 넣을 수 있음

- <item> 태그의 drawable 속성에 이미지나 다른 그래픽을 설정해 보여줌

- start_ 시작하는 속성은 상태를 나타냄

- start_pressed 속성은 눌린상태 starte_focused 포커스 받은 상태 의미

2. finger.xml 소스 수정

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

    <item android:state_pressed="true"
          android:drawable="@drawable/finger_pressed" />
    <item android:drawable="@drawable/finger" />
</selector>

 

** 상태 드로어블 (StateListDrawable) 정리

버튼에 배경이미지를 넣을때 .png .jpg .gif 같은 파일들을 app/res/drawable 파일에 넣어서 사용했다면

1. XML 파일을 만들어 <selector> 안에 <item>을 만들다

2. XML안에 이미지를 지정하고 그안에 속성으로 기본 이미지와 start_pressed 속성처럼 눌린상태 같은 속성을 지정한다

(하나의 이벤트 처리 XML을 만든 후)

3. activity_main.xml에서 만들어둔 XML 파일을 이미지로 지정할 수 있다

셰이프 드로어블 만들기

XML로 도형과 그라데이션을 만들 수 있음

* 도형 드로어블

1. 새로운 드로어블 XML 파일 만들기

- 프로젝트 /app/res/drawable 폴더 -> 마우스 오른쪽 -> [New Drawable resource file] 선택

- [New Resource File] 대화상자에 File name : rect_drawable.xml 입력

- 최상위 태그는 <shape>로 변경

   android:shape="rectangle" 속성 추가 (사각형 도형 / oval 원형)

- <shape> 안에 <size> 태그로 도형의 크기 지정

- <stroke 테두리의 선의 속성 width : 선의 굵기 color : 선의 색상

- <solid> 도형의 안쪽을 채울 때 사용

- <padding> 태두리 안쪽 공간 띄우기

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

    <size android:width="200dp" android:height="120dp" />
    <stroke android:width="1dp" android:color="#0000ff" />
    <solid android:color="#aaddff" />
    <padding android:bottom="1dp" />

</shape>

2. activity_main.xml에서 확인

- 새버튼 추가 background 속성을 @drawable/rect_drawable

- 버튼 추가 후 글로 작성하지 않아도 확인 가능

 

* 그라데이션 드로어블

- 앱의 배경화면을 그라데이션으로 지정 할것

1. 새로운 드로어블 XML 파일 만들기

- 프로젝트 /app/res/drawable 폴더 -> 마우스 오른쪽 -> [New Drawable resource file] 선택

- [New Resource File] 대화상자에 File name : back_drawable.xml 입력

- <shape> <gradient>

- startColor, centerColor, endColor 를 지정

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:centerY="0.5"
        android:startColor="#7288DB"
        android:centerColor="#3250B4"
        android:endColor="#254099"
        />
    <corners android:radius="2dp" />
</shape>

2. activity_main.xml에서 최상위 레이아웃 background 변경

 

<layer-list>를 이용하면 여러 개의 그래픽을 하나의 XML파일에 넣을 수 있다.

(하나의 그래픽보다는 여러개의 그래픽으로 중첩시키면 좀 더 예쁘게 할 수 있음)

 

투명한 배경에 테두리가 있는 버튼 만들기 <layer-list> 사용

1. 새로운 드로어블 XML 파일 만들기

- 프로젝트 /app/res/drawable 폴더 -> 마우스 오른쪽 -> [New Drawable resource file] 선택

- [New Resource File] 대화상자에 File name : border_drawable.xml 입력

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

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#BE55DA" />
            <solid android:color="#0000000000" />
            <size android:width="200dp" android:height="100dp" />
        </shape>
    </item>

    <item android:top="1dp" android:bottom="1dp"
          android:right="1dp" android:left="1dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FF55DA" />
            <solid android:color="#00000000" />
        </shape>
    </item>

</layer-list>

 

 

반응형