안드로이드 스튜디오 기본 위젯 2(컴파운드 버튼, 이미지뷰, 이미지버튼)

컴파운드 버튼은 체크박스, 스위치, 토글 버튼, 라디오 버튼이 있으며 라디오 버튼은 따로 라디오 그룹으로 묶어줄 수 있습니다.

체크박스는 인터넷에서 자주 볼 수 있는 버튼으로 체크 모양이 되어있거나 아닌 모습으로 ☑모양을 말합니다.

Java코드에서 사용할 때는 체크를 켜고 끄는 setChecked(), 체크상태를 바꾸는 toggle(), 체크되었는지를 확인하는 isChecked()등의 메서드를 주로 사용하고 체크 이벤트 발생 시 OnCheckedChangeListener()를 사용 가능합니다. 또한 이전의 버튼들처럼 OnClickListener, OnTouchListener도 사용 가능합니다.

체크박스는 기본적으로 여러 개를 나열해서 사용이 가능하고 켜고 끄는 동작 및 독립적으로 동작합니다. 자바 코드에서는 다음과 같이 사용합니다.

CheckBox check; //체크박스 변수 선언
check = (CheckBox) findViewById(R.id.xmlcheck) // 변수에 체크박스 위젯 대입
//체크박스가 변경될때 동작하는 클래스 정의
check.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener(){
	public void onCheckedChanged(CompoundButton buttonView, boolean is Checked){
    	//작동 코드
    }
});

스위치와 토글 버튼은 용도는 동일하고 모양만 조금 다릅니다. 그러므로 상황에 맞게 고르는 것이 좋습니다.

스위치와 토글 버튼은 XML속성이나 메서드 모두 체크박스와 동일하게 사용 가능합니다.

라디오 버튼은 속성이나 메서드가 체크박스와 거의 동일하지만 여러 옵션 중 하나만 선택해야 할 때 사용하는 기능입니다. 여기서 중요하게 확인하는 것으로는 라디오 그룹인데 만약 그룹으로 묶지 않게 되면 독립적으로 되어있는 것으로 인식하여 모두 선택 가능해지는 불상사가 발생합니다. 따라서 라디오 그룹을 사용해 필요할 때 묶어줘야 합니다. 또한 주의할 점으로는 각 라디오 버튼마다 id속성을 지정해 주어야 합니다. id속성이 없다면 해당 라디오 버튼이 계속 선택된 것으로 지정되어 해제가 되지 않게 됩니다. 그리고 라디오 그룹에서 사용 가능한 메서드로 clearCheck()가 있는데 이는 라디오 그룹 안에 체크된 것을 모두 해제시켜 줍니다.

위 버튼들로 만든 예시 코드는 다음과 같습니다.

xml예시 코드

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/android"
            android:text="안드로이드폰"
            android:checked="true"/>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iphone"
            android:text="아이폰"/>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/window"
            android:text="윈도폰"
            android:checked="true"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Switch
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"/>
        <Switch
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="false"/>
        <ToggleButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"/>
        <ToggleButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="false"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/rGroup1">
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="남성"/>
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="여성"/>
        </RadioGroup>

    </LinearLayout>

</LinearLayout>

실행결과

이미지 뷰와 이미지 버튼의 경우에는 외부 이미지를 사용하게 되는데 이때 이미지는 프로젝트의 [res]-[drawable]에 위치하고 있어야 하고 기본 파일 경로로는

C:\Users\사용자이름\AndroidStudioProjects\프로젝트명\app\src\main\res\drawable에 위치하게 됩니다.

또한 접근을 할 때는 XML에서 @drawable/그림 아이디 형식으로 접근을 합니다.

파일 포맷은 png, jpg, gif를 지원하지만 png나 jpg를 권장합니다. 또한 파일 이름은 반드시 소문자로 해야 하고 공백이 있으면 안 됩니다.

이미지 뷰와 이미지 버튼의 xml속성으로는 이미지의 경로를 나타내는 src, 이미지의 크기를 지정하는 maxHeight/maxWidth, 이미지의 축소/확대를 지정하는 scaleType 등이 있습니다. 그리고 scaleType속성으로는 matrix, fitXY, fitStart, fitEnd, center 등 8가지 값을 지정할 수 있습니다.

예시에서는 기본 이미지와 제가 찍은 사진을 같이 사용하였습니다.

예시 XML

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/a123"/>
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_foreground"/>
    <ImageView
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:scaleType="fitXY"
        android:src="@drawable/a123"/>
    <ImageView
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_launcher_foreground"/>
    
</LinearLayout>

실행결과

책에 있는 실습 4-2에 해당하는 코드입니다. 다만 책의 예시는 애완동물이지만 저는 식물로 대체하였습니다.

예시 실습 조건은 다음과 같습니다.

프로젝트 이름은 Project 4_2, 패키지 이름은 com.cookandroid.project4_2로 한다.
그림 3개를 사용하고 미리 [res]-[drawable] 복사해 놓는다.

예시 XML코드입니다.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Text1"
        android:text="선택을 시작하겠습니까?"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ChkAgree"
        android:text="시작함"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Text2"
        android:text="좋아하는 꽃은?"
        android:visibility="invisible"/>
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Rgroup1"
        android:visibility="invisible">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/Rdocamomile"
            android:text="들국화"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/Rdocherry_blossoms"
            android:text="벚꽃"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/Rdodandelion"
            android:text="민들레"/>
    </RadioGroup>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/BtnOK"
        android:text="선택완료"
        android:visibility="invisible"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ImgPlant"
        android:visibility="invisible"/>

</LinearLayout>

예시 Java코드입니다.

package com.cookandroid.project4_2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    TextView text1, text2;
    CheckBox chkAgree;
    RadioGroup rGroup1;
    RadioButton rdoCamomile, rdoCherry_blossoms, rdoDandelion;
    Button btnOK;
    ImageView imgPlant;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("식물 사진 보기");

		//변수 지정
        text1 = (TextView) findViewById(R.id.Text1);
        chkAgree = (CheckBox) findViewById(R.id.ChkAgree);

        text2 = (TextView) findViewById(R.id.Text2);
        rGroup1 = (RadioGroup) findViewById(R.id.Rgroup1);
        rdoCamomile = (RadioButton) findViewById(R.id.Rdocamomile);
        rdoCherry_blossoms = (RadioButton) findViewById(R.id.Rdocherry_blossoms);
        rdoDandelion = (RadioButton) findViewById(R.id.Rdodandelion);

        btnOK = (Button) findViewById(R.id.BtnOK);
        imgPlant = (ImageView) findViewById(R.id.ImgPlant);
		
        //체크박스 동의 확인
        chkAgree.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(chkAgree.isChecked() == true){//동의시 보이게 설정
                    text2.setVisibility(View.VISIBLE);
                    rGroup1.setVisibility(View.VISIBLE);
                    btnOK.setVisibility(View.VISIBLE);
                    imgPlant.setVisibility(View.VISIBLE);
                }else{
                    text2.setVisibility(View.INVISIBLE);
                    rGroup1.setVisibility(View.INVISIBLE);
                    btnOK.setVisibility(View.INVISIBLE);
                    imgPlant.setVisibility(View.INVISIBLE);
                }
            }
        });
        //라디오 버튼 인식하여 버튼 작동
        btnOK.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (rGroup1.getCheckedRadioButtonId()){
                    case R.id.Rdocamomile:
                        imgPlant.setImageResource(R.drawable.camomile);//해당하는 이미지로 세팅
                        break;
                    case R.id.Rdocherry_blossoms:
                        imgPlant.setImageResource(R.drawable.cherry_blossoms);
                        break;
                    case R.id.Rdodandelion:
                        imgPlant.setImageResource(R.drawable.dandelion);
                        break;
                    default://아무것도 입력이 안된경우
                        Toast.makeText(getApplicationContext(), "식물을 선택하세요",Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

실행결과는 다음과 같습니다.

직접 풀어보기 4-4는 다음과 같은 조건을 가지고 있습니다.

'좋아하는 안드로이드 버전은?'으로 질문을 수정한다.
'시작함'을 Switch로 변경한다.
<선택 완료>를 없애고, 라디오 버튼을 선택할 때마다 즉시 해당 이미지가 나오도록 변경한다.
마지막에 <종료>와 <처음부터>를 추가한다. <종료>를 클릭하면 응용프로그램이 완전히 종료되게 하고, <처음부터>를 클릭하면 다시 초기화되고 처음 화면이 나오게 한다.

여기에 사용한 이미지는 그림판으로 어느 정도 크기를 조절했고 나무 위키에서 가져왔습니다.

예시 XML코드입니다.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Text1"
        android:text="선택을 시작하겠습니까?"/>
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ChkAgree"
        android:text="시작함"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Text2"
        android:text="좋아하는 안드로이드 버전은?"
        android:visibility="invisible"/>
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Rgroup1"
        android:visibility="invisible">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/RdoAndroid08"
            android:text="오레오(8.0)"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/RdoAndroid09"
            android:text="파이(9.0)"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/RdoAndroid10"
            android:text="Q(10.0)"/>
    </RadioGroup>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ImgAndroid"
        android:visibility="invisible"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/BtnEnd"
        android:text="종료"
        android:visibility="invisible"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/BtnReset"
        android:text="처음부터"
        android:visibility="invisible"/>

</LinearLayout>

Java코드입니다.

package com.cookandroid.project4_4;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Switch;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    TextView text1, text2;
    Switch chkAgree;
    RadioGroup rGroup1;
    RadioButton rdoAndroid08, rdoAndroid09, rdoAndroid10;
    Button btnEnd, btnReset;
    ImageView imgAndroid;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("안드로이드 사진 보기");

        //변수 추가
        text1 = (TextView) findViewById(R.id.Text1);
        chkAgree = (Switch) findViewById(R.id.ChkAgree);

        text2 = (TextView) findViewById(R.id.Text2);
        rGroup1 = (RadioGroup) findViewById(R.id.Rgroup1);
        rdoAndroid08 = (RadioButton) findViewById(R.id.RdoAndroid08);
        rdoAndroid09 = (RadioButton) findViewById(R.id.RdoAndroid09);
        rdoAndroid10 = (RadioButton) findViewById(R.id.RdoAndroid10);

        btnEnd = (Button) findViewById(R.id.BtnEnd);
        btnReset = (Button) findViewById(R.id.BtnReset);
        imgAndroid = (ImageView) findViewById(R.id.ImgAndroid);

        //함수 재설정
        chkAgree.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(chkAgree.isChecked() == true){
                    text2.setVisibility(View.VISIBLE);
                    rGroup1.setVisibility(View.VISIBLE);
                    btnEnd.setVisibility(View.VISIBLE);
                    btnReset.setVisibility(View.VISIBLE);
                    imgAndroid.setVisibility(View.VISIBLE);
                }else{
                    text2.setVisibility(View.INVISIBLE);
                    rGroup1.setVisibility(View.INVISIBLE);
                    btnEnd.setVisibility(View.INVISIBLE);
                    btnReset.setVisibility(View.INVISIBLE);
                    imgAndroid.setVisibility(View.INVISIBLE);
                }
            }
        });
        //각 라디오 버튼이 눌러졌는지를 확인하고 이미지 설정함
        rdoAndroid08.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imgAndroid.setImageResource(R.drawable.android08);
            }
        });
        rdoAndroid09.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imgAndroid.setImageResource(R.drawable.android09);
            }
        });
        rdoAndroid10.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imgAndroid.setImageResource(R.drawable.android10);
            }
        });
        btnEnd.setOnClickListener(new View.OnClickListener() {//종료 코드
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        btnReset.setOnClickListener(new View.OnClickListener() {//체크 되어있는 값 제거(초기화)
            @Override
            public void onClick(View v) {
                chkAgree.setChecked(false);
                rdoAndroid08.setChecked(false);
                rdoAndroid09.setChecked(false);
                rdoAndroid10.setChecked(false);
                imgAndroid.setImageResource(0);//null값 대신 사용
            }
        });
    }
}

실행결과는 다음과 같습니다.

영상 녹화

이후에 레이아웃 부분으로 넘어가겠습니다.

또한 찾아보니 코틀린 코드랑 자바 코드가 완벽히 호환되도록 설계가 되었다고 하니 코틀린으로 만들어도 자바 코드를 그대로 넣어도 될 거 같습니다.

728x90

저작자표시

'프로그램 개발 > 안드로이드 스튜디오 개발' 카테고리의 다른 글

안드로이드 스튜디오 레이아웃 2 (기타 레이아웃) (0)	2021.06.21
안드로이드 스튜디오 레이아웃 1(리니어 레이아웃) (0)	2021.06.12
안드로이드 스튜디오 기본 위젯 1(텍스트 뷰, 버튼, 에디트 텍스트) (0)	2021.04.15
안드로이드 스튜디오 뷰 클래스 레이아웃 (0)	2021.04.01
안드로이드 스튜디오를 활용한 안드로이드 프로그래밍 2-3 정답 (0)	2021.03.16