[Android] RecyclerView - GridLayout 구현하기

RecyclerView를 카드뷰 형식으로 LinerLayout 형태로 만들어 보았다.

오늘은 GridView 형식으로 RecyclerView를 만들어 보자.

 

1. Layout 만들기

액티비티에 RecyclerView를 생성하고, 각 행의 아이템을 나타내줄 레이아웃도 작성해준다.

이때, row.xml에서 최상단 ConstraintLayout과 CardView는 wrap_content로 설정하여 아이템 항목에 맞춰 감싸준다.

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/myRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:spanCount="2"/>
</androidx.constraintlayout.widget.ConstraintLayout>

 

// row.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">


    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/numText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="176dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="177dp"
                android:layout_marginBottom="15dp"
                android:text="TextView"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

2. Adapter 작성

RvAdapter.java 파일을 생성한다.

RvAdpater는 RecyclerView의 Adapter 클래스를 상속받아
MyViewHolder라는 내부 클래스를 사용하는 커스텀 어댑터를 정의한다.

빨간 전구를 사용하여 간편하게 메소드를 구현할 수 있다.

 

// RvAdapter.java

public class RvAdapter extends RecyclerView.Adapter<RvAdapter.MyViewHolder>{

    private List<Integer> numbers;
    Context context;

    public RvAdapter(Context context, List<Integer> numbers) {
        this.context = context;
        this.numbers = numbers;
    }


    @NonNull
    @Override
    public RvAdapter.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View view = inflater.inflate(R.layout.row, parent, false);

        return new RvAdapter.MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RvAdapter.MyViewHolder holder, int position) {
        holder.numText.setText(String.valueOf(numbers.get(position)));

    }

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

    public static class MyViewHolder extends RecyclerView.ViewHolder{

        TextView numText;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);

            numText = itemView.findViewById(R.id.numText);
        }
    }
}

 

 

 

3. LayoutManager 작성

setLayoutManger() 함수를 통해 GridLayoutManager를 설정한다. 

// MainActivity.java

public class MainActivity extends AppCompatActivity {

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

        RecyclerView recyclerView = findViewById(R.id.myRecyclerView);
        recyclerView.setLayoutManager(new GridLayoutManager(this, 2)); // 열의 개수 2
        List<Integer> numbers = new ArrayList<>();
        for (int i =1; i<=200; i++){
            numbers.add(i);
        }

        RvAdapter adapter = new RvAdapter(this, numbers);

        recyclerView.setAdapter(adapter);

    }
}

 

 

 

<결과>