কম্পিউটার
 Computer >> কম্পিউটার >  >> প্রোগ্রামিং >> Android

অ্যান্ড্রয়েডে স্ক্রোল করার সময় রিসাইক্লার ভিউ আইটেম অ্যানিমেট করে

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

কার্ড ভিউ ফ্রেম লেআউট দ্বারা প্রসারিত হয় এবং এটি কার্ড পদ্ধতিতে আইটেমগুলি দেখাতে ব্যবহৃত হয়। এটি পূর্বনির্ধারিত ট্যাগ হিসাবে ব্যাসার্ধ এবং ছায়া সমর্থন করে।

এই উদাহরণটি দেখায় যে কীভাবে অ্যানিমেশনকে রিসাইক্লার ভিউতে কার্ড ভিউয়ের সাথে একীভূত করতে হয় একটি সুন্দর স্টুডেন্ট রেকর্ড অ্যাপ তৈরি করে যা বয়সের সাথে ছাত্রের নাম প্রদর্শন করে৷

ধাপ 1 − অ্যান্ড্রয়েড স্টুডিওতে একটি নতুন প্রকল্প তৈরি করুন, ফাইল ⇒ নতুন প্রকল্পে যান এবং একটি নতুন প্রকল্প তৈরি করতে সমস্ত প্রয়োজনীয় বিবরণ পূরণ করুন৷

ধাপ 2 − build.gradle খুলুন এবং রিসাইক্লার ভিউ এবং কার্ড ভিউ লাইব্রেরি নির্ভরতা যোগ করুন।

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);
         }
      });
   }
}

উপরের কোডে আমরা রিসাইক্লার ভিউ এবং StudentAdapter যোগ করেছি। সেই স্টুডেন্ট অ্যাডাপ্টারে আমরা অ্যারেলিস্ট হিসাবে StudentDatalist পাস করেছি। স্টুডেন্ট ডেটা লিস্টে ছাত্রের নাম এবং বয়স থাকে।

রিসাইক্লার ভিউ আইটেমগুলির তুলনা করার জন্য আমরা সংগ্রহের কাঠামো এবং সাজানোর পদ্ধতি ব্যবহার করেছি যা নীচে দেখানো হয়েছে -

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);
      }
   }
}

অ্যাডাপ্টার ক্লাসে, নীচে দেখানো হিসাবে আমাদের চারটি পদ্ধতি রয়েছে -

  • onCreateViewHolder() :- এটি একটি ভিউ হোল্ডার তৈরি করতে ব্যবহৃত হয় এবং এটি একটি ভিউ প্রদান করে।

  • onBindViewHolder() - এটি তৈরি করা ভিউ হোল্ডারের সাথে আবদ্ধ হবে৷

  • getItemCount() - এতে তালিকার আকার রয়েছে৷

  • MyViewHolder ক্লাস - এটি ভিউ হোল্ডার অভ্যন্তরীণ শ্রেণী যা RecyclerView.ViewHolder

    দ্বারা প্রসারিত

রিসাইক্লার ভিউ আইটেমগুলির জন্য র্যান্ডম ব্যাকগ্রাউন্ড সেট করতে, আমরা র্যান্ডম ক্লাস ব্যবহার করে এলোমেলো রঙ তৈরি করেছি (যা অ্যান্ড্রয়েডে পূর্বনির্ধারিত শ্রেণী) এবং নীচের দেখানো আইটেমের প্যারেন্ট অব ভিউ আইটেমে রঙ যোগ করেছি -

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 ক্লাস থেকে অ্যানিমেশন প্রয়োগ করার চেয়ে greater than(>) ব্যবহার করে বর্তমান অবস্থানের সাথে শেষ অবস্থানের তুলনা করছি।

ধাপ 6 − নিচে 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>

উপরের তালিকা আইটেম ভিউতে আমরা কার্ড ভিউ এর ভিতরে নাম এবং বয়সের জন্য দুটি টেক্সট ভিউ তৈরি করেছি। কার্ড ভিউতে পূর্বনির্ধারিত কোণার ব্যাসার্ধ এবং ছায়া বৈশিষ্ট্য রয়েছে। তাই আমরা কার্ডভিউ সহ কোণার ব্যাসার্ধ ব্যবহার করেছি।

পদক্ষেপ 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;
   }
}

উপরের কোডে স্টুডেন্ট ডাটা অবজেক্ট সম্পর্কে জানানো হয়েছে। আপনার অ্যাপ্লিকেশন চালানোর চেষ্টা করা যাক. আমি ধরে নিচ্ছি আপনি আপনার কম্পিউটারের সাথে আপনার আসল অ্যান্ড্রয়েড মোবাইল ডিভাইসটি সংযুক্ত করেছেন৷ অ্যান্ড্রয়েড স্টুডিও থেকে অ্যাপটি চালাতে, আপনার প্রোজেক্টের অ্যাক্টিভিটি ফাইলগুলির একটি খুলুন এবং টুলবার থেকে রান আইকনে ক্লিক করুন। একটি বিকল্প হিসাবে আপনার মোবাইল ডিভাইস নির্বাচন করুন এবং তারপরে আপনার মোবাইল ডিভাইসটি পরীক্ষা করুন যা আপনার ডিফল্ট স্ক্রীন প্রদর্শন করবে -

অ্যান্ড্রয়েডে স্ক্রোল করার সময় রিসাইক্লার ভিউ আইটেম অ্যানিমেট করে

এখন রিসাইক্লারভিউতে নিচে স্ক্রোল করুন, এটি নীচে দেখানো ফলাফলটি দেখাবে -

অ্যান্ড্রয়েডে স্ক্রোল করার সময় রিসাইক্লার ভিউ আইটেম অ্যানিমেট করে

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


  1. অ্যান্ড্রয়েডে ওয়েবভিউতে প্রোগ্রাম্যাটিকভাবে কীভাবে স্ক্রলিং প্রতিরোধ করবেন?

  2. আপনি কিভাবে Android এ একটি দৃশ্যের পটভূমির রঙ পরিবর্তন অ্যানিমেট করবেন?

  3. রিসাইক্লারভিউ আইটেমগুলি স্ক্রিনে উপস্থিত হলে কীভাবে অ্যানিমেট করবেন?

  4. অ্যান্ড্রয়েডে বিভিন্ন স্ক্রীন সাইজ কিভাবে সাপোর্ট করবেন?