[안드로이드 스튜디오 정리#8-2] Resource-drawable/

이 게시물은 다음 링크를 참조하여 학습했습니다.

드로어블 리소스  |  Android 개발자  |  Android Developers

기본적인 Drawable 사용법 - Selector, Shape

1. drawable/

 drawable/ 리소스는 화면에 그릴 수 있는 리소스이다. 다른 리소스들은 일반적으로 xml파일이 하위 유형인 반면,

 drawable/ 리소스의 하위 유형은 비트맵파일( .bmp, .png, .jpg, .gif, .9.png) 또는 xml파일이다.

2. drawable/의 종류

 1) LayerDrawable

  배열을 관리하는 드로어블 객체. 목록에 포함된 각 드로어블은 나열된 순서대로 그려진다.

  구문

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>

  top, right, bottom, left : 각 방향별 픽셀 단위의 오프셋

LayerDrawable Example

 2) StateListDrawable

  객체의 상태에 따라 여러 다른 이미지를 사용하여 동일한 그래픽을 나타낸다.

  StateListDrawable의 속성은 다음과 같다.

속성	설명
color	16진수 색상 값 (#RGB, #ARGB, #RRGGBB, #AARRGGBB)
state_pressed	객체가 눌렸을 때 true
state_focused	객체에 포커스가 있을 때 true
state_hovered	커서가 객체를 카리킬 때 true
state_selected	객체가 선택되었을 때 true
state_checkable	객체가 선택 가능할 때 true
state_checked	객체가 선택될 때 true
state_enabled	객체가 사용 설정될 때 true
state_activated	객체가 영구적인 선택 항목으로 활성화되었을 때
state_window_focused	어플리케이션 창에 포커스가 있을 때 true

  StateListDrawable 예제

  button.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/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

  activity_main.xml

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

 3) LevelListDrawable

  대체 드로어블의 수를 관리하는 드로어블. 각 드로어블에는 최대 숫자 값이 할당된다.

  구문

<?xml version="1.0" encoding="utf-8"?>
<level-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/drawable_resource"
        android:maxLevel="integer"
        android:minLevel="integer" />
</level-list>

  LevelListDrawable 예제

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/status_off"
        android:maxLevel="0" />
    <item
        android:drawable="@drawable/status_on"
        android:maxLevel="1" />
</level-list>

 4) TransitionDrawable

  두개의 드로어블 리소스 간 크로스 페이드할 수 있는 드로어블 객체.

  크로스 페이드가 뭔지 몰라서 찾아봤는데 이미지가 A->B로 전환되는 일종의 애니메이션이라 생각하면 된다.

  다음 그림과 같은 느낌이다.

Cross Fade

  구문

<?xml version="1.0" encoding="utf-8"?>
<transition
xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</transition>

  drawable : 드로어블 리소스에 대한 참조

  top, right, bottom, left : 각 방향별 픽셀 단위의 오프셋

 5) InsetDrawable

  쉽게 생각하면 padding을 주는 드로어블이라 생각하면 된다. inset값을 주어 해당방향의 padding값을 조정한다.

  구문

<?xml version="1.0" encoding="utf-8"?>
<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:insetTop="dimension"
    android:insetRight="dimension"
    android:insetBottom="dimension"
    android:insetLeft="dimension" />

  drawable : 드로어블 리소스에 대한 참조

  insetTop, insetRight, insetBottom, insetLeft : 각 방향별 픽셀 단위의 오프셋

 6) ClipDrawable

  드로어블을 클립해준다. 쉽게 생각하면 지정한 방향을 기준으로 0 ~ 10,000 사이의 값을 주어 드로어블을 가린다.

  구문

<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:clipOrientation=["horizontal" | "vertical"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                     "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                     "center" | "fill" | "clip_vertical" | "clip_horizontal"] />

  clipOrientation : 클립 방향

  gravity : 클립할 위치를 지정

ClipDrawable Example

  위의 사진은 레벨 값이 7,000인 경우이다. 

  참고로 기본 레벨은 0이며 이 경우 이미지가 표시되지 않고,

  레벨 값이 10,000이면 이미지가 클립되지 않고 완전히 표시된다. 

 7) ScaleDrawable

  현재 레벨을 기준으로 다른 드로어블의 크기를 변경한다.

  구문

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/drawable_resource"
    android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                          "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                          "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:scaleHeight="percentage"
    android:scaleWidth="percentage" />

  scaleGravity : 배율 조정 후 배치 위치

  scaleHeight, scaleWidth : 배율 조정 높이, 너비

 8) ShapeDrawable

  드로어블의 모양을 결정해준다. 소스코드에서 Canvas없이 간단한 도형을 그릴 수 있다.

  구문

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

값	설명
"rectangle"	포함하는 뷰를 채우는 사각형. default 값
"oval"	포함하는 뷰의 치수에 맞는 타원.
"line"	포함하는 뷰의 너비에 걸쳐 있는 가로선
"ring"	고리형 shape

  (1)-1. "ring" : 다음 특성은 android:shape = "ring"인 경우에만 사용된다.

속성	설명
android:innerRadius	고리 내부의 반경 ( 치수 값 )
android:innerRadiusRatio	고리 내부의 반경으로, 고리 너비에 대한 비율( 부동 소수점 수 )
android:thickness	고리의 두께 ( 치수 값)
android:thicknessRatio	고리의 두께로, 너비에 대한 비율( 부동 소수점 수 )
android:useLevel	LevelListDrawable로 사용되는 경우 "true"

  (1)-2. "reectangle" : 다음 특성은 android:shape = "rectangle"인 경우에만 사용된다.

속성	설명
android:radius	모든 모서리 반경
android:topLeftRadius	왼쪽 상단 모서리 반경
android:topRightRadius	오른쪽 상단 모서리 반경
android:bottomLeftRadius	왼쪽 하단 모서리 반경
android:bottomRightRadius	오른쪽 하단 모서리 반경

  (2) <gradient> : shape에 대한 그라데이션 색상 지정

속성	설명
android:angle	그라데이션의 각도 ( 정수 값, 45의 배수 )
android:centerX	그라데이션의 중심에 대한 상대적인 X위치( 0.0~1.0 )
android:centerY	그라데이션의 중심에 대한 상대적인 Y위치( 0.0~1.0 )
android:centerColor	시작 색상과 끝 색상 사이에 오는 색상(선택항목), ( 색상 값 )
android:endColor	끝 색상 ( 색상 값 )
android:gradientRadius	그라데이션의 반경 type = "radial"인 경우만 적용 ( 부동 소수점 수 )
android:startColor	시작 색상 ( 색상 값 )
android:type	적용할 그라데이션 패턴의 유형 ( KeyWord )
android:useLevel	LevelListDrawable로 사용되는 경우 "true"

   (2)-1. android:type

  - "linear" : 선형 그라데이션.( default 값 )

  - "radial" : 원형 그라데이션.

  - "sweep" : 스위핑 그라데이션

  (3) <padding> : 뷰 요소에 적용할 패딩

  (4) <size> : shape의 크기

  (5) <solid> : shape를 채울 단색.( 색상 값 )

  (6) <stroke> : shape에 대한 스트로크 선

   dashGap과 dashWidth를 설정하지 않으면 테두리가 된다.

속성	설명
android:width	선의 두께 ( 치수 값 )
android:color	선의 색상 ( 색상 값 )
android:dashGap	점선 사이의 거리 ( 치수 값 ) , dashWidth가 설정된 경우에만 유효
android:dashWidth	점선의 크기 ( 치수 값 ), dashGap이 설정된 경우에만 유효