[Android] RecyclerView (2) - CardView를 활용해서 구현해보기

https://ehdnsdlek.tistory.com/8

[Android] RecyclerView (1) 개념 및 구조

RecyclerView (1) 편에서 이해한 내용대로 구현하기위해 워크플로우를 작성하면 다음과 같다.

1. Activity or Fragment에 RecyclerView 작성
2. 아이템의 목록을 나타낼 행 레이아웃 작성
3. 어떤 데이터를 출력할 것인지 데이터 모델 작성
4. 리사이클러뷰 어댑터 작성
5. 리사이클러뷰에 어댑터 연결 및 레이아웃 매니저 설정

 

CardView는 Material Design 가이드라인을 따르는 UI 컴포넌트 중 하나로, 정보를 시각적으로 돋보이게 하고 구성하기 편리하다. 그림자 효과와 둥근 모서리를 추가하여 작성해보도록 하자

사진은 같은 걸로 통일했다

 

우선 로컬이든 서버 통신이든 RecyclerView에 출력할 값들을 어떠한 형태로든 저장해 놓아야 한다.
뉴스 기사를 GPT에게 부탁하여 임의로 생성하고, 사진과 날짜는 동일한 것으로 통일했다.

    // res/values/strings.xml
    
    <string-array name="first_items">
        <item>클린스만 “사퇴? 대회 분석할 것”…선수들은 감독 두둔</item>
        <item>혁신적인 기술 발전</item>
        <item>글로벌 시장 동향</item>
        <item>사회적 변화와 함께하는 비즈니스 전략</item>
        <item>환경 보호에 대한 새로운 접근법</item>
        <item>건강과 웰빙을 위한 최신 정보</item>
        <item>인간 중심의 디자인과 사용자 경험</item>
        <item>디지털 시대의 새로운 소비 트렌드</item>
        <item>글로벌 경제의 변화와 영향</item>
        <item>사이버 보안과 프라이버시에 대한 전망</item>
        <item>인공지능과 머신 러닝의 혁신적 활용</item>
        <item>교육과 미래 일자리에 대한 전략적 접근</item>
        <item>건강한 라이프스타일을 위한 조언과 팁</item>
        <item>지속 가능한 에너지 및 자원 관리 전략</item>
        <item>문화와 예술의 다양성과 발전에 대한 이야기</item>
    </string-array>

 

 

1. Activity 또는 Fragment에 RecyclerView 작성

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_first"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

2. 아이템의 목록을 나타낼 행 레이아웃 작성

 

각 행에 나타낼 레이아웃을 디자인한다.  res/layout 폴더에 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="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="5dp"
        app:cardBackgroundColor="#FFFFFF"
        app:cardCornerRadius="20dp"
        app:cardElevation="4dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

            <ImageView
                android:id="@+id/ivNewsImage"
                android:layout_width="80dp"
                android:layout_height="50dp"
                android:layout_marginEnd="4dp"
                android:scaleType="centerCrop"
                android:src="@drawable/a_soccer"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.2" />

            <TextView
                android:id="@+id/tvTitle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:ellipsize="end"
                android:maxLines="2"
                android:text="News Title"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                android:textSize="18sp"
                app:layout_constraintEnd_toStartOf="@id/ivNewsImage"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@id/ivNewsImage" />

            <TextView
                android:id="@+id/tvDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:text="Date"
                android:textSize="10sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

            <!-- Additional TextViews or Views can be added here for description, date, etc. -->

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

 

 

 

3. 데이터 모델  작성

RecyclerView에 표시될 각 항목의 데이터 구조를 정의한다.

// RvDataModel.java

public class LetterDataModel {
    String title, date;
    int image;

    public LetterDataModel(String title, int image, String date) {
        this.title = title;
        this.image = image;
        this.date = date;
    }

    public String getTitle() {
        return title;
    }
    public String getDate() {return date;}
    public int getImage() {return image;}
}

 

 

 

4. 어댑터 작성

여기서 context는 LayoutInflater를 가져오는데 사용된다. 
onCreateViewHolder 메소드 내에서, LayoutInflater.from(context) 호출을 통해 뷰 홀더에 대한 레이아웃을 확장한다.
이렇게 Inflate 된 뷰는 RecyclerView의 각 아이템을 표시하는데 사용된다.

// RvAdapter.java

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

    Context context;

    ArrayList<LetterDataModel> LetterDataModel;

    public LetterRvAdapter(Context context, ArrayList<LetterDataModel> dataModels) {
        this.context = context;
        this.LetterDataModel = dataModels;
    }

    public LetterRvAdapter.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // 레이아웃 인플레이터를 사용하여 rv_row.xml 레이아웃을 뷰로 변환합니다.
        LayoutInflater inflater = LayoutInflater.from(context);
        View view = inflater.inflate(R.layout.letter_rv_row, parent, false);
        
	// 생성된 뷰를 사용하여 MyViewHolder 객체를 생성하고 반환합니다.
        return new LetterRvAdapter.MyViewHolder(view);
    }

    public void onBindViewHolder(@NonNull LetterRvAdapter.MyViewHolder holder, int position) {
        // 현재 위치의 DataModel 객체를 가져와서, 텍스트와 이미지를 뷰 홀더의 뷰에 설정합니다.
        holder.tvTitle.setText(LetterDataModel.get(position).getTitle());
        holder.tvDate.setText(LetterDataModel.get(position).getDate());
    }

    public int getItemCount() {
        return LetterDataModel.size();
    }

    public static class MyViewHolder extends RecyclerView.ViewHolder {
        TextView tvTitle, tvDate;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            tvTitle = itemView.findViewById(R.id.tvTitle);
            tvDate = itemView.findViewById(R.id.tvDate);
        }
    }

}

 

 

 

 

5. 어댑터 연결 및 레이아웃 매니저 설정

date와 image는 같은 클래스 내에서 임의의 값으로 선언해준다. 사전에 준비했던 strings.xml 에서 getResources()를 통해 배열을 가져온다. 이후 반복문을 통해 배열의 값을 하나씩 넣어준다.

// main.java

public class NewsLetterActivity extends Fragment implements NewsDetailInterface {

    ArrayList<LetterDataModel> itemList = new ArrayList<>();

    int[] images = {
            R.drawable.a_soccer
    };
    String[] date = {
            "2024-02-07"
    };

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        RecyclerView recyclerView = findViewById(R.id.rv_first);
        // 레이아웃 매니저 설정
        recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
        // 데이터 설정
        setItemList();

        LetterRvAdapter adapter = new LetterRvAdapter(getActivity(), itemList, this);
        recyclerView.setAdapter(adapter);

        return firstView;
    }

    private void setItemList() {
        String[] items = getResources().getStringArray(R.array.first_items);
        for (String item : items) {
            itemList.add(new LetterDataModel(item, images[0], date[0]));
        }
    }
}

 

 

 

↓ TabLayout 만들기

https://ehdnsdlek.tistory.com/3

[Android] TabLayout 만들기