(22.11.05)Android Studio 프로그래밍: 기본 위젯 활용하기(컴파운드버튼-체크박스,토글버튼,라디오버튼,이미지버튼)

●컴파운드 버튼●

 

ComoundButton 클래스는 Button 클래스의 하위 클래스로 체크박스, 라디오버튼, 스위치, 토글버튼의 상위 클래스이다. 이 네가지 버튼의 고통적은 체크 또는 언체크 상태가 될 수 있다. 

 

체크박스는 클릭할 때마다 체크, 언체크로 바뀐다. 여러개의 체크박스가 있어도 서로 독립적으로 동작한다는 특징이 있어 여러개를 동시에 체크할 수 있다.

 

체크박스의 XML코드

<CheckBox
	anroid:id="@+id/android"
    android:text="안드로이드 폰"
    android:Checked="true"/>

4행의 Checked="true"로 설정하면 체크박스에  체크되어 있는 걸 확인할 수 있다.

 

Java 코드에서는 강제로 체크를 켜거나 끄는 setChecked(), 체크 상태를 반대로 바꾸는 toggle(), 체크되었는지 확인하는 isChecked() 등의 메소드를 자주 사용한다. 체크박스도 TextView클래스의 하위 클래스이므로 OnClickListener, OnTouchListener등의 리스너를 사용할 수 있다.

 

 

CheckBox mycheck;
mycheck = (CheckBox)findViewById(R.id.android);
mycheck.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener(){
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked){
        //동작 내용 이 부분에 코딩
    }
});

체크박스 체크 언체크 절차는 버튼의 클릭과 절차가 매우 비슷하다. 1행에서 체크박스 변수 선언을 해주고 

2행 변수에 체크박스 위젯 대입 3열 체크박스가 변결될 때 동작하는 클래스 정의

5행에 이벤트 발생시 동작할 내용을 코딩해주면 된다.

---

 

스위치와 토글 버튼

스위치와 토글 버튼은 모양만 조금 다를뿐 용도는 거의 동일하다. 스위치의 주된 기능은 on/off상태 표시이다.

 

<Switch
    android:Checked="true" />
<Switch
    android:Checked="false" />
<ToggleButton
    android:Checked="true" />
<ToggleButton
    android:Checked="false" />

XML에서 스위치와 토글 버튼은 다음과 같이 나타 낼 수 있다.

---

라디오버튼과 라디오 그룹

라디오 버튼은 XML속성이나 메소드가 체크박스와 거의 동일하지만 용도가 다르다. 성별을 선택하는 것처럼 여러개중에 하나만 선택해야하는 경우에 사용한다. 그러나 라디오 버튼만 여러개 나열하면 클릭하는 것마다 모두 중복으로 선택되므로 라디오그룹과 함께 사용해야 한다.

 

라디오 그룹과 라디오버튼의 XML코드

<RadioGroup
    android:id="@+id/rGroup1">
    <RadioButton
        android:text="남성"/>
    <RadioButton
        android:text="여성"/>
<RadioGroup/>

2개의 라디오 버튼을 하나의 라디오 그룹으로 묶었다. 라디오 그룹안의 모든 라디오 버튼은 하나만 선택이 가능해진다. 라디오 버튼을 사용할 때 주의할 점은 각 라디오버튼의 id 속성이 꼭 있어야한다는 것이다. id 속성이 없으면 해당 라디오 버튼이 계속 선택된 것으로 지정되어 해제되지 않는다.

---

이미지뷰와 이미지버튼

이미지뷰는 그림을 출력하는 위젯으로 그림을 넣거나 화면을 화려하게 구성할 때 사용한다. 이미지뷰에 보여줄 그림 파일은 일반적으로 프로젝트의 [res]-[drawable] 폴더에 있어야한다.

접근은 XML에서 "@drawable/그림 아이디" 형식으로 한다.

 

ImageView 클래스는 View클래스에서 바로 상속받기 때문에 앞선 다른 TextView의 하위 위젯들과 속성이 다르다. ImageButton 클래스는 ImageView 클래스에서 상속받으며 거의 동일한 용도로 쓰지만 버튼처럼 클릭하는 데 쓰인다. 

이미지뷰와 이미지버튼의 XML 속성으로는 이미지의 경로를 나타내는 src, 이미지 크기를 지정하는 maxHeight/MaxWidth, 이미지의 확대/ 축소 방식을 지정하는 scaleType등이 있다.

 

이미지를 사용하려먼 먼저 그림 파일을 [res]-[drawable] 폴도에 복사해 놓아야한다. (위 사진의 첫번째 빨간 박스)

파일 포맷은 png, jpg,gif를 지원하지만 png나 jpg를 권장한다. 

위 사진의 두번째 빨간 박스인 [mipmap]에 같은 이름의 앱 아이콘 이미지(ic_launcher.png)가 디폴트로 들어 있는데, 각각은 같은 이미지이지만 해상도가 mdpi(48×48), hdpi(72×72), xhdpi(96×96), xxhdpi(144×144), xxxhdpi(192×192) 등으로 다르다. 이는 모두 xml 파일에서는 @mipmap/ic_launcher로 , Java 코드에서는 R.mipmap.ic_launcher로 사용된다. 

 

이미지뷰와 이미지 버튼의 xml 코드

<ImageView
    android:src="@drawable/icon.png"/>
<ImageButton
    android:src="@drawable/icon.png"/>
<ImageView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:scaleType="fitXY"
    android:src="@drawable/icon.png"/>
<ImageView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:scaleType="fitCenter"
    android:src="@drawable/icon.png"/>

1행 기본적인 ImageView형식이다.

2행에서 [res]-[drawable]의 이미지 아이디를 지정한다.

 

3,4행 기본적인 ImageButton 형식이다.

 

6,7행 ImageView의 크기 확대 8행은 이미지를 확대하는 방식을 지정한다. fitXY는 이미지뷰의 좌우에 꽉 맞춰서 이미지를 확대하고 13행의 fitCenter는 중앙에 맞춰서 확대하는 방식이다.

이외에도 matrix, fitStart, fitEnd, center, centerCrop, centerInside 방식이 있다.