অ্যান্ড্রয়েডে RecyclerView আইটেম স্ক্রল করার সময় এনিমেট করুন

RecyclerView এবং CardView পরিচিতি

RecyclerView আইটেম এনিমেশনের উদাহরণে যাওয়ার আগে, আমাদের জানতে হবে অ্যান্ড্রয়েডে RecyclerView কী। RecyclerView হলো ListView-এর একটি উন্নত সংস্করণ যা ViewHolder ডিজাইন প্যাটার্নের উপর কাজ করে। RecyclerView ব্যবহার করে আমরা গ্রিড এবং আইটেমের তালিকা দেখাতে পারি।

CardView FrameLayout দ্বারা বর্ধিত এবং এটি কার্ড রূপে আইটেম দেখাতে ব্যবহৃত হয়। এটি পূর্বনির্ধারিত ট্যাগ হিসেবে রেডিয়াস এবং শ্যাডো সমর্থন করে।

এই উদাহরণটি একটি সুন্দর ছাত্র রেকর্ড অ্যাপ তৈরি করে RecyclerView-এ CardView-এর সাথে এনিমেশন সংহত করার পদ্ধতি প্রদর্শন করে যা ছাত্রের নাম এবং বয়স প্রদর্শন করে।

ধাপ ১: নতুন প্রজেক্ট তৈরি করুন

Android Studio-তে File → New Project-এ যান এবং একটি নতুন প্রজেক্ট তৈরি করতে সমস্ত প্রয়োজনীয় বিবরণ পূরণ করুন।

ধাপ ২: build.gradle-এ নির্ভরতা যোগ করুন

RecyclerView এবং CardView লাইব্রেরির নির্ভরতা যোগ করুন।

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'
}

ধাপ ৩: 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>

উপরোক্ত কোডে আমরা RecyclerView-কে RelativeLayout হিসেবে প্যারেন্ট লেআউটে উইন্ডো ম্যানেজারে যোগ করেছি।

ধাপ ৪: 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<studentData>() {
            @Override
            public int compare(studentData o1, studentData o2) {
                return o1.name.compareTo(o2.name);
            }
        });
    }
}

উপরোক্ত কোডে আমরা RecyclerView এবং studentAdapter যোগ করেছি। সেই student adapter-এ আমরা studentDataList কে ArrayList হিসেবে পাস করেছি। Student data list-এ ছাত্রের নাম এবং বয়স থাকে।

RecyclerView আইটেম তুলনা করার জন্য আমরা Collections framework এবং sort মেথড ব্যবহার করেছি:

Collections.sort(studentDataList, new Comparator<studentData>() {
    @Override
    public int compare(studentData o1, studentData o2) {
        return o1.name.compareTo(o2.name);
    }
});

উপরোক্ত কোডে আমরা নাম দিয়ে এলিমেন্টগুলো তুলনা করছি।

ধাপ ৫: 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);
        }
    }
}

অ্যাডাপ্টার ক্লাসে চারটি মেথড রয়েছে:

• onCreateViewHolder():- এটি একটি ভিউ হোল্ডার তৈরি করতে ব্যবহৃত হয় এবং একটি ভিউ রিটার্ন করে।
• onBindViewHolder() - এটি তৈরি করা ভিউ হোল্ডারের সাথে বাঁধা হয়।
• getItemCount() - এতে লিস্টের আকার থাকে।
• MyViewHolder ক্লাস- এটি RecyclerView.ViewHolder দ্বারা বর্ধিত একটি ভিউ হোল্ডার ইনার ক্লাস।

RecyclerView আইটেমের জন্য র‍্যান্ডম ব্যাকগ্রাউন্ড সেট করতে, আমরা Random ক্লাস ব্যবহার করে র‍্যান্ডম রঙ তৈরি করেছি এবং ভিউ আইটেমের প্যারেন্টে রঙ যোগ করেছি:

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 হলো চাইল্ড আইটেম লেআউটে LinearLayout এবং "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;
    }
}

উপরোক্ত মেথডে আমরা বর্তমান পজিশনকে lastPosition-এর সাথে greater than (>) ব্যবহার করে তুলনা করছি, তারপর AnimationUtils ক্লাস থেকে এনিমেশন প্রয়োগ করছি।

ধাপ ৬: xml res/layout/student_list_row.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-এর ভিতরে নাম এবং বয়সের জন্য দুটি TextView তৈরি করেছি। CardView-এ পূর্বনির্ধারিত কর্নার রেডিয়াস এবং শ্যাডো প্রোপার্টি রয়েছে। তাই আমরা CardView-এর সাথে কর্নার রেডিয়াস ব্যবহার করেছি।

ধাপ ৭: 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 Studio থেকে অ্যাপ চালাতে, আপনার প্রজেক্টের একটি এক্টিভিটি ফাইল খুলুন এবং টুলবার থেকে Run আইকনে ক্লিক করুন। আপনার মোবাইল ডিভাইস নির্বাচন করুন এবং তারপর আপনার মোবাইল ডিভাইস চেক করুন যা আপনার ডিফল্ট স্ক্রিন প্রদর্শন করবে।

এখন RecyclerView-এ নিচে স্ক্রল করুন, এটি নিচের ফলাফল দেখাবে:

এখন শেষ এলিমেন্টটি দেখুন, এটি এনিমেশনের সাথে লোড হচ্ছে। আরও রেফারেন্স স্যাম্পল উপলব্ধ।