도전!13 - 리싸이클러뷰에 고객 정보 추가하기

전에 했던 리싸이클러뷰랑 거의 동일하다.

7장 - 리싸이클러뷰

 

⭐1. activity_main.xml⭐

은근 이거 배치하는 게 까다로웠다. (생각보다 귀찮..)

특히 리싸이클러뷰 주위에 검은 테두리를 넣고 싶어서 처음엔 리싸이클러뷰에다가 바로 background로 내가 만든 drawable 레이아웃을 적용시켰는데, 이러면 리싸이클러뷰가 살짝 튀어나온다.

해결 : 레이아웃 안에 리싸이클러뷰를 넣고, 레이아웃에다가 drawable 레이아웃을 적용시킴.

 

<<코드>>

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        android:padding="15dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_weight="0.9"
            android:text="고객정보 추가"
            android:textSize="34sp"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/textView_person"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.1"
            android:text="0명"
            android:textSize="34sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="409dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout2">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            android:orientation="horizontal"
            android:padding="5dp">

            <EditText
                android:id="@+id/editText_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="5dp"
                android:layout_weight="1"
                android:background="@drawable/whitebox"
                android:ems="10"
                android:hint="이름"
                android:inputType="text"
                android:padding="5dp"
                android:textSize="24sp" />

            <EditText
                android:id="@+id/editText_birth"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/whitebox"
                android:ems="10"
                android:hint="생년월일"
                android:inputType="text"
                android:padding="5dp"
                android:textSize="24sp" />
        </LinearLayout>

        <EditText
            android:id="@+id/editText_mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="25dp"
            android:background="@drawable/whitebox"
            android:ems="10"
            android:hint="전화번호"
            android:inputType="text"
            android:padding="5dp"
            android:textSize="24sp" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:text="추가"
            android:textSize="20sp" />

    </LinearLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/linearLayout">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="30dp"
            android:layout_marginEnd="30dp"
            android:layout_marginBottom="30dp"
            android:background="@drawable/whitebox"
            android:orientation="vertical"
            android:padding="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/RecyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="5dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />
        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

⭐2. 아이템의 데이터를 담아둘 Person 클래스 만들기⭐

1. 데이터 변수 선언하기
2. 생성자 추가하기
3. Getter and Setter로 데이터변수 각각의 get, set 메서드 추가하기

<<코드>>

❗생성자를 추가할 때 주의할 점 : 파라미터를 지멋대로 만든다.

내가 String name, birth, mobile 이렇게 순서대로 선언해줘도 지가 순서를 바꾼다. 뭔 기준인지는 모르겠다.

암튼.. 그러니까 생성자 추가하고 나면 한번 체크하고 넘어가자.

package com.example.doitmission_13;

public class Person {
    String name;
    String birth;
    String mobile;

    public Person(String name, String birth, String mobile) {
        this.name = name;
        this.birth = birth;
        this.mobile = mobile;
    }

    public String getBirth() {
        return birth;
    }

    public void setBirth(String birth) {
        this.birth = birth;
    }

    public String getMobile() {
        return mobile;
    }

    public void setMobile(String mobile) {
        this.mobile = mobile;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

⭐3. 리싸이클러뷰의 아이템 레이아웃 만들기 : person_item.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="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="10dp"
        app:cardElevation="5dp"
        app:cardUseCompatPadding="true">

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

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:srcCompat="@mipmap/ic_launcher" />

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

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

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

                        <TextView
                            android:id="@+id/textView_name"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="고객#1"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/textView_birth"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:text="1999-05-10"
                            android:textSize="16sp" />
                    </LinearLayout>

                    <TextView
                        android:id="@+id/textView_mobile"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginHorizontal="5dp"
                        android:text="010-5555-5555"
                        android:textSize="30sp" />
                </LinearLayout>

            </LinearLayout>
        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

⭐4. 어댑터 만들기 : PersonAdapter.java⭐

1. 어댑터가 RecyclerView.Adapter<PersonAdapter.ViewHolder>를 상속받도록 한다.
2. Person 아이템이 들어갈 배열을 만든다. (items)
3. ViewHolder 클래스를 만들고, RecyclerView.ViewHolder를 상속받도록 한다.
4. ViewHolder 클래스 안에 생성자를 만들고, setItem 메서드를 만든다.
5. 어댑터 내부에 필요한 메서드 3개를 생성하고 내부를 수정한다.
6. addItem, setItem, setItems, getItem 메서드를 작성한다. (저번에 작성한 예제 그대로 따라 작성함. 근데 여기선 addItem만 사용되긴 함.)

package com.example.doitmission_13;

public class PersonAdapter extends RecyclerView.Adapter<PersonAdapter.ViewHolder> {
    ArrayList<Person> items = new ArrayList<Person>();

    static class ViewHolder extends RecyclerView.ViewHolder{
        TextView textView_name;
        TextView textView_birth;
        TextView textView_mobile;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            textView_name = itemView.findViewById(R.id.textView_name);
            textView_birth = itemView.findViewById(R.id.textView_birth);
            textView_mobile = itemView.findViewById(R.id.textView_mobile);
        }

        public void setItem(Person item){
            textView_name.setText(item.getName());
            textView_birth.setText(item.getBirth());
            textView_mobile.setText(item.getMobile());
        }
    }

    @NonNull
    @Override
    // 저번 예제에서는 그냥 .ViewHolder로 되어있는데 이번엔 PersonAdapter.가 추가되어있다. 근데 달라도 큰 상관없는듯
    public PersonAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        View itemView = inflater.inflate(R.layout.person_item, parent, false);
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull PersonAdapter.ViewHolder holder, int position) {
        Person item = items.get(position);
        holder.setItem(item);
    }

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

    // 귀찮아서 복붙한 거
    
    public void addItem(Person item){
        items.add(item);
    }
    public void setItems(ArrayList<Person> items){
        this.items = items;
    }
    public Person getItem(int position){
        return items.get(position);
    }
    public void setItem(int position, Person item){
        items.set(position, item);
    }
}

⭐5. MainActivity.java 작성하기⭐

입력받은 값을 어댑터로 넘겨준 뒤, 리싸이클러뷰에 어댑터를 적용한다.

리싸이클러뷰는 LinearLayoutManager를 사용하여 상하로 드래그 가능한 리스트 형식으로 만든다.

 

<<코드>>

package com.example.doitmission_13;

public class MainActivity extends AppCompatActivity {
    int n=0; // 추가한 아이템 수

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

        TextView textView = findViewById(R.id.textView_person);
        EditText editText_name = findViewById(R.id.editText_name);
        EditText editText_birth = findViewById(R.id.editText_birth);
        EditText editText_mobile = findViewById(R.id.editText_mobile);

        RecyclerView recyclerView = findViewById(R.id.RecyclerView);

        LinearLayoutManager layoutManager = new LinearLayoutManager(
                this, LinearLayoutManager.VERTICAL, false);

        recyclerView.setLayoutManager(layoutManager);

        PersonAdapter adapter = new PersonAdapter();

        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String name = editText_name.getText().toString();
                String birth = editText_birth.getText().toString();
                String mobile = editText_mobile.getText().toString();

                adapter.addItem(new Person(name, birth, mobile));
                recyclerView.setAdapter(adapter);

                n++;
                textView.setText(n+"명");
            }
        });

    }
}

⭐6. 실행 결과⭐

 

서비스보단 리싸이클러뷰가 확실히 이해가 잘 되는듯.