Android Material Design 따라하기 5 - 메뉴화면 (RecyclerView & Adapter)

안녕하세요 프로나인 입니다.

오랜만에 Material Design 에 대해 작성하게 되었네요! 

 

koohee.tistory.com/6

Android Material Design 따라하기 4 - 메인화면 (ToolBar & AppBar)

 

지난 시간에 이어 메뉴 화면에 리스트를 주어 여러 목록들을 만들어 보도록 하겠습니다.

저는 RecyclerView & Item 들을 Adapter로 연결하는 방식으로 진행해보겠습니다.

 

Material Design을 사용해보는 것이 중점이기 때문에 

RecyclerView 와 Adapter의 설명은 간결하고 핵심만 알려드리고 

자세하게 또 따로 설명을 해드리도록 하겠습니다.

---

RecyclerView 

4강에서 진행했던 RecyclerView에 메뉴 들어갈 자리라고 적어두었는데 목록을 만들어 주겠습니다~!

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    ... 코드 생략

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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


    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

NestedScrollView 안에 보시면 RecyclerView를 넣어 주었습니다. 

이제 이 부분이 메뉴 화면의 목록을 담당하는 친구입니다! 이제 저 RecyclerView안에 모양을 만들어 넣어 줄 것입니다.

(자세한 설명은 따로 해둘 테니 핵심만 딱! 이해 안 되는 부분은 댓글로 적어주시면 언제든 바로 답 해드리겠습니다)

 

Item

RecyclerView 안에 들어갈 모양을 Item이라고 하겠습니다! 

냉장고로 쉽게 설명하자면

RecyclerView는 냉장고 // Item 은그릇이라 생각하시고 

냉장고에 그릇을 차곡차곡 넣어준다고 생각하시면 됩니다 그러면 냉장고 문을 열어 그릇을 빼내는 상황이 

메뉴 화면에서 만든 목록을 클릭하는 상황이 되는 것입니다.

 

그럼 이때 Item의 모양 (그릇 모양) 을 만들어주는 작업을 하도록 하겠습니다. 

 

<main_recycler_item.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="?attr/selectableItemBackground">

    <TextView
        android:id="@+id/tv_item"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

위와 같이 새로운 xml을 만들어 Item을 만들어 주었습니다.

그릇 모양(Item)은 단순히 글씨만 보이도록 했는데 여기에 이제 ImageView를 넣어 사진이 보이게도 할 수 있고 여러 가지로 커스텀하여 

그릇 모양(Item)을 꾸밀 수 있습니다.

 

그럼 이제 이 Item들을 RecyclerView에서 보일 수 있도록 Adapter로 연결을 시켜 주겠습니다.

Adapter

<MenuAdapter.java>

package 각자의 패키지명 작성;

import android.content.Context;
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 MenuAdapter extends RecyclerView.Adapter<MenuAdapter.ViewHolder> {

    public interface OnItemClickListener {
        void onItemClick(View view, int position, String menuname);
    }

    private ArrayList<String> arr_menu = null;
    private OnItemClickListener mListener = null;

    public void setOnItemClickListener(OnItemClickListener listener){
        this.mListener = listener;
    }

    MenuAdapter(ArrayList<String> list){
        arr_menu = list;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        Context context = parent.getContext();
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);

        View view = inflater.inflate(R.layout.main_recycler_item,parent,false);
        MenuAdapter.ViewHolder vh = new MenuAdapter.ViewHolder(view);

        return vh;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        String menu = arr_menu.get(position);
        holder.tv_item.setText(menu);
    }

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

    public  class ViewHolder extends RecyclerView.ViewHolder {
        private TextView tv_item;

        ViewHolder(final View itemView) {
            super(itemView);
            tv_item = (TextView) itemView.findViewById(R.id.tv_item);

            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = getAdapterPosition();
                    if(position != RecyclerView.NO_POSITION){
                        if(mListener != null){
                            String menu = arr_menu.get(position);
                            mListener.onItemClick(v,position,menu);

                        }
                    }
                }
            });
        }
    }
}

MenuActivity (메뉴) 와 Item 을 연결해주는 Adapter 입니다. 

자세한 설명은 따로 해드리도록 하겠습니다~! 위에 말한 듯이 중점은 Material Design 이니까요 ㅎㅎ

 

Menu

이제 Menu 클래스에 Adapter를 이용하여 Item을 연결해 줄 것입니다.

package 각자의 패키지명 작성;

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

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

import java.util.ArrayList;

public class MenuActivity extends AppCompatActivity {
    private RecyclerView rv_menu;
    private ArrayList<String> MenuList;
    private MenuAdapter menuAdapter;
    private LinearLayoutManager llm;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu);
        rv_menu = (RecyclerView) findViewById(R.id.rv_main);
        llm = new LinearLayoutManager(this);

        MenuList = new ArrayList();
        MenuList.add("메뉴 1번가");
        MenuList.add("메뉴 2번가");
        MenuList.add("메뉴 3번가");
        MenuList.add("메뉴 4번가");
        MenuList.add("메뉴 5번가");
        MenuList.add("메뉴 6번가");
        MenuList.add("메뉴 7번가");
        MenuList.add("메뉴 8번가");
        MenuList.add("메뉴 9번가");
        MenuList.add("메뉴 10번가");
        MenuList.add("메뉴 11번가");
        MenuList.add("메뉴 12번가");
        MenuList.add("메뉴 13번가");
        MenuList.add("메뉴 14번가");
        MenuList.add("메뉴 15번가");
        MenuList.add("메뉴 16번가");

        menuAdapter = new MenuAdapter(MenuList);
        rv_menu.setLayoutManager(llm);
        rv_menu.setAdapter(menuAdapter);
    }
}

메뉴 총 16개의 메뉴를 만들었습니다! 자신이 원하는 메뉴 이름으로 바꿔서 add를 해도 상관없습니다.

 

이제 메뉴 화면을 설명 없이 코드로만 딱! 만들었습니다. 어떤 화면으로 나올지 봐볼까요!?

결과 화면

 

이렇게 만든 메뉴들이 나오는 것을 확인할 수 있을 것입니다~~

이제 목록 각각에 Material Design 을 넣어 설명해드리도록 하겠습니다. (이것이 본래 목표!! )

다음 시간에 만나요 안녀어엉~~✋🤚

 

---

참조 - Material Design

https://material.io/develop/android/

Material Design