(22.11.19)Android Studio 프로그래밍: 우리집 고양이 사진 출력하는 앱 만들기

원하는 고양이 사진을 출력하는 앱 만들기

'시작함'에 체크하면 원하는 사진 번호 중 하나를 선택하라는 내용이 나오고, 선택 후에 <선택완료> 버튼을 누르면 해당 고양이의 이미지가 나타난다.

 

사진을 복사 하여 [res]-[drawable]에 붙어 넣기 해준다.

---

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"
    tools:context=".MainActivity">
 
    <TextView
        android:id="@+id/Text1"
        android:text="선택을 시작하겠습니까?"
        android:layout_marginLeft="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <CheckBox
        android:id="@+id/chkAgree"
        android:text="시작함"
        android:layout_marginLeft="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
 
    <TextView android:id="@+id/Text2"
        android:text="당신의 달이 베스트 픽은?"
        android:visibility="invisible"
        android:layout_marginLeft="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <RadioGroup
        android:id="@+id/Rgroup1"
        android:visibility="invisible"
        android:layout_marginLeft="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/RdoDal1"
            android:text="달이사진1"
            android:layout_marginLeft="30dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <RadioButton
            android:id="@+id/RdoDal2"
            android:text="달이사진2"
            android:layout_marginLeft="30dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/RdoDal3"
            android:text="달이사진3"
            android:layout_marginLeft="30dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </RadioGroup>
 
    <Button
        android:id="@+id/BtnOk"
        android:text="선택완료"
        android:visibility="invisible"
        android:layout_marginLeft="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ImageView
        android:id="@+id/ImgDal"
        android:visibility="invisible"
        android:layout_marginLeft="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
 
 
</LinearLayout>

맨위 TextView 와 CheckBox를 제외하고 나머지 위젯은 visibility 속성을 invisible로 지정한다.

RadioGroup에서 visibility 속성을 설정하면 그 안의 RadioButton들의 속성을 설정하지 않아도 된다.

라디오 그룹으로 라디오 버튼 1,2,3을 묶어서 해당 라디오 그룹 사이에서만 중복이 되지 않게 해준다.

선택함을 선택해야 사진을 고를 수 있게 하기 위해서 선택함이라는 체크박스도 만들어 준다.

---

 

MainActivity.java

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 rdoDal1, rdoDal2, rdoDal3;
    Button btnOk;
    ImageView imgDal;
 
    @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);
        rdoDal1=(RadioButton) findViewById(R.id.RdoDal1);
        rdoDal2=(RadioButton) findViewById(R.id.RdoDal2);
        rdoDal3=(RadioButton) findViewById(R.id.RdoDal3);
 
        btnOk= (Button) findViewById(R.id.BtnOk);
        imgDal= (ImageView) findViewById(R.id.ImgDal);
 
        chkAgree.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(chkAgree.isChecked()==true){
                    text2.setVisibility(android.view.View.VISIBLE);
                    rGroup1.setVisibility(android.view.View.VISIBLE);
                    btnOk.setVisibility(android.view.View.VISIBLE);
                    imgDal.setVisibility(android.view.View.VISIBLE);
                }else{
                    text2.setVisibility(android.view.View.INVISIBLE);
                    rGroup1.setVisibility(android.view.View.INVISIBLE);
                    btnOk.setVisibility(android.view.View.INVISIBLE);
                    imgDal.setVisibility(android.view.View.INVISIBLE);
                }
            }
        });
        btnOk.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                switch (rGroup1.getCheckedRadioButtonId()){
                    case R.id.RdoDal1:
                        imgDal.setImageResource(R.drawable.dal1);
                        break;
                    case R.id.RdoDal2:
                        imgDal.setImageResource(R.drawable.dal2);
                        break;
                    case R.id.RdoDal3:
                        imgDal.setImageResource(R.drawable.dal3);
                        break;
                    default:
                        Toast.makeText(getApplicationContext(),
                                "달이 사진번호를 선택하세요", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

 

14행~19행 : 위 클래스에서 쓸 전역변수들을 선언해 준다.

27행~37행 : 각 위젯을 변수에 대입한다. XML 에서 정해준 id로 불러올 수 있다.

39행 :  '시작함'  체크박스를 체크/언체크할 때마다 동작하는 리스너를 설정한다.

컴파운드 버튼이기 때문에 View.OnCheckedChangeListener()가 아니라 CompoundButton.OnCheckedChangeListener() 리스너이다.

42행 : 체크박스가 체크 되어 있는 조건일때를 말한다.

43행~46행 : 숨겨져 있던 모든 위젯을 보이도록 한다.

47행 ~ 51행 :  체크가꺼지면 위젯들을 숨긴다.

 

55행 : 선택 완료를 클릭하면 동작하는 리스너를 설정한다.

59행~70행 : switch()~ case 문으로 다중 분기한다. getCheckedRadioButtonId()는 현재 라디오 그룹에서 선택된 라디오 버튼의 아이디를 반환한다.

각 라디오 버튼에 맞는 사진을 보여준다.

68~70행 : 라디오버튼중에서 아무것도 선택되지 않았다면 토스트 메시지를 보여준다.

---

 

실행 결과:

처음에 에뮬레이터는 돌아가는데 어플이 실행되지 않아서 몇시간을 해결하느라 고생했다..........

문제의 원인은 AVD설치할 때  저장소가 800mb가 디폴트로 정해져 있어 용량이 부족해서 그런 것이었다.

 

어플 시작했을 시 초기 화면

 

'시작함' 체크박스를 체크했을 시 나온 화면

달이 사진 2번을 먼저 선택해주었다

선택 완료 누른 후 화면

달이 사진3번을 눌었을 시

달이 사진1번을 눌렀을 시