리사이클러 보기 예제에 대한 항목 애니메이션을 시작하기 전에 Android에서 리사이클러 보기가 무엇인지 알아야 합니다. Recycler 보기는 목록 보기의 고급 버전이며 보기 홀더 디자인 패턴을 기반으로 작동합니다. 리사이클러 보기를 사용하여 그리드와 항목 목록을 표시할 수 있습니다.
카드 보기는 프레임 레이아웃으로 확장되며 카드 방식으로 항목을 표시하는 데 사용됩니다. 반경과 그림자를 미리 정의된 태그로 지원합니다.
이 예에서는 나이와 함께 학생 이름을 표시하는 아름다운 학생 기록 앱을 만들어 Recycler View의 Animation을 카드 보기와 통합하는 방법을 보여줍니다.
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 android.widget.LinearLayout;
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,MainActivity.this);
RecyclerView.LayoutManager manager = new LinearLayoutManager(this);
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로 전달했습니다. 학생 데이터 목록에는 학생의 이름과 나이가 포함됩니다.
재활용기 보기 항목을 비교하기 위해 아래와 같이 컬렉션 프레임워크 및 정렬 방법을 사용했습니다. -
Collections.sort(studentDataList, new Comparator() {
@Override
public int compare(studentData o1, studentData o2) {
return o1.name.compareTo(o2.name);
}
}); 위의 코드에서는 이름을 사용하여 요소를 비교하고 있습니다.
5단계 − 다음은 수정된 src/ StudentAdapter.java 파일의 내용입니다.
package com.example.andy.tutorialspoint;
import android.content.Context;
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.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.List;
import java.util.Random;
class StudentAdapter extends RecyclerView.Adapter {
List studentDataList;
Context context;
private int lastPosition = -1;
public StudentAdapter(List studentDataList, Context context) {
this.studentDataList=studentDataList;
this.context=context;
}
@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));
setAnimation(viewHolder.parent, i);
}
private void setAnimation(View viewToAnimate, int position) {
// If the bound view wasn't previously displayed on screen, it's animated
if (position > lastPosition) {
Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.slide_in_left);
viewToAnimate.startAnimation(animation);
lastPosition = position;
}
}
@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);
}
}
} 어댑터 클래스에는 아래와 같이 4가지 메소드가 있습니다. -
-
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);
어댑터에서 setAnimation()을 사용했으며 해당 메서드에서 전달한 자식 항목의 부모와 아래 표시된 위치 -
setAnimation(viewHolder.parent, i);
위의 메서드에서 viewHolder.parent는 자식 항목 레이아웃의 선형 레이아웃이고 "i"는 보기의 위치입니다.
private void setAnimation(View viewToAnimate, int position)
{
// If the bound view wasn't previously displayed on screen, it's animated
if (position > lastPosition)
{
Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.slide_in_left);
viewToAnimate.startAnimation(animation);
lastPosition = position;
}
} 위의 방법에서는 AnimationUtils 클래스에서 애니메이션을 적용하는 것보다 보다 큼(>)을 사용하여 현재 위치와 마지막 위치를 비교하고 있습니다.
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의 내용입니다.
package 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로 스크롤하면 아래와 같이 결과가 표시됩니다. -
이제 마지막 요소를 보십시오. 애니메이션과 함께 로드됩니다. 아래와 같이 더 많은 참조 샘플을 사용할 수 있습니다. -