로그인 바로가기 하위 메뉴 바로가기 본문 바로가기
난이도
심화

안드로이드 앱 프로그래밍

임시 이미지 정재곤
http://www.boostcourse.org/mo316/notice/2613
좋아요 1436 수강생 20099
아래의 글은 BOOSTER 서포터즈로 활동했던 김구라니(rbfks1***)님이
작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************
1)링크: https://blog.naver.com/rbfks1221/221810549307

2)작성날짜: 20/02/15
 
<본문내용>

1. 레이아웃 만들기

8. 드로어블 만들기

[부스트코스] 안드로이드 프로그래밍

1) 상태 드로어블

[LECTURE] 1) 상태 드로어블 : edwith

들어가기 전에 뷰의 background 속성을 이용하면 배경색을 지정할 수도 있고 /res/drawable 폴더에 넣어둔 이미지 파일을 설정하여 배경 이미지가 보이게 할 수도 있습... - 부스트코스

www.edwith.org


들어가기 전에

뷰의 background 속성을 이용하면 배경색을 지정할 수도 있고 /res/drawable 폴더에 넣어둔 이미지 파일을 설정하여 배경 이미지가 보이게 할 수도 있습니다.

그런데 배경으로 이미지를 설정하면 그 이미지는 아무런 변화가 없습니다. 버튼의 배경으로 설정하면 버튼이 눌렸을 때나 눌리지 않았을 때 모두 같은 이미지가 보이는 거죠.

그러면 버튼이 눌렸을 때 눌린 이미지, 평소에는 그냥 이미지가 배경으로 보이도록 하고 싶을 경우에는 어떻게 할까요?

드로어블을 사용하면 가능합니다.

드로어블을 사용하면 뷰나 화면 일부를 그래픽으로 그리는 기능을 XML로 만들 수 있습니다.

드로어블을 어떻게 만들 수 있는지 알아봅시다.


학습 목표

1) 드로어블이 무엇인지 이해하고 XML로 만들어봅시다.

2) 상태 드로어블을 사용하면 뷰의 상태에 따라 어떻게 배경 이미지가 달라지는 것인지 설명해봅시다.


핵심 단어

· Drawable

· StateListDrawable

· ShapeDrawable


학습하기

드로어블(Drawable) 이란?

드로어블(Drawable)뷰에 설정할 수 있는 객체입니다.

쉽게 말해, 뷰 안에 그릴 수 있는 그래픽을 뜻한다는 거죠!

그래픽이라고 하면 흔히 떠올리는 것이 선이나 원을 선으로 그려주는 것인데요, 이런 작업은 보통 소스 코드에서 하게 됩니다.

하지만 화면과 자바 소스 코드가 분리되어 있고, 화면을 어떻게 보이도록 할지는 XML로 만든다는 것!

알고 계시죠?

이처럼 소스 코드가 아닌 XML로 그래픽이 어떻게 그려질지 정의할 수 있다면 좀 더 편리하게 사용할 수 있을 거예요!

그래서 드로어블은 소스 코드에서도 만들 수 있지만, XML 코드로 만들어 사용하는 경우가 많답니다!

드로어블 XML 파일은 /res/drawable 폴더에 넣어서 마치 이미지처럼 뷰의 배경으로 설정될 수 있어요.

이 드로어블 XML 안에는 여러 가지가 들어갈 수 있답니다!

드로어블(Drawable)의 종류

드로어블의 종류

이렇게 다양한 기능의 드로어블들이 있지만,

그중에서 앱을 만들 때 가장 많이 사용하는 드로어블은 상태 드로어블쉐이프 드로어블이랍니다!

상태 드로어블(StateListDrawable)

상태 드로어블은 뷰의 상태에 따라 뷰에 보여줄 그래픽을 다르게 지정할 수 있도록 하는데요.

드로어블을 만든 후 <item> 태그를 추가한 모습

/res/drawable 폴더 안에 새로운 XML 파일을 만들면 최상위 태그는 <selector>가 됩니다.

그 안에는 <item> 태그를 넣을 수 있는데요.

또 이 <item> 태그 안에는 몇 가지 속성들을 추가할 수 있답니다!

drawable 속성으로는 이미지나 다른 그래픽을 설정하여 화면에 보이도록 할 수 있습니다.

state_ 로 시작하는 속성은 상태를 나타내는데요.

예를 들어, state_pressed 속성은 눌린 상태를 의미하고 state_focused는 포커스를 받은 상태를 의미하는 거죠!

상태 속성이 지정되지 않은 <item> 태그에는 drawable 속성에 ic_thumb_up 이미지가 디폴트 이미지로 설정되어 있어요.

state_pressed 속성이 설정된 <item> 태그에는 ic_thumb_up_selected 이미지가 디폴트로 설정되어 있고, 이 이미지는 뷰가 눌렸을 때 보이게 됩니다.

<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_thumb_up_selected" android:state_pressed="true" /> <item android:drawable="@drawable/ic_thumb_up" /> </selector>

이렇게 만든 XML 파일은 뷰의 background 속성으로 설정될 수 있겠죠?

/res/drawable 폴더 안에 thumb_up.xml 이라는 이름의 파일을 만들었다면 다음과 같이 버튼의 배경으로 설정할 수 있답니다!

<Button android:id="@+id/button" android:layout_width="80dp" android:layout_height="80dp" android:background="@drawable/thumb_up" />

생각해보기

1. 소스 코드로 드로어블을 만드는 것보다 XML로 드로어블을 만들어 사용하면 얼마나 더 편리해지는 걸까요?

예를 들어, 클릭 이벤트가 같은 버튼들이 여러 개 있다고 가정해 볼게요.

소스 코드로 이 버튼들에 동일한 클릭 이벤트를 주기 위해서는 같은 코드를 여러 번 반복해서 써야 할 거예요.

하지만 XML로 만들어 놓은 드로어블을 사용하게 되면 background 설정 한 번만 하면 되므로 굉장히 편리해지겠죠?

2. XML로 드로어블을 만들고 레이아웃의 배경으로 설정하면 카드 모양의 배경을 만들 수 있을까요?

네. 레이아웃의 background 속성을 활용하면 만들 수 있지 않을까요?


다음 포스팅에서는 쉐이프 드로어블(ShpaeDrawable)에 대해 자세히 알아보도록 할게요!

 

 
*********************************************