[안드로이드 스튜디오 강좌 #13] 기본 위젯 공부하기 : Button

이전 글에 이어서 진행합니다.

[안드로이드 스튜디오 강좌 #13] 기본 위젯 공부하기 :  TextView

 

! 목표

안드로이드에서 사용하는 기본 위젯인 Button을 공부해보자

 

Button (버튼)

버튼은 사용자가 클릭하면 클릭에 대한 반응을 하는 위젯이다.

버튼은 텍스트뷰를 상속하여 정의 되었기 때문에 앞서 공부했던 텍스트뷰의 text, textColor등의 속성을 똑같이 적용할 수 있다.

 

버튼 위젯에 발생한 이벤트(클릭 등)를 가장 간단하게 처리할 수 있는 방법은 OnClickLinsener를 정의해 버튼에 설정하는 것이다.

 

 

기본 버튼, 체크 박스, 라디오 버튼을 이용해 실습해보자

체크 박스, 라디오 버튼은 클릭 이벤트를 처리할 뿐만 아니라 CompoundButton 클래스를 이용해서 상태 값을 저장하고 선택/해제 상태를 표시할 수 있다.

 

CompoundButton은 다음과 같은 메서드를 포함하고 있다.

public boolean isChecked ()
public void setChecked (boolean checked)
public void toggle ()

-isChecked() : 체크 박스, 라디오 버튼이 선택되어 있는지 확인하는 메서드

-setChecked() : 체크 상태를 지정하는 메서드

 

 

만약 버튼의 상태가 바뀌는 것을 알고 싶다면 다음 메서드를 재정의해서 사용한다.

void onCheckedChanged(CompundButton buttonView, boolean isChecked)

 

라디오 버튼은 하나의 버튼이 선택되면 다른 버튼의 선택이 해제되야 한다.

이런 기능을 구현하기 위해 RadioGroup을 이용해 라디오 버튼을 하나의 그룹으로 묶어준다.

 

 

 

-실습

실습하기 위해 app-res-layout에 button.xml를 생성해주자.

(최상위 레이아웃 설정 : LinearLayout(vertical))

밑에 있는 XML 코드를 보며 작성하거나,

Palette 툴을 이용해서 직접 버튼을 추가해보자

-Button1개

-Radio Group 안에 있는 Radio Button 2개

-LinearLayout(horizonal)안에 있는 TextView와 CheckBox

 

 

각각의 설정들은 밑의 XML 코드를 보면서 직접 고쳐보자

(Radio 버튼을 추가하려면, Radio 그룹을 먼저 추가하고, 그 그룹안에 RadioButton을 추가해주면 된다.)

 

 

XML 코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="선택"
        android:textSize="24sp"
        android:textStyle="bold" />

    <RadioGroup
        android:id="@+id/radioGroup01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="20dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">


        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="여성"
            android:textColor="#00fff0"
            android:textSize="24sp"/>

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="남성"
            android:textColor="#f033f3"
            android:textSize="24sp"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingTop="20dp">

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="곱창먹기"
                android:textSize="24sp"
                android:paddingRight="10dp" />

            <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
        </LinearLayout>
    </RadioGroup>
</LinearLayout>

 

design 화면 미리보기 결과

실행시키면서 확인해보자

 

MainActivity.java 코드에서 setContentView(R.layout.button);으로 변경하면 시작화면을 button.xml으로 설정할 수 있다.

 

라디오 버튼은 하나가 선택이 되면 그 전에 선택했던 것은 자동으로 해제 되는 것을 확인할 수 있다.

체크버튼을 누를 때마다 체크 상태가 변하는 것을 확인할 수 있다.

 

만약 아이콘을 넣고 싶다면, 아이콘을 설정하는 속성을 추가하면 된다.

텍스트가 없는 버튼을 사용하고 싶다면 ImageButton 태그를 적용할 수 있다.

 

 

 

 

 

 

## 이 글은 허락을 받아 Do it 안드로이드 앱 프로그래밍을 참고해서 작성되었습니다.

도서에는 더 자세하고 알기 쉽게 설명이 되어 있어 도서를 참고하면서 공부하는 것을 추천드립니다.

도서 정보 : http://www.yes24.com/Product/Goods/15789466

Do it! 안드로이드 앱 프로그래밍

유투브 강의 : https://www.youtube.com/watch?v=nN4xnEcnjE8