리사이클러 보기 예제에 대한 카드 보기를 시작하기 전에 Android에서 리사이클러 보기가 무엇인지 알아야 합니다. Recycler 보기는 목록 보기의 고급 버전이며 보기 홀더 디자인 패턴을 기반으로 작동합니다. 리사이클러 보기를 사용하여 그리드와 항목 목록을 표시할 수 있습니다.
카드 보기는 프레임 레이아웃에 의해 확장되며 카드 방식으로 항목을 표시하는 데 사용됩니다. 반경과 그림자를 미리 정의된 태그로 지원합니다.
이 예는 나이와 함께 학생 이름을 표시하는 아름다운 학생 기록 앱을 만들어 Recycler View와 카드 보기를 통합하는 방법을 보여줍니다.
1단계 − Android Studio에서 새 프로젝트를 생성하고 파일 ⇒ 새 프로젝트로 이동하여 필요한 모든 세부 정보를 입력하여 새 프로젝트를 생성합니다.
2단계 − build.gradle을 열고 Recycler 보기 및 카드 보기 라이브러리 종속성을 추가합니다.
apply plugin: 'com.android.application'
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.example.andy.tutorialspoint"
minSdkVersion 19
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
} 3단계 − res/layout/activity_main.xml에 다음 코드를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?> <RelativeLayout xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools = "https://schemas.android.com/tools" xmlns:app = "https://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" android:layout_height = "match_parent" app:layout_behavior = "@string/appbar_scrolling_view_behavior" tools:showIn = "@layout/activity_main" tools:context = ".MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="vertical" /> </RelativeLayout>
위의 코드에서 창 관리자에 상대적인 부모 레이아웃으로 리사이클러 보기를 추가했습니다.
4단계 − src/MainActivity.java
에 다음 코드 추가package com.example.andy.tutorialspoint;
import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private StudentAdapter studentAdapter;
private List<studentData> studentDataList = new ArrayList<>();
@TargetApi(Build.VERSION_CODES.O)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recycler_view);
studentAdapter = new StudentAdapter(studentDataList);
RecyclerView.LayoutManager manager = new GridLayoutManager(this, 2);
recyclerView.setLayoutManager(manager);
recyclerView.setAdapter(studentAdapter);
StudentDataPrepare();
}
@RequiresApi(api = Build.VERSION_CODES.N)
private void StudentDataPrepare() {
studentData data = new studentData("sai", 25);
studentDataList.add(data);
data = new studentData("sai", 25);
studentDataList.add(data);
data = new studentData("raghu", 20);
studentDataList.add(data);
data = new studentData("raj", 28);
studentDataList.add(data);
data = new studentData("amar", 15);
studentDataList.add(data);
data = new studentData("bapu", 19);
studentDataList.add(data);
data = new studentData("chandra", 52);
studentDataList.add(data);
data = new studentData("deraj", 30);
studentDataList.add(data);
data = new studentData("eshanth", 28);
studentDataList.add(data);
Collections.sort(studentDataList, new Comparator() {
@Override
public int compare(studentData o1, studentData o2) {
return o1.name.compareTo(o2.name);
}
});
}
} 위의 코드에서 우리는 리사이클러 보기와 학생 어댑터를 추가했습니다. 해당 학생 어댑터에서 우리는 studentDatalist를 arraylist로 전달했습니다. 학생 데이터 목록에는 학생의 이름과 나이가 포함됩니다.
그리드를 얻으려면 아래와 같이 그리드 레이아웃 관리자를 사용해야 합니다. -
RecyclerView.LayoutManager manager = new GridLayoutManager(this, 2);
위의 코드에서 레이아웃 관리자를 Gridlayout Manager로 사용하고 셀을 2로 추가했습니다. 따라서 각 행에 두 개의 그리드가 있는 결과가 표시됩니다.
재활용기 보기 항목을 비교하기 위해 아래와 같이 컬렉션 프레임워크 및 정렬 방법을 사용했습니다. -
Collections.sort(studentDataList, new Comparator() {
@Override
public int compare(studentData o1, studentData o2) {
return o1.name.compareTo(o2.name);
}
}); 위의 코드에서는 이름을 사용하여 요소를 비교하고 있습니다.
5단계 − 다음은 수정된 src/StudentAdapter.java 파일의 내용이다. 패키지 com.example.andy.tutorialspoint;
import android.graphics.Color;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.List;
import java.util.Random;
class StudentAdapter extends RecyclerView.Adapter {
List studentDataList;
public StudentAdapter(List studentDataList) {
this.studentDataList=studentDataList;
}
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View itemView = LayoutInflater.from(viewGroup.getContext())
.inflate(R.layout.student_list_row, viewGroup, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(MyViewHolder viewHolder, int i) {
studentData data=studentDataList.get(i);
Random rnd = new Random();
int currentColor = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
viewHolder.parent.setBackgroundColor(currentColor);
viewHolder.name.setText(data.name);
viewHolder.age.setText(String.valueOf(data.age));
}
@Override
public int getItemCount() {
return studentDataList.size();
}
class MyViewHolder extends RecyclerView.ViewHolder {
TextView name,age;
LinearLayout parent;
public MyViewHolder(View itemView) {
super(itemView);
parent = itemView.findViewById(R.id.parent);
name = itemView.findViewById(R.id.name);
age = itemView.findViewById(R.id.age);
}
}
} 어댑터 클래스에는 아래와 같이 네 가지 방법이 있습니다. -
onCreateViewHolder() :- 뷰 홀더를 생성하는 데 사용되며 뷰를 반환합니다.
onBindViewHolder() - 생성된 뷰 홀더와 바인딩됩니다.
getItemCount() - 목록의 크기를 포함합니다.
MyViewHolder 클래스 - RecyclerView.ViewHolder에 의해 확장된 뷰 홀더 내부 클래스입니다.
리사이클러 보기 항목에 임의의 배경을 설정하기 위해 임의의 클래스(Android에서 미리 정의된 클래스)를 사용하여 임의의 색상을 생성하고 아래와 같이 보기 항목의 상위 항목에 색상을 추가했습니다. -
Random rnd = new Random(); int currentColor = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)); viewHolder.parent.setBackgroundColor(currentColor);
6단계 − 다음은 res/layout/student_list_row.xml xml의 수정된 내용입니다.
<?xml version = "1.0" encoding = "utf-8"?> <android.support.v7.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android" xmlns:card_view = "https://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" card_view:cardCornerRadius = "4dp" android:id =" @+id/card_view" android:layout_margin = "10dp" android:layout_height = "200dp"> <LinearLayout android:id = "@+id/parent" android:layout_gravity = "center" android:layout_width = "match_parent" android:orientation = "vertical" android:gravity = "center" android:layout_height="match_parent"> <TextView android:id = "@+id/name" android:layout_width = "wrap_content" android:gravity = "center" android:textSize = "25sp" android:textColor = "#FFF" android:layout_height = "wrap_content" /> <TextView android:id = "@+id/age" android:layout_width = "wrap_content" android:gravity = "center" android:textSize = "25sp" android:textColor = "#FFF" android:layout_height = "wrap_content" /> </LinearLayout> </android.support.v7.widget.CardView>
위의 목록 항목 보기에서 우리는 cardview 내부에 이름과 나이에 대한 두 개의 텍스트 보기를 만들었습니다. 카드 보기에는 미리 정의된 모서리 반경과 그림자 속성이 포함되어 있습니다. 그래서 우리는 카드 보기에서 모서리 반경을 사용했습니다.
7단계 − 다음은 수정된 src/studentData.java 파일의 내용이다. 패키지 com.example.andy.tutorialspoint;
class studentData {
String name;
int age;
public studentData(String name, int age) {
this.name = name;
this.age = age;
}
} 위의 코드에서 학생 데이터 개체에 대해 알려줍니다. 응용 프로그램을 실행해 보겠습니다. 실제 Android 모바일 장치를 컴퓨터에 연결했다고 가정합니다. Android 스튜디오에서 앱을 실행하려면 프로젝트의 활동 파일 중 하나를 열고 도구 모음에서 실행 아이콘을 클릭합니다. 모바일 장치를 옵션으로 선택한 다음 기본 화면을 표시할 모바일 장치를 확인하십시오 -
이제 recyclerview로 스크롤하면 아래와 같이 결과가 표시됩니다. -
