[Android] visibility 속성 / 클릭시 사진 보여주기

- '시작함' 을 클릭하면 아래 동물 종류의 라디오버튼과 '선택완료' 버튼이 등장한다.

- 동물 라디오 버튼을 클릭하면 해당 동물 사진을 보여주도록 설계할 것이다.

 

 

<?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:layout_margin="10dp"
    android:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="시작하시겠습니까?"/>

    <CheckBox
        android:id="@+id/cb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="시작함" />

    <TextView
        android:id="@+id/tv2"
        android:visibility="invisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="좋아하는 동물은?" />

    <RadioGroup
        android:id="@+id/rg"
        android:visibility="invisible"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="강아지"/>

        <RadioButton
            android:id="@+id/rb2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="고양이"/>

        <RadioButton
            android:id="@+id/rb3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="토끼"/>
    </RadioGroup>

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

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


</LinearLayout>

 

- 라디오버튼은 라디오그룹으로 묶어줌

- '시작하시겠습니까?' '시작' 체크박스 제외한 나머지 객체들의 visibility를 invisible로 두어서 숨김

- 각 객체들은 Id값을 부여하고 이벤트에 따른 메서드는 자바로 주겠다.

 

 

 

package com.example.ex4_28;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.provider.MediaStore;
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 {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CheckBox cb1 = findViewById(R.id.cb1);
        TextView tv2 = findViewById(R.id.tv2);
        RadioGroup rg = findViewById(R.id.rg);
        RadioButton rb1 = findViewById(R.id.rb1);
        RadioButton rb2 = findViewById(R.id.rb2);
        RadioButton rb3 = findViewById(R.id.rb3);
        Button btn1 = findViewById(R.id.btn1);
        ImageView iv1 = findViewById(R.id.iv1);

        cb1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if(cb1.isChecked()){
                    tv2.setVisibility(View.VISIBLE);
                    rg.setVisibility(View.VISIBLE);
                    btn1.setVisibility(View.VISIBLE);
                    iv1.setVisibility(View.VISIBLE);
                }else{
                    tv2.setVisibility(View.INVISIBLE);
                    rg.setVisibility(View.INVISIBLE);
                    btn1.setVisibility(View.INVISIBLE);
                    iv1.setVisibility(View.INVISIBLE);
                }
            }
        });

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                switch (rg.getCheckedRadioButtonId()){
                    case R.id.rb1:
                        iv1.setImageResource(R.drawable.dog);
                        break;
                    case R.id.rb2:
                        iv1.setImageResource(R.drawable.cat);
                        break;
                    case R.id.rb3:
                        iv1.setImageResource(R.drawable.rabbit);
                        break;
                    default:
                        Toast.makeText(getApplicationContext(),"라디오버튼 선택하시오",Toast.LENGTH_SHORT).show();

                }
            }
        });
    }
}

 

- '선택함' 체크박스 (cb1)가 선택되면 아래 항목 보여주는 메서드

  · setOnCheckedChangeListner 사용 

  · 객체.setVisibility()로 체크여부에 따라 보여주기, 숨기기 가능

 

- '선택완료' 버튼 (btn1)이 선택되면 해당 라디오버튼에 맞는 동물 사진 보여주는 메서드

  · setOnClickListner 사용

  · switch문을 사용하여 각 동물종류에 맞는 사진 넣어줌 (setImageResource 사용)

  · getCheckedRadioButtonId() : 체크된 라디오버튼의 Id값을 가져옴

 

- Toast 메시지 :  잠시 나타났다가 없어지는 메시지

  · Toast.makeText(getApplicationContext(), "보여줄 메시지", 토스트메시지.길이).show()

 

실행결과