안드로이드 심심풀이/응용

[안드로이드 스튜디오] 1to50게임 만들기

훈땅콩 2019. 7. 8. 11:54
반응형

1to50 게임을 만들어보자! 

 

오늘은 제가 공부하고 직접만들어본 1to50게임에 대해 포스팅 해보려고 합니다!

아직은 초보고 많은 부분이 미숙하지만 이런저런 소스코드를 참고하면서 만들어 보았습니다ㅎㅎ

 

가장먼저 데이터 바인딩과 RecyclerView를 사용하기위해 build.gradle를 수정합니다!

 

dataBinding{
	enabled = true;
}

데이터 바인딩을 사용할 생각이므로 dataBinding enabled를 true로 설정해 주시고요.

 

implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3' 를 dependencies 의 추가해 줍니다.

 

1. 먼저 메인 화면의 레이아웃부터 짜보도록 합니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <android.support.constraint.ConstraintLayout
            android:id="@+id/numView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            >
            <TextView
                android:id="@+id/numberView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="@+id/chronometer"
                app:layout_constraintBottom_toBottomOf="@+id/startBtn"
                android:textSize="22sp"
                android:layout_marginLeft="50dp"
                android:gravity="center"
                android:text="Number\n0"/>

            <Chronometer
                android:id="@+id/chronometer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:layout_marginRight="50dp"
                android:layout_marginTop="50dp"
                android:textSize="20sp"
                />
            <Button
                android:id="@+id/startBtn"
                android:layout_marginTop="30dp"
                app:layout_constraintTop_toBottomOf="@id/chronometer"
                app:layout_constraintRight_toRightOf="parent"
                android:layout_marginRight="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="시작"
                android:textColor="@android:color/black"
                android:textSize="24sp"/>
            <Button
                android:id="@+id/retryBtn"
                android:layout_marginTop="30dp"
                app:layout_constraintTop_toBottomOf="@id/chronometer"
                app:layout_constraintRight_toRightOf="parent"
                android:layout_marginRight="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="재시도"
                android:visibility="invisible"
                android:textColor="@android:color/black"
                android:textSize="24sp"/>

        </android.support.constraint.ConstraintLayout>

        <android.support.v7.widget.RecyclerView
            app:layout_constraintTop_toBottomOf="@+id/numView"
            android:id="@+id/gridView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:overScrollMode="never"
            tools:ignore="MissingConstraints" />
    </android.support.constraint.ConstraintLayout>
</layout>

상단에는 지금 골라야할 숫자와 현재 얼마나 시간이 지났는지가 표시되며

시작버튼과 그 시작버튼을 눌렀을시 나오는 재시작 버튼으로 구성됩니다.

 

하단에는 숫자 버튼들이 들어갈 RecyclerView가 들어갑니다.

 

2. RecyclerView의 item만들기

 

item.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <Button
        android:layout_margin="2dp"
        android:id="@+id/numBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        android:textStyle="bold"
        tools:text="1"/>
</layout>

RecyclerView는 버튼을 GridLayout으로 설정해줄 예정입니다.

item에는 숫자가 들어갈 버튼을 만들어 줍니다.

 

3. ViewHolder를 이용하여 RecyclerView Adapter를 만들기

 

adapter에서 1부터 25의 숫자를 처음에 셋팅해주고, 숫자를 누를때마다 랜덤으로 26부터 50의 숫자가 나오도록 합니다.

 

4. MainActivity 작성

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ItemViewHolder> {


    private Vector<Integer> _1to50 = new Vector<>();
    private Vector<Integer> visible = new Vector<>();

    Context context;

    public ItemAdapter(Context context) {

        this.context = context;
        for (int i = 0; i < 25; i++) {
            visible.add(i, View.VISIBLE);
        }
    }



    @NonNull
    @Override
    public ItemViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
        ItemBinding binding = ItemBinding.inflate(LayoutInflater.from(context), viewGroup, false);
        return new ItemViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull ItemViewHolder itemViewHolder, int position) {
        ItemBinding binding = itemViewHolder.binding;
        int number = _1to50.get(position);
        binding.numBtn.setText(String.valueOf(number));
        binding.numBtn.setVisibility(visible.get(position));
    }


    @Override
    public int getItemCount() {
        return _1to50.size();
    }

    void init1to25(int number) {
        _1to50.add(number);
    }

    void update26to50(int position, int number) {
        _1to50.remove(position);
        _1to50.add(position, number);
    }

    void setUpVisible(int position) {
        visible.remove(position);
        visible.add(position, View.INVISIBLE);
    }

    class ItemViewHolder extends RecyclerView.ViewHolder {
        ItemBinding binding;

        ItemViewHolder(ItemBinding binding) {
            super(binding.getRoot());
            this.binding = binding;
        }
    }
}

Main에서는 시작버튼을 누를 경우 Adapter를 선언해서 RecyclerView를 실행해주고 , Choronometer의 시간이 시작되도록 합니다.

또한 now라는 int형 변수를 만들어 숫자를 누를시 증가하도록 만든 후 현재 눌러야할 숫자를 보여주는 textview에 붙혀 넣습니다. 

 

숫자가 51이 되면 게임이 끝나고 시간이 멈추도록 합니다. 시간을 MM:SS:mm으로 바꿔보고 싶었으나 결국 찾지 못했습니다. 나중에 이 부분의 대해 알게 된다면 수정하도록 하겠습니다. 감사합니다 

반응형