[Android] CheckBox와 RadioButton, ImageView 다루기

완성화면

구현하고자 하는 것은

1. 체크박스를 클릭하기 전까지는 타이틀과 체크박스를 띄우고

2. 체크박스를 클릭하면, 가고싶은 여행지의 TextView부터 RadioButton과 선택 Button 영역까지,

3. 선택 버튼을 클릭하면 선택된 여행지에 따라 이미지가 출력되게함

 

먼저 사용할 이미지를 res > drawable 에 넣어줌

 

activity_main.xml 부터 작성(위에서부터 아래로 위젯 순서대로 작성)

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="어디로 갈까"
    android:textSize="35dp"></TextView>

<CheckBox
    android:id="@+id/check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="체크해서 확인" />

<!-- 아래부터는 초기화면에서 default가 보이지 않는 상태기 때문에
     android:visibility="invisible" 작성 -->
<TextView
    android:id="@+id/spot"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="가고싶은 여행지"
    android:visibility="invisible"></TextView>

<!-- RadioGroup을 생성해 RadioButton을 내부에 작성
     중복으로 선택되지 않게함 -->
<RadioGroup
    android:id="@+id/trip"
    android:layout_width="91dp"
    android:layout_height="247dp">

    <RadioButton
        android:id="@+id/newyork"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="NewYork" />
    <RadioButton
        android:id="@+id/taiwan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Taiwan" />
    <RadioButton
        android:id="@+id/bali"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bali" />
    <RadioButton
        android:id="@+id/bankok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bankok" />
    <RadioButton
        android:id="@+id/sydney"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sydney" />
</RadioGroup>

<Button
    android:id="@+id/btn"
    android:layout_width="67dp"
    android:layout_height="36dp"
    android:text="선택하기"
    android:visibility="invisible"></Button>

<!-- 이미지 크기는 전부 같은 크기로 지정 -->
<ImageView
    android:id="@+id/baliImg"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:src="@drawable/bali"
    android:visibility="invisible"></ImageView>

<ImageView
    android:id="@+id/newyorkImg"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:src="@drawable/newyork"
    android:visibility="invisible"></ImageView>

<ImageView
    android:id="@+id/taiwanImg"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:src="@drawable/taiwan"
    android:visibility="invisible"></ImageView>

<ImageView
    
    android:id="@+id/bankokImg"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:src="@drawable/bankok"
    android:visibility="invisible"></ImageView>

<ImageView
    android:id="@+id/sydneyImg"
    ndroid:layout_width="300dp"
    android:layout_height="200dp"
    android:src="@drawable/sydney"
    android:visibility="invisible"></ImageView>

위젯이 겹치지 않게 일렬로 나열하지만, 이미지파일은 같은 위치에 같은 크기로 작성해 5장이 겹치게 작성

 

MainActivity.java

각 위젯의 객체를 생성

public class MainActivity extends AppCompatActivity {

    CheckBox check;
    TextView spot;
    RadioGroup trip;
    RadioButton newyork, taiwan, bali, bankok, sydney;
    Button btn;
    ImageView newyorkImg, taiwanImg, baliImg, bankokImg, sydneyImg;
}

 

onCreate() 메서드에 생성한 객체들과 activity_main.xml 의 위젯과 연결

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // 체크박스(체크해서 확인)
        check = (CheckBox)findViewById(R.id.check);
        // 텍스트(가고싶은 여행지)
        spot = (TextView)findViewById(R.id.spot);
        // 라디오 그룹과 그 내부의 버튼(각 여행지명)
        trip = (RadioGroup)findViewById(R.id.trip);
        newyork = (RadioButton)findViewById(R.id.newyork);
        taiwan = (RadioButton)findViewById(R.id.taiwan);
        bali = (RadioButton)findViewById(R.id.bali);
        bankok = (RadioButton)findViewById(R.id.bankok);
        sydney = (RadioButton)findViewById(R.id.sydney);
        // 버튼(선택)
        btn = (Button)findViewById(R.id.btn);
        // 이미지(각 여행지)
        newyorkImg = (ImageView)findViewById(R.id.newyorkImg);
        taiwanImg = (ImageView)findViewById(R.id.taiwanImg);
        baliImg = (ImageView)findViewById(R.id.baliImg);
        bankokImg = (ImageView)findViewById(R.id.bankokImg);
        sydneyImg = (ImageView)findViewById(R.id.sydneyImg);
        
        ...

 

먼저 체크박스인 "체크해서 확인"을 누르면 "선택" 버튼까지의 영역이 보이도록 하기

// 체크박스 클릭 이벤트
check.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
        // 체크가 되어있으면 true를 반환하는 isChecked를 통해 체크 여부 확인
        if(isChecked){
            // 해당 위젯들의 속성을 보이는 상태로 변경
            spot.setVisibility(View.VISIBLE);
            trip.setVisibility(View.VISIBLE);
            btn.setVisibility(View.VISIBLE);
        }else if(!isChecked){
            // 체크가 해제되면 다시 보이지 않도록 작성
            spot.setVisibility(View.INVISIBLE);
            trip.setVisibility(View.INVISIBLE);
            btn.setVisibility(View.INVISIBLE);
            
            // 이후 나올 이미지를 띄우는 이벤트는 "선택" 버튼 클릭에 있지만 
            // 보이지 않도록 하는 로직은 여기서 작성
            newyorkImg.setVisibility(View.INVISIBLE);
            taiwanImg.setVisibility(View.INVISIBLE);
            baliImg.setVisibility(View.INVISIBLE);
            bankokImg.setVisibility(View.INVISIBLE);
            sydneyImg.setVisibility(View.INVISIBLE);
            
            // 라디오버튼을 체크하고 "선택" 버튼을 클릭 -> "체크해서 확인"을 해제하고 다시 클릭하면
            // 이전에 선택된 라디오버튼이 남아있기 때문에 체크를 해제
            trip.clearCheck();
            // 개별적으로 해제도 가능
            // newyork.setChecked(false);
            // taiwan.setChecked(false);
            // bali.setChecked(false);
            // bankok.setChecked(false);
            // sydney.setChecked(false);
        }
    }
});

 

여행지명이 작성된 라디오버튼을 선택하고 "선택" 버튼을 눌렀을 때의 이벤트

// 버튼 클릭 이벤트
btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // 로그를 통해 RadioGroup에 체크된 버튼 아이디 가져오기
        Log.i("radioBtn", trip.getCheckedRadioButtonId() + "");
        // 해당 아이디를 변수에 저장
        int radioId = trip.getCheckedRadioButtonId();
        // 각 체크된 버튼의 아이디와 동일하다면, 해당 이미지를 띄움
        if(radioId == 2131231020){
            newyorkImg.setVisibility(View.VISIBLE);
            taiwanImg.setVisibility(View.INVISIBLE);
            baliImg.setVisibility(View.INVISIBLE);
            bankokImg.setVisibility(View.INVISIBLE);
            sydneyImg.setVisibility(View.INVISIBLE);
        }else if(radioId == 2131231139){
            newyorkImg.setVisibility(View.INVISIBLE);
            taiwanImg.setVisibility(View.VISIBLE);
            baliImg.setVisibility(View.INVISIBLE);
            bankokImg.setVisibility(View.INVISIBLE);
            sydneyImg.setVisibility(View.INVISIBLE);
        }else if(radioId == 2131230807){
            newyorkImg.setVisibility(View.INVISIBLE);
            taiwanImg.setVisibility(View.INVISIBLE);
            baliImg.setVisibility(View.VISIBLE);
            bankokImg.setVisibility(View.INVISIBLE);
            sydneyImg.setVisibility(View.INVISIBLE);
        }else if(radioId == 2131230809){
            newyorkImg.setVisibility(View.INVISIBLE);
            taiwanImg.setVisibility(View.INVISIBLE);
            baliImg.setVisibility(View.INVISIBLE);
            bankokImg.setVisibility(View.VISIBLE);
            sydneyImg.setVisibility(View.INVISIBLE);
        }else if(radioId == 2131231123){
            newyorkImg.setVisibility(View.INVISIBLE);
            taiwanImg.setVisibility(View.INVISIBLE);
            baliImg.setVisibility(View.INVISIBLE);
            bankokImg.setVisibility(View.INVISIBLE);
            sydneyImg.setVisibility(View.VISIBLE);
        }
    }
}

 

RadioGroup의 선택된 RadioButton 아이디를 로그로 출력하면 아래처럼 확인 가능

 

아이디를 매칭 시키는 if ~ else 문의 코드를 간단하게 작성

// 먼저 모든 이미지를 모두 보이게 만들고
newyorkImg.setVisibility(View.VISIBLE);
taiwanImg.setVisibility(View.VISIBLE);
baliImg.setVisibility(View.VISIBLE);
bankokImg.setVisibility(View.VISIBLE);
sydneyImg.setVisibility(View.VISIBLE);

// RadioButton 의 아이디와 매칭되는 이미지를 bringToFront()를 통해 가장 앞에 배치
// 이미지의 크기와 위치가 동일해 레이아웃이 완전하게 겹쳐있어야함
if(radioId == 2131231020){
    newyorkImg.bringToFront();
}else if(radioId == 2131231139){
    taiwanImg.bringToFront();
}else if(radioId == 2131230807){
    baliImg.bringToFront();
}else if(radioId == 2131230809){
    bankokImg.bringToFront();
}else if(radioId == 2131231123){
    sydneyImg.bringToFront();
}

 

+ 혹은 activity_main.xml에서 ImageView 위젯을 하나만 생성하고

<!-- 다섯개의 이미지 파일중 하나로 작성 -->
<ImageView
    android:id="@+id/baliImg"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:src="@drawable/bali"
    android:visibility="invisible"></ImageView>

 

MainActivity.java

// RadioButton에 체크 이벤트
newyork.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
        // 체크가 되어있다면
        if(isChecked) {
            // 이미지파일의 경로를 라디오버튼과 동일한 사진으로 변경
            img.setImageResource(R.drawable.newyork);
            // 안보이던 이미지를 보이도록
            img.setVisibility(View.VISIBLE);
        }
    }
}

각 이미지 파일마다 체크를 감지해서 파일의 경로를 작성해서 이미지를 변경