[안드로이드 스튜디오] 메모장 어플 만들어보기 : RecyclerView로 메모 리스트 만들기

 

안드로이드 스튜디오 공부를 시작하면서 내가 처음으로 만들 수 있는 것이 무엇이 있을까 하고 생각하던 중, 평소 할 일들을 종종 까먹거나 놓치는 나에게 할 일을 적어 놓을 수 있는 메모앱을 만들어야겠다고 다짐했다. 

 

아직 안드로이드 공부가 익숙하지 않아 코드가 미흡하고 많은 예제들을 참고하겠지만 이 프로젝트도 공부라고 생각하며 열심히 배우면서 만들 것이다.

 

 

acivity_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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="594dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/WriteButton"
            android:layout_width="match_parent"
            android:layout_height="69dp"
            android:layout_weight="1"
            android:text="메모 작성하기"
            android:textColor="#FFFFFF"
            app:backgroundTint="#131313" />
    </LinearLayout>

</LinearLayout>

 

일단 첫 메인화면 레이아웃을 만들어봤다. 메모들을 한눈에 화면 전체에 보일 수 있도록 리사이클러뷰를 생성했고, 메모 작성 화면으로 넘어갈 버튼을 만들었다.

 

 

 

activity_note_write.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="5dp">


            <ImageButton
                android:id="@+id/cancelButton"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/ic_clear_24px"
                android:text="취소"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageButton
                android:id="@+id/writeButton"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/ic_check_circle_outline_24px"
                android:text="작성"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>


    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="10dp">


        <EditText
            android:id="@+id/titleInput"
            android:layout_width="match_parent"
            android:layout_height="69dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:hint="제목"
            android:maxLength="100"
            android:gravity="top"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >


        <EditText
            android:id="@+id/contentInput"
            android:layout_width="match_parent"
            android:layout_height="258dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:hint="내용"
            android:maxLength="200"
            android:gravity="top"/>
    </LinearLayout>

</LinearLayout>

 

메모 작성 화면에서는 제목과 내용을 포함하여 저장할 수 있고, 취소버튼과 저장버튼을 만들어두었다.

 

 

note_Item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/titleText"
        android:layout_width="match_parent"
        android:layout_height="39dp"
        android:text="제목"
        android:textSize="18dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/contentText"
        android:layout_width="match_parent"
        android:layout_height="47dp"
        android:text="내용"
        android:textSize="24dp"
        android:textStyle="bold" />

</LinearLayout>

 

이것은 리사이클러뷰에 보여줄 각각의 레이아웃이다. 나중에 화면 레이아웃들은 추가로 꾸밀 예정이다.

---

 

NoteWriteActivity.java

package com.example.notebook3;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.Toast;

import com.example.notebook3.R;

import java.util.Dictionary;

public class NoteWriteActivity extends AppCompatActivity {

    EditText titleInput;
    EditText contentInput;

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

        titleInput = (EditText) findViewById(R.id.titleInput);
        contentInput = (EditText) findViewById(R.id.contentInput);

        ImageButton writeButton = (ImageButton) findViewById(R.id.writeButton);
        writeButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                returnToMain();

            }
        });

        ImageButton cancelButton = (ImageButton) findViewById(R.id.cancelButton);
        cancelButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

    }

    public void returnToMain() {      //메인의 리사이클러뷰로
            String title = titleInput.getText().toString();
            String content = contentInput.getText().toString();

            Intent intent = new Intent();
            intent.putExtra("title", title);
            intent.putExtra("content", content);
            setResult(RESULT_OK, intent);

            finish();
        }
    }

 

메모를 작성하는 화면의 클래스로 작성버튼을 누르면 제목과 내용을 문자열로 받아 메인화면으로 값을 전달한 뒤 종료한다. 

 

 

RecyclerAdapter.java

package com.example.notebook3;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

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

    private ArrayList<Note> listData = new ArrayList<>();

    @NonNull
    @Override
    public ItemViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.note_item, parent, false);
        return new ItemViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ItemViewHolder holder, int position) {

        holder.onBind(listData.get(position));
    }

    @Override
    public int getItemCount() {

        return listData.size();
    }

    void addItem(Note note) {

        listData.add(note);
    }

    class ItemViewHolder extends RecyclerView.ViewHolder {

        private TextView textView1;
        private TextView textView2;

        ItemViewHolder(View itemView) {
            super(itemView);

            textView1 = itemView.findViewById(R.id.titleText);
            textView2 = itemView.findViewById(R.id.contentText);
        }

        void onBind(Note note) {
            textView1.setText(note.getTitle());
            textView2.setText(note.getContent());
        }
    }
}

 

리스트뷰나 리사이클러뷰를 사용하려면 항상 어답터를 갖고 있어야한다. 어답터는 리스트뷰나 리사이클러뷰의 데이터들을 관리해주는 역할을 한다.

 

 

 

MainActivity.java

package com.example.notebook3;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;
    private RecyclerAdapter adapter;

    List<Note> noteList;


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

        init();
        getData();

        noteList = new ArrayList<>();

        Button button = (Button) findViewById(R.id.WriteButton);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showNoteWriteActivity();

            }
        });

    }

    //노트 작성 화면 띄우기
    public void showNoteWriteActivity() {
            Intent intent = new Intent(getApplicationContext(), com.example.notebook3.NoteWriteActivity.class);
            startActivityForResult(intent, 102);

        }
        //노트 작성 값 받아오기
    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data){
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode == 102) {
            if (data != null) {
                String title = data.getStringExtra("title");
                String content = data.getStringExtra("content");

                Note note = new Note(title, content);
                adapter.addItem(note);
                adapter.notifyDataSetChanged();
            }
        }
    }

    //RecyclerView 사용
    private void init() {
        RecyclerView recyclerView = findViewById(R.id.recyclerView);

        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(linearLayoutManager);

        adapter = new RecyclerAdapter();
        recyclerView.setAdapter(adapter);

    }

    //초기 데이터 입력
    private void getData() {
        List<String> listTitle = Arrays.asList("안녕", "안녕하세요");
        List<String> listContent = Arrays.asList("Hi", "Hello");


        for (int i = 0; i < listTitle.size(); i++) {
            Note note = new Note(listTitle.get(i), listContent.get(i));

            adapter.addItem(note);
        }
        adapter.notifyDataSetChanged();
    }
}

 

메인 클래스에서는 init()를 통해 리사이클러뷰 사용하고 getData() 부분에 리사이클러뷰에 저장해 놓을 초기 데이터들을 저장해두었다. showNoteWriteActivity()는 Intent를 통해 메모화면으로 넘어가고 startActivityResult로 입력받은 값들을 받아오게 된다. onActivityResult를 통해 어답터에 데이터를 추가한다.

 

 

아직은 간단한 화면 구성과 메모작성만 구현해봤다. 앞으로 계속 기능들을 추가해보면서 공부할 계획이다.

 

 

git 주소: github.com/m3k0813/Note2