안녕하세요.  볼레로 입니다.

sytle 이라고,    values/styles.xml  파일에  미리 스타일을 만들어 넣고 사용하는 기능이 있는데요.

아무 책이나 보면  간단하게 설명이 나옵니다.

그런데, 책에 있는 설명들이 너무 빈약해서  좀 그렇더군요.


style에도 상속기능이 있더군요. 


클래스의 상속기능을 이야기 할때,   부모 클래스에는  공통분모를 넣어두면  상속 받은  자식 클래스는  해당 기능을 동일하게  사용가능하죠.


그럼,  style에  상속기능은 어떨 때 필요 할까요? 


예들 들어,   Video Player를  만드는데,   
Play,  Pause,  Stop 등의 버튼을   디자인 할텐데요. 

보통  이런  버튼은   가운데 부분만 다르고,   버튼의 주변이나 배경으로 동일할 경우가 대부분입니다.
이것 뿐만 아니라   보통 한 프로그램에서 사용하는 버튼은   비슷한 형태를  갖게 되지요.


그럼,   이런 경우   디자이너 한테  몇개의  이미지를 그려달라고 해야 할까요?


우선,  Play 버튼은   normal 상태,  press 된 상태,  focus 된 상태,   disable 된 상태   정도가 필요하겠지요.


그럼,  버튼 1개당  4개씩 필요하다고 보면,  
버튼의 갯수  x  4개의 이미지가 필요하게 됩니다.

만약 버튼이  10개라면    10 x 4  = 40 개의 이미지가 필요하게 됩니다.



그런데,   조금만 생각해 보면,  

버튼에서  바뀌는 부분  과     배경을  분리할 수 있다면    이미지의 갯수를  줄일 수가 있겠지요.

예를 들어,

배경 부분은     normal,  pressed,  focused, disable  로  나누고,
그위에    버튼의  구분할 수 있을 icon 을 올리는  방식으로   나눈다면, 

1개의 이미지를 만들때는   5개의 이미지가 필요하지만,    
배경 부분은   공통으로 사용이 가능 하므로,   

10개의 버튼이 있다면,    10 x  1 + 4 =    14개의  이미지만  만들면  되게 됩니다.



그럼,   배경과   icon 부분을 분리하면   어떻게   스킨 파일을 만들어 쓸 수가 있을 까요?



먼저   ImageButton의  도움말을  보면,   
http://developer.android.com/reference/android/widget/ImageButton.html

<selector>  태그에 대한 설명 있습니다.

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@drawable/button_normal" /> <!-- default -->
     <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_enabled="false" 
    	   android:drawable="@drawable/button_disabled" />
 </selector>

제가  disable 를 하나 추가하였습니다.  뭐 이건 필요 없으면  제거 하셔도 됩니다.


이렇게  xml 파일을 만들어서   drawable  디렉토리에  넣으시면 되구요.
물론,   위  빨간색으로 표시한  이미지도 같이 올려 놓아야 합니다.



첨부한 파일처럼  4개의 이미지를  만들어 같이 넣어 주시면 됩니다.

위 xml 코드는   button_background.xml  정도로 넣어 주시면 될 듯합니다.


이제  View에   올린  ImageButton의  속성 중에  src에   위 파일을 지정해 주면  우선  버튼이 각 동작에 따라 변화하는 모습을 보실 수가 있습니다.



여기 까지는   안드로이드  사이트에도 나오는 이야기 이구요.


그럼 앞에서 이야기한     배경과 분리된 icon을  같이 쓰려면 어떻게 할까요?



이  버튼을   앞의  배경 버튼에  올리고 싶습니다.


background 에서   위에서 만든  xml 파일 지정하고,
src에   icon 파일명 지정하면 되죠.

정답입니다 ^^

<ImageButton android:id="@+id/play"
       android:background="@drawable/button_background"
       android:src="@drawable/ic_media_play"/>

위와 같이요,   


뭐야  그냥 되는 건데,   제목하고  상관 없는  엉뚱한 이야기 하고,  끝나남......



이제  style에  대해서 이야기 해 봅시다. 

보통 한 프로그램의  버튼 들은  대부분  크기가 동일하건,   정렬 방식이 같다 든가 하는 공통점이 있지요.

이런것을 추가 하면    위의  <ImageButton  태그에  각각 넣어주어야  하겠지요.



이제는  배경부부만   하나로  모으는 것이 아니라    이미지 이외의 속성도  하나로  모아 보겠습니다.


values/styles.xml 파일에  아래와 같이  넣어 줍니다.

<resources>
    <style name="PlayButton">
        <item name="android:background">@drawable/button_background</item>
        <item name="android:layout_width">71dip</item>
        <item name="android:layout_height">52dip</item>
        <item name="android:src">@drawable/ic_media_play</item>
    </style>

</resources>

원래,   화면 view의  xml  코드는  아래와 같이 바꿉니다.

<ImageButton android:id="@+id/play" style="@style/PlayButton" />


이렇게  스타일로 바꾸었습니다.




이제    Pause 버튼이 추가되면  어떻게 될까요?

--------------- styles.xml ----------------
<resources>
    <style name="PlayButton">
        <item name="android:background">@drawable/button_background</item>
        <item name="android:layout_width">71dip</item>
        <item name="android:layout_height">52dip</item>
        <item name="android:src">@drawable/ic_media_play</item>
    </style>
  
    <style name="PauseButton">
        <item name="android:background">@drawable/button_background</item>
        <item name="android:layout_width">71dip</item>
        <item name="android:layout_height">52dip</item>
        <item name="android:src">@drawable/ic_media_pause</item>
    </style>
</resources>

------------  main.xml -------------
<ImageButton android:id="@+id/play" style="@style/PlayButton" />
<ImageButton android:id="@+id/pause" style="@style/PauseButton" />


이런식으로 바뀔 텐데요.  

여기서   styles.xml  쪽 코드를  보면   똑같은 부분이 반복 되는 것을 보실 수가 있습니다.
반복 되는 부분을 뽑아서  별도의 스타일로 만듭니다.


--------------- styles.xml ----------------
<resources>
    <style name="MediaButton">              <!--  부모 스타일 이름  -->
        <item name="android:background">@drawable/button_background</item>
        <item name="android:layout_width">71dip</item>
        <item name="android:layout_height">52dip</item>
    </style>
  
    <style name="MediaButton.Play">     <!--  자식 스타일 이름  -->
        <item name="android:src">@drawable/ic_media_play</item>
    </style>

    <style name="MediaButton.Pause">
        <item name="android:src">@drawable/ic_media_pause</item>
    </style>
</resources>


------------  main.xml -------------
<ImageButton android:id="@+id/play" style="@style/MediaButton.Play" />
<ImageButton android:id="@+id/pause" style="@style/MediaButton.Pause" />


이런식으로  바꾸어 줍니다.

ImageButton의  태그에서는    자식스타일의 이름만 지정하였는데요.

이렇게 지정해도  앞의 스타일 처럼    부모스타일과  자식 스타일 모두 적용이 되어서 
backgound,  src,   layout_width, layout_height  가  모두 적용이 되게 된답니다.



수고하세요^^