04-4. 위젯2

* CompoundButton

Button 클래스의 하위 클래스로 체크박스, 라디오버튼, 스위치, 토글버튼의 상위 클래스다.(이 클래스들은 모두 체크/언체크 상태)

 

* checkbox

여러 개의 체크 박스가 있어서 독립적으로 동작한다. (== 여러개 동시 체크 가능)

- checked

- setChecked(), toggle(), isChecked()

- OnCheckedListener

 

* switch & toggle button (on/off)

 

* radiobutton & radiogroup

라디오버튼은 체크바슥와 비슷하지만 용도가 다르다. (보통, 여러 개 중 하나만 선택해야 하는 경우 사용)

라디오버튼만 여러 개 나열하면 중복 선택이 가능하기 때문에 라디오 그룹과 함께 사용한다.

(※ 라디오 버튼은 꼭 Id 속성이 있어야한다. id 속성이 없으면 라디오 버튼이 계속 선택된 것으로 지정되어 해제되지 않는다)

라디오 그룹은 ViewGroup - LinearLayout 의 하위클래스에 해당한다.

- clearCheck() : 해당 라디오 그룹 안에 체크된 것을 모두 해제

 

* ImageView & ImageButton

이미지뷰: 그림을 출력하는 위젯, 그림 파일은 일반적으로 res-drawable에 있다. (@drawable/그림id 형식으로 접근)

이미지버튼: 이미지뷰 클래스에서 상속받으며 거의 비슷하지만 버튼처럼 클릭하는데 사용된다. (그림으로 표현된 버튼)

- src: 이미지 경로

- maxHeight/maxWidth: 이미지 크기 지정

- scaleType: 이미지의 확대/축소 방식 지정 (matrix, fitXY, fitEnd, center 등 8개의 값 가능)

이미지 파일 포맷으로는 png, jpg, gif 를 지원하지만 png 나 jpg를 권장한다.

res - minimap에는 ic_launcher.png가 디폴트로 들어 있는데 같은 이미지만 해상도가 mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi 등으로 다르다.

이 파일은 모두 XML에서 @mipmap/ic_launcher로, Java에서는 R.mipmap.ic_launcher로 사용된다.

이렇게 출력하면 안드로이드 운영체제가 알아서 현재 안드로이드폰의 해상도에 적절한 이미지로 선택한다. wow 똑똑하네~

mipmap/ic_launcher

프로젝트 계획

checkbox1개 - 시작함

Raidobox3개 - 강아지, 고양이, 토끼 중 선택

button 1개 - 선택완료

ImageView - 선택한 애완동물의 이미지 보여주기

(checkbox 가 눌리면 Radibox가 나오고, 선택완료 버튼을 누르면, 이미지를 보여주기)

+ 시작함 버튼 체크를 풀면 다 없어지고, 라디오 버튼도 초기화

 

<activity_main.xml>

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        android:textStyle="bold"
        android:text="선택을 시작하겠습니까?" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="시작함"
        android:id="@+id/check"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:textSize="30dp"
        android:textStyle="bold"
        android:text="좋아하는 애완동물은?"
        android:id="@+id/text_question"/>

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:id="@+id/rGroup">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="강아지"
            android:id="@+id/puppy"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="고양이"
            android:id="@+id/cat"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="토끼"
            android:id="@+id/rabbit"/>
    </RadioGroup>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:text="선택 완료"
        android:id="@+id/btn"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:id="@+id/image"/>

</LinearLayout>

 

<MainActivity.java>

package com.example.widget2;

import androidx.appcompat.app.AppCompatActivity;

import android.media.Image;
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 {
    CheckBox checkBox;
    RadioGroup radioGroup;
    RadioButton rbtn1, rbtn2, rbtn3;
    TextView question;
    Button finished;
    ImageView imageView;

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

        checkBox = (CheckBox)findViewById(R.id.check);
        radioGroup = (RadioGroup)findViewById(R.id.rGroup);
        rbtn1 = (RadioButton)findViewById(R.id.puppy);
        rbtn2 = (RadioButton)findViewById(R.id.cat);
        rbtn3 = (RadioButton)findViewById(R.id.rabbit);
        question = (TextView)findViewById(R.id.text_question);
        finished = (Button)findViewById(R.id.btn);
        imageView = (ImageView)findViewById(R.id.image);

        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(isChecked == true){
                    question.setVisibility(View.VISIBLE);
                    radioGroup.setVisibility(View.VISIBLE);
                    finished.setVisibility(View.VISIBLE);
                }
                else{
                    question.setVisibility(View.INVISIBLE);
                    radioGroup.setVisibility(View.INVISIBLE);
                    finished.setVisibility(View.INVISIBLE);
                    imageView.setVisibility(View.INVISIBLE);
                    radioGroup.clearCheck();
                }
            }
        });

        finished.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                switch(radioGroup.getCheckedRadioButtonId()){
                    case R.id.puppy:
                        imageView.setImageResource(R.drawable.puppy);
                        imageView.setVisibility(View.VISIBLE);
                        break;
                    case R.id.cat:
                        imageView.setImageResource(R.drawable.cat);
                        imageView.setVisibility(View.VISIBLE);
                        break;
                    case R.id.rabbit:
                        imageView.setImageResource(R.drawable.rabbit);
                        imageView.setVisibility(View.VISIBLE);
                        break;
                    default:
                        Toast.makeText(getApplicationContext(), "동물 먼저 선택하세요.", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

(귀엽 ㅎㅎ)