Android-एंड्रॉइड पे RecyclerView और CardView से शुरुआत करना

अगर आप एक Android-एंड्रॉइड App-एप्प-अनुप्रयोग बनाना चाहते है, जो data-डेटा-माहिती को दिखाने के लिए list-लिस्ट-सूचियों को प्रयोग में लेता है, तो Android Lollipop-एंड्रॉइड लॉलीपॉप आपकी जिंदगी और आसान करने के लिए दो नए widget-विजेट-संयंत्र शामिल करता है, RecyclerView और CardView। इन widget-विजेट का प्रयोग करके, Google-गूगल के material design specification-मटीरियल डिजाईन स्पेसिफिकेशन के दिशानिर्देश की पुष्टि करता हुआ एप्प का लुक एंड फील-स्वरूप और संवेदन देना बहुत आसान है।

पूर्वापेक्षा

साथ में अनुसरण करने के लिए, आप Android Studio-एंड्रॉइड स्टूडियो के अद्यतन संस्करण का प्रयोग करते होने चाहिए। आप उसको Android Developer-एंड्रॉइड डेवलपर वेबसाइट से हासिल कर सकते है।

१. पुराने संस्करणों को समर्थन

यह लिखते समय, २% से भी कम Android devices-एंड्रॉइड डिवाइसिस-एंड्रॉइड उपकरण Android Lollipop-एंड्रॉइड लॉलीपॉप चलाते हैं। हालांकि, v7 Support Library-वि सेवन सपोर्ट लाइब्रेरी-सातवें संस्करण के समर्थन संग्रह की बदौलत, आप RecyclerView और CardView विजेट एंड्रॉइड के पुराने संस्करणों को चलाने वाले उपकरणों पे, आपके प्रोजेक्ट की build.grade फाइल में dependencies-डेपेंडेन्सिस विभाग में निम्नलिखित लाइनों-पंक्तिओं को शामिल करके, उपयोग कर सकते है।

compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'

२. CardView को तैयार करना

CardView एक ViewGroup है। अन्य ViewGroup की तरह, एक XML layout-एक्सएमएल लेआउट-एक्सएमएल अभिन्यास का प्रयोग करके, उसको आपकी Activity या Fragment में शामिल कर सकते है।

एक खाली CardView बनाने के लिए, आपको नीचे दिखाए गए अंश की तरह निम्नलिखित कोड को आपके XML-एक्सएमएल लेआउट में शामिल करना पड़ेगा:

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

</android.support.v7.widget.CardView>

एक ज्यादा वास्तविक उदहारण के तौर पर, चलिए अब हम LinearLayout बनाते हैं और CardView को उसमे रखते हैं। ये CardView, उदाहरण के तौर पर, एक व्यक्ति को दर्शाता है और निम्नलिखित को शामिल करता है:

• व्यक्ति का नाम दिखाने के लिए, एक TextView
• व्यक्ति की उम्र दिखाने के लिए, एक TextView
• व्यक्ति की तस्वीर दिखाने के लिए, एक ImageView
  

वह XML-एक्सएमएल ऐसा दिखेगा:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:padding="16dp"
    >

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cv"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_photo"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="16dp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_name"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_alignParentTop="true"
                android:textSize="30sp"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_age"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_below="@+id/person_name"
                />

        </RelativeLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

अगर यह XML-एक्सएमएल Activity के लेआउट के तौर पर, TextView और ImageView fields-फ़ील्ड्स-माहिती दर्ज करने के स्थान में अर्थपूर्ण संख्याएं स्थापित करने के साथ, प्रयोग में लिया जा रहा है, तो कोई एंड्रॉइड डिवाइस पे इस तरह प्रत्यक्ष होगा:

३. RecyclerView तैयार करना

चरण १: एक लेआउट में उसको डिफाइन-परिभाषित करना

RecyclerView instance-इंस्टैंस का प्रयोग करना थोड़ा ज्यादा जटिल है। हालांकि, उसको XML-एक्सएमएल फाइल में परिभाषित करना बहुत ही सरल है। आप उसको लेआउट में नीचे दिखाया है उस तरह परिभाषित कर सकते है:

<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rv"
    />

आपकी Activity में उसका handle-हैंडल पाने के लिए, नीचे दिए गए अंश का प्रयोग करें:

RecyclerView rv = (RecyclerView)findViewById(R.id.rv);

अगर आप को यकीन है कि RecyclerView की साइज-माप नहीं बदलेगा, तो आप कार्यक्षमता बेहतर करने के लिए निम्नलिखित को जोड़ सकते है:

rv.setHasFixedSize(true);

चरण २: LayoutManager का प्रयोग करना

ListView से भिन्न, RecyclerView को उसकी वस्तुओं की स्थिति निर्धारण के प्रबंधन के लिए LayoutManager की जरुरत पड़ती है। RecyclerView.LayoutManager class-क्लास का विस्तार करके आप अपना खुद का LayoutManager डिफाइन-परिभाषित कर सकते है। हालांकि, अधिकांश किस्सो में, आप पूर्व-परिभाषित-प्रिडिफाईन्ड LayoutManager subclass-सबक्लास में से किसी एक का प्रयोग आसानी से कर सकते है।

• LinearLayoutManager
• GridLayoutManager
• StaggeredGridLayoutManager
  

इस ट्यूटोरियल-स्वशिक्षण में, मैं LinearLayoutManager का प्रयोग करूंगा। यह LayoutManager सबक्लास, पूर्वनिर्धारित तरीके से, आपके RecyclerView को ListView की तरह दिखाएगा।

LinearLayoutManager llm = new LinearLayoutManager(context);
rv.setLayoutManager(llm);

चरण ३: Data-डेटा-माहिती को डिफाइन-परिभाषित करना

ListView की तरह ही, उसकी माहिती तक पहुँचने के लिए RecyclerView को एक adapter-अडैप्टर की जरुरत पड़ेगी। लेकिन हम एक अडैप्टर तैयार करे उससे पहले, चलिए हम माहिती तैयार करते हैं जिसके साथ हम काम कर सके। एक व्यक्ति को दर्शाने के लिए एक सरल क्लास तैयार करें और उसके बाद Person objects-ऑब्जेक्ट्स के List को सक्रीय करने के लिए एक method-मेथड लिखें:

class Person {
    String name;
    String age;
    int photoId;

    Person(String name, String age, int photoId) {
        this.name = name;
        this.age = age;
        this.photoId = photoId;
    }
}

private List<Person> persons;

// This method creates an ArrayList that has three Person objects
// Checkout the project associated with this tutorial on Github if
// you want to use the same images.
private void initializeData(){
    persons = new ArrayList<>();
    persons.add(new Person("Emma Wilson", "23 years old", R.drawable.emma));
    persons.add(new Person("Lavery Maiss", "25 years old", R.drawable.lavery));
    persons.add(new Person("Lillie Watts", "35 years old", R.drawable.lillie));
}

चरण ४: Adapter-अडैप्टर को तैयार करना

RecyclerView प्रयोग में ले सके वैसा अडैप्टर तैयार करने के लिए, आप को RecyclerView.Adapter को विस्तृत करना ही चाहिए। यह अडैप्टर view holder-व्यू होल्डर डिजाईन पैटर्न का अनुसरण करता है, जिसका मतलब है वह RecyclerView.ViewHolder को विस्तृत कर सके वैसा, आपको एक जरुरत के मुताबिक-कस्टम क्लास डिफाइन-परिभाषित करने देता है। यह पैटर्न ज्यादा संसाधन का प्रयोग करनेवाली-महँगी findViewById मेथड को कम से कम calls-कॉल्स-बुलावा देती है।

इस ट्यूटोरियल में इससे पहले, हमने CardView के लिए एक व्यक्ति को दर्शाता हुआ XML-एक्सएमएल लेआउट पहले से ही डिफाइन-परिभाषित किया है। अब हम उस लेआउट का फिर से प्रयोग करेंगे। हमारे इच्छानुसार बनाए हुए-कस्टम ViewHolder के constructor-कंस्ट्रक्टर में, RecyclerView से सम्बंधित views-व्यूज-दृश्यों को initialize-इनिशियलाइज़-सक्रीय करें।

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder>{

    public static class PersonViewHolder extends RecyclerView.ViewHolder {  	
		CardView cv;
        TextView personName;
        TextView personAge;
        ImageView personPhoto;

        PersonViewHolder(View itemView) {
            super(itemView);
            cv = (CardView)itemView.findViewById(R.id.cv);
            personName = (TextView)itemView.findViewById(R.id.person_name);
            personAge = (TextView)itemView.findViewById(R.id.person_age);
            personPhoto = (ImageView)itemView.findViewById(R.id.person_photo);
        }
	}

}

आगे, कस्टम अडैप्टर में एक constructor-कंस्ट्रक्टर को जोड़ें ताकि उसके पास जो RecyclerView दिखाता है वह data-डेटा-माहिती तक handle-हैंडल हो। चूँकि हमारा डेटा-माहिती Person ऑब्जेक्ट्स के List के स्वरूप में है, निम्नलिखित कोड का प्रयोग करें।

List<Person> persons;

RVAdapter(List<Person> persons){
    this.persons = persons;
}

RecyclerView.Adapter में तीन abstract-एब्स्ट्रैक्ट-बिनुपयोगी मेथड्स है जिनकी हमें override-ओवरराइड-अवहेलना करनी हैं। चलिए getItemCount मेथड से शुरुआत करते हैं। यह माहिती में हाजिर वस्तुओं की गिनती प्रदान-रिटर्न करनी चाहिए। चूँकि हमारी डेटा-माहिती List के स्वरूप में है, हमें List ऑब्जेक्ट पे सिर्फ size मेथड को call-कॉल करने की आवश्यकता है:

@Override
public int getItemCount() {
    return persons.size();
}

आगे, onCreateViewHolder मेथड की अवहेलना करें। जैसे कि इसका नाम प्रस्तावित करता है, यह मेथड को जब कस्टम ViewHolder को सक्रीय-इनिशिअलाइज़ करना होता है तब कॉल करते हैं। हम लेआउट को उल्लेखित करते हैं जो RecyclerView की हर चीज़ के द्वारा उपयोग मे लेना चाहिए। LayoutInflater का प्रयोग करके लेआउट को inflate-इन्फ्लेट-बढ़ावा करके यह किया जाता है, जो कस्टम ViewHolder के कंस्ट्रक्टर को आउटपुट-परिणाम प्रसारित करता है।

@Override
public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false);
    PersonViewHolder pvh = new PersonViewHolder(v);
    return pvh;
}

RecyclerView की हर एक चीज के विषयवस्तु को उल्लिखित करने के लिए onBindViewHolder की अवहेलना करें। यह मेथड ListView के अडैप्टर की getView मेथड से काफी मिली-जुली है। हमारे उदाहरण में, यह वो जगह है जहाँ पे CardView के नाम, आयु, और तस्वीर फील्ड के मूल्य को सुस्थापित करना पड़ेगा।

@Override
public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
    personViewHolder.personName.setText(persons.get(i).name);
    personViewHolder.personAge.setText(persons.get(i).age);
    personViewHolder.personPhoto.setImageResource(persons.get(i).photoId);
}

अंत में, आपको onAttachedToRecyclerView मेथड को ओवरराइड करना पड़ेगा-अवहेलना करनी पड़ेगी। अभी के लिए, हम इस मेथड के सुपरक्लास के परिपालन को निचे दिखाया गया है उस तरह आसानी से प्रयोग में ले सकते है।

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);
}

चरण ५: Adapter-अडैप्टर का प्रयोग करना

अब जब अडैप्टर तैयार है, तो अडैप्टर को सक्रीय-इनिशियलाइज़ करने और अडैप्टर के कंस्ट्रक्टर और RecyclerView की setAdapter मेथड को call-कॉल करके उसको प्रयोग में लेने के लिए निचे दिए गए कोड को आपकी Activity में शामिल करें:

RVAdapter adapter = new RVAdapter(persons);
rv.setAdapter(adapter);

चरण ६: Compile-कंपाइल और Run-रन करें

जब आप एंड्रॉइड डिवाइस-उपकरण पे RecyclerView दृष्टांत चलाते है, तो आपको निचे दिखाए गए परिणाम जैसा कुछ दिखाई पड़ना चाहिए।

समापन

इस ट्यूटोरियल-स्वशिक्षण में, आपने सीखा कि Andoird Lollipop-एंड्रॉइड लॉलीपॉप में प्रस्तुत किए गए CardView और RecyclerView widgets-विजेट को कैसे इस्तेमाल किया जाता है। आपने इन विजेट को Material Design-मटीरियल डिज़ाइन एप्प में कैसे प्रयोग में लिए जाते हैं उसके उदाहरण भी देखें। ध्यान रखें कि जो ListView कर सकता है वह लगभग सबकुछ RecyclerView भी कर सकता है, उसके बावजूद कुछ छोटे माहिती समूहों के लिए, ListView का प्रयोग करना अभी भी बेहतर है क्योंकि उसमें code-कॉड की कम पक्तियां लगती है।

CardView और  RecyclerView क्लास के बारे में ज्यादा जानकारी के लिए आप Android Developers Reference-एंड्रॉइड डेवलपर रेफरन्स-संदर्भ को देख सकते है।