Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> Android

RecyclerView में LinearLayoutManager के साथ शीर्ष पर स्क्रॉल कैसे करें


RecyclerView क्या है?

RecyclerView लिस्ट व्यू का एक उन्नत संस्करण है जो व्यू होल्डर (ViewHolder) डिज़ाइन पैटर्न पर काम करता है। इसका उपयोग ग्रिड और सूची दोनों रूपों में आइटम प्रदर्शित करने के लिए किया जाता है।

उदाहरण: RecyclerView में शीर्ष पर स्क्रॉल करना

यह उदाहरण एक सुंदर छात्र रिकॉर्ड ऐप बनाकर दर्शाता है कि LinearLayoutManager के साथ RecyclerView को शीर्ष पर कैसे स्क्रॉल करें।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio में File → New Project चुनें।

चरण 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-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"?>
<android.support.design.widget.CoordinatorLayout
    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"
    android:fitsSystemWindows="true"
    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="horizontal" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/top"
        app:backgroundTint="#FFFF00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@android:drawable/arrow_up_float" />
</android.support.design.widget.CoordinatorLayout>

उपरोक्त कोड में हमने RecyclerView और FloatingActionButton जोड़ा है। FloatingActionButton CoordinatorLayout को सपोर्ट करता है। जब आप FAB पर क्लिक करेंगे, तो यह शीर्ष स्थान पर स्क्रॉल करेगा।

चरण 4: 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.design.widget.FloatingActionButton;
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.view.View;
import android.widget.Toast;
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);

        FloatingActionButton moveTop = findViewById(R.id.top);
        recyclerView = findViewById(R.id.recycler_view);
        studentAdapter = new StudentAdapter(studentDataList, MainActivity.this);

        RecyclerView.LayoutManager manager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(studentAdapter);

        prepareStudentData();

        moveTop.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                recyclerView.smoothScrollToPosition(0);
            }
        });
    }

    @RequiresApi(api = Build.VERSION_CODES.N)
    private void prepareStudentData() {
        studentDataList.add(new StudentData("sai", 25));
        studentDataList.add(new StudentData("sai raj", 25));
        studentDataList.add(new StudentData("raghu", 20));
        studentDataList.add(new StudentData("raj", 28));
        studentDataList.add(new StudentData("amar", 15));
        studentDataList.add(new StudentData("bapu", 19));
        studentDataList.add(new StudentData("chandra", 52));
        studentDataList.add(new StudentData("deraj", 30));
        studentDataList.add(new StudentData("eshanth", 28));

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

चरण 5: StudentAdapter.java

package 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<StudentAdapter.MyViewHolder> {
    List<StudentData> studentDataList;

    public StudentAdapter(List<StudentData> 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);
        }
    }
}

चरण 6: आइटम लेआउट (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;
    }
}

ऐप चलाएं और परीक्षण करें

ऐप चलाएं। छात्रों की सूची प्रदर्शित होगी। पीले FAB (ऊपर तीर) पर क्लिक करने पर RecyclerView सुचारू रूप से शीर्ष पर स्क्रॉल होगा।

RecyclerView में LinearLayoutManager के साथ शीर्ष पर स्क्रॉल कैसे करें

शीर्ष पर स्क्रॉल करने के बाद:

RecyclerView में LinearLayoutManager के साथ शीर्ष पर स्क्रॉल कैसे करें

मुख्य बिंदु

  • smoothScrollToPosition(0) RecyclerView को शीर्ष (0th पोजीशन) पर सुचारू रूप से स्क्रॉल करता है।
  • किसी भी पोजीशन पर स्क्रॉल करने के लिए पोजीशन नंबर बदलें।
  • RecyclerView व्यू होल्डर पैटर्न का उपयोग करता है जो प्रदर्शन में सुधार करता है।
  • CardView कोने त्रिज्या और छाया गुण प्रदान करता है।
  • रैंडम रंग जनरेटर का उपयोग करके प्रत्येक आइटम के लिए यादृच्छिक बैकग्राउंड रंग सेट किया गया है।
  1. Android में RecyclerView से एंडलेस/इनफिनिट स्क्रॉलिंग लिस्ट कैसे बनाएं? Android में RecyclerView से एंडलेस/इनफिनिट स्क्रॉलिंग लिस्ट कैसे बनाएं?

    परिचय यह ट्यूटोरियल दिखाता है कि RecyclerView में एंडलेस स्क्रॉलिंग (पेजिनेशन) कैसे इम्प्लीमेंट करें। जब उपयोगकर्ता सूची के अंत तक पहुंचता है, तो अगला पेज ऑटोमैटिकली लोड होता है। आवश्यक चरण चरण 1: नया प्रोजेक्ट बनाएं और डिपेंडेंसी जोड़ें Android Studio में File → New Project से नया प्रोजेक्ट बनाएं

  1. CSS से  स्क्रॉल बैक टू टॉप  बटन कैसे बनाएं? CSS से 'स्क्रॉल बैक टू टॉप' बटन कैसे बनाएं?

    CSS से स्क्रॉल बैक टू टॉप बटन बनाने का कोड निम्नलिखित है:उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {    font-family: Arial, Helvetica, sans-serif;    fo

  1. टचपैड से स्क्रॉल कैसे करें टचपैड से स्क्रॉल कैसे करें

    डेस्कटॉप कंप्यूटर और लैपटॉप हार्डवेयर कॉन्फ़िगरेशन के मामले में एक-दूसरे से बहुत अलग हैं। डेस्कटॉप कंप्यूटर और लैपटॉप के बीच कई अंतरों में यह तथ्य मौजूद है कि, डिफ़ॉल्ट रूप से, लैपटॉप उपयोगकर्ता अपनी स्क्रीन पर दिखाई देने वाले पॉइंटर को स्थानांतरित करने के लिए माउस के बजाय टचपैड का उपयोग करते हैं। ब