Checkbox 간격 - Checkbox gangyeog

Question

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

목차 Show

체크박스
비활성화
라디오버튼
비활성화
기본값 (중첩됨)
라벨 없음
버튼 토글
체크박스 토글 버튼

안드로이드에서 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에 참 많은 기능이 들어 있다. )

게시글 관리

구독하기hanburn : a line of code

브라우저의 기본 체크 박스와 라디오 버튼은


  
  
    Indeterminate checkbox

7의 도움을 받아 대체할 수 있습니다. 이는 두 입력 유형을 위한 클래스로, HTML 요소의 레이아웃과 동작을 개선하여 보다 높은 맞춤성과 크로스 브라우저의 일관성을 제공합니다. 체크 박스는 목록 중 하나 또는 여러 개를 선택하고, 라디오 버튼은 여러 목록 중 하나를 선택하는 것입니다.

구조적으로


  
  
    Indeterminate checkbox

8과


  
  
    Indeterminate checkbox

8은 형제 요소이며,


  
  
    Indeterminate checkbox

8 안에


  
  
    Indeterminate checkbox

8이 들어 있는 것과는 다릅니다. 이것은


  
  
    Indeterminate checkbox

8 이라고


  
  
    Indeterminate checkbox

8을 연관짓기 위해


  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox

4와


  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox

5속성을 지정해야 하기 때문에 약간 장황해 집니다. 또한


  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox

6 나


  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox

7 등, 모든


  
  
    Indeterminate checkbox

8 상태에는 형제 셀렉터(


  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox

9)를 사용합니다.


  
  
    Default radio
  


  
  
    Default checked radio

0 클래스와 함께 사용함으로써


  
  
    Indeterminate checkbox

8 상태에 따라 각 항목의 텍스트를 쉽게 표시할 수 있습니다.

체크 박스에서는 Bootstrap 사용자 정의 아이콘을 사용하여 선택되었거나 선택전 상태를 표시하고 있습니다.

체크박스


  
  
    Default checkbox
  


  
  
    Checked checkbox

불확정

JavaScript를 수동으로 설정해


  
  
    Default radio
  


  
  
    Default checked radio

2 가상 클래스를 사용할 수 있습니다 (이것을 지정하기 위해 이용 가능한 HTML 속성은 없습니다).


  
  
    Indeterminate checkbox

비활성화


  
  
    Default radio
  


  
  
    Default checked radio

3 속성을 추가하면


  
  
    Indeterminate checkbox

8과 함께 관련된 입력 폼이 흐릿한 비활성화상태로 표시됩니다.


  
  
    Disabled checkbox
  


  
  
    Disabled checked checkbox

라디오버튼


  
  
    Default radio
  


  
  
    Default checked radio

비활성화


  
  
    Default radio
  


  
  
    Default checked radio

3 속성을 추가하면


  
  
    Indeterminate checkbox

8과 함께 관련된 입력 폼이 흐릿한 비활성화상태로 표시됩니다.


  
  
    Disabled radio
  


  
  
    Disabled checked radio

스위치

사용자 정의 체크 박스의 마크업을 가지고 있는 스위치는 토글 스위치를 렌더링하기 위해


  
  
    Default radio
  


  
  
    Default checked radio

7 클래스를 사용합니다.


  
  
    Default radio
  


  
  
    Default checked radio

3 속성도 지원하고 있습니다.


  
  Default switch checkbox input


  
  Checked switch checkbox input


  
  Disabled switch checkbox input


  
  Disabled checked switch checkbox input

기본값 (중첩됨)

기본적으로 직계 형제인 체크 박스나 라디오 버튼은


  
  
    Indeterminate checkbox

7로 수직으로 쌓여 적절한 간격으로 배치됩니다.


  
  
    Default checkbox
  


  
  
    Disabled checkbox


  
  
    Default radio
  


  
  
    Second default radio
  


  
  
    Disabled radio

인라인


  
  
    Indeterminate checkbox

7에


  
  
    Disabled radio
  


  
  
    Disabled checked radio

1 클래스를 추가해 체크 박스나 라디오 버튼을 같은 수평 방향에 놓아 그룹화할 수 있습니다.


  
  1


  
  2


  
  3 (disabled)


  
  1


  
  2


  
  3 (disabled)

라벨 없음

라벨 텍스트가 없는 체크 박스나 라디오 버튼을 사용하고 싶을 때에는


  
  
    Indeterminate checkbox

7를 생략합니다. 지원 기술을 위해 어떤 형태로든 접근성에 맞는 이름을 제공해야 하는 것을 잊지 마세요.(예를 들어,


  
  
    Disabled radio
  


  
  
    Disabled checked radio

3을 사용 한다든지 등). 자세한 내용은 forms overview accessibility을 참조해 주세요.


  
  
    Indeterminate checkbox

0

버튼 토글

버튼과 같은 체크 박스나 라디오 버튼을 작성하기 위해서는


  
  
    Indeterminate checkbox

8 요소에


  
  
    Default radio
  


  
  
    Default checked radio

0이 아닌


  
  
    Disabled radio
  


  
  
    Disabled checked radio

6 스타일을 사용합니다. 이러한 토글 버튼은 필요에 따라 다시 button group으로 그룹화할 수 있습니다.

체크박스 토글 버튼


  
  
    Indeterminate checkbox

1


  
  
    Indeterminate checkbox

2


  
  
    Indeterminate checkbox

3

시각적으로 이러한 체크 박스 토글버튼은 button plugin toggle buttons과 같습니다. 체크 박스의 토글 버튼은 스크린 리더에서는 “checked”/“not checked"로 표시되는데(외형은 체크 박스이기 때문에), 버튼의 토글 버튼은 “button”/“button pressed"로 표시됩니다. 이러한 두 가지 접근법 중 어느 쪽을 선택할지는 만들고자 하는 토글 유형과 그 토글이 체크 박스일 때와 실제 버튼일때 중, 어느 쪽이 사용자에게 더 의미가 있는지에 따라 달라집니다.