1) 상태 드로어블

들어가기 전에

​

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

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

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

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

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

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

학습 목표

​

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

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

핵심 단어

​

· Drawable

· StateListDrawable

· ShapeDrawable

학습하기

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

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

​

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

​

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

알고 계시죠?

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

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

​

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

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

드로어블의 종류

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

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

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

드로어블을 만든 후 <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 이미지가 디폴트로 설정되어 있고, 이 이미지는 뷰가 눌렸을 때 보이게 됩니다.

​

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

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

생각해보기

​

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

​

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

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

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

​

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

​

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

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