[android] CheckBox에서 image와 text 간격

안드로이드에서 checkbox를 사용할 때 주의점이 있다. Check 이미지와 text의 간격을 조정하기 위해서는 paddingLeft를 사용하는데, XML에서 사용하면 API 16 이하에서는 동작하지 않는다. ( API 17 : 젤리빈 에서 수정되었다. )

 

<CheckBox

android:id="@+id/twitter_connect_checkbox"

android:button="@drawable/ selector_common_checkbox"

android:layout_alignParentLeft="true"

android:layout_marginLeft="10dp"

android:paddingLeft="5dp"

android:text="@string/some_text " />

 

android의 버전별로 호환성을 유지하기 위해서는, 위의 paddingLeft를 XML에서는 빼고 코드로 처리하는 것이 바람직하다.

final float scale = getResources().getDisplayMetrics().density;

checkBox.setPadding(checkBox.getPaddingLeft() + (int)(30.0f * scale + 0.5f),

checkBox.getPaddingTop(),

checkBox.getPaddingRight(),

checkBox.getPaddingBottom());

                     

다른 방법으로는 drawableLeft 사용하여 이미지를 표시하고, 이미지의 간격 조정은 drawablePadding으로, 텍스트의 간격 조정은 paddingLeft 등으로 처리하는 것이다.

아래는 checkbox 대신 ToggleButton으로 변경하여 처리한 방법이다.

 

<ToggleButton

android:id="@+id/twitter_connect_checkbox"

android:drawableLeft="@drawable/ selector_common_checkbox"

android:drawablePadding="5dp"

android:layout_alignParentLeft="true"

android:layout_marginLeft="10dp"

android:paddingLeft="5dp"

android:text="@string/some_text " />

 

drawableLeft, drawableRight, drawableTop, drawableBottom 등으로 component의 원하는 위치에 이미지를 설정할수 있다.  drawablePadding 값은 컨트롤 내부에서 이미지의 간격을 조정하는 값이다. paddingLeft는 이미지와 텍스트사이의 간격을 설정한다.

 

drawableXXX 기능은 TextView에 있는 기능으로 TextView를 parent로 하는 Button 계열의 컨트롤에서는 모두 사용가능한 방법이다. CheckBox의 상속 구조는 아래와 같다.

CheckBox -> CompoundButton -> Button -> TextView -> View

 

CheckBox와 ToggleButton은 interface가 상당히 유사해서 대부분 서로 대체해서 사용할수 있으므로 checkBox의 에러가 android 4.2에서 수정되었으므로 image와 text를 표시해야 하는 부분에서 checkbox 대신에 ToggleButton을 사용하길 권장한다.

( 안드로이드는 TextView에 참 많은 기능이 들어 있다. )