GridLayoutManager के साथ RecyclerView का उपयोग करके सरल एंड्रॉइड ग्रिड उदाहरण (पुराने ग्रिड व्यू की तरह)

227

मुझे पता है कि RecyclerViewपुराने की कार्यक्षमता को बदल दिया है ListViewऔर GridView। मैं एक बहुत ही बुनियादी उदाहरण की तलाश में हूं जो एक न्यूनतम ग्रिड सेटअप का उपयोग करके दिखाता है RecyclerView। मैं लंबे ट्यूटोरियल शैली स्पष्टीकरण की तलाश नहीं कर रहा हूं, बस एक न्यूनतम उदाहरण। मुझे लगता है कि पुराने ग्रिड की नकल करने वाले सबसे सरल ग्रिड की निम्नलिखित विशेषताएं हैं:

  • प्रति पंक्ति कई कोशिकाएं
  • प्रत्येक कक्ष में एकल दृश्य
  • घटनाओं पर क्लिक करने के लिए प्रतिक्रिया करता है
android  gridview  android-recyclerview  gridlayoutmanager 
— Suragch
स्रोत
— c49

जवाबों:

556

संक्षिप्त जवाब

जो लोग पहले से परिचित हैं के लिए की स्थापना एक RecyclerViewसूची बनाने के लिए , अच्छी खबर यह है कि एक ग्रिड बनाने में काफी हद तक एक ही है। जब आप सेट अप करते हैं तो आप GridLayoutManagerइसके बजाय बस का उपयोग LinearLayoutManagerकरते RecyclerViewहैं।

recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));

यदि आपको इससे अधिक सहायता की आवश्यकता है, तो निम्न उदाहरण देखें।

पूर्ण उदाहरण

निम्नलिखित एक न्यूनतम उदाहरण है जो नीचे दी गई छवि की तरह दिखाई देगा।

यहां छवि विवरण दर्ज करें

एक खाली गतिविधि के साथ शुरू करो। RecyclerViewग्रिड को जोड़ने के लिए आप निम्न कार्य करेंगे । आपको केवल प्रत्येक अनुभाग में कोड को कॉपी और पेस्ट करना होगा। बाद में आप इसे अपनी आवश्यकताओं के अनुसार अनुकूलित कर सकते हैं।

  • ग्रेडेल के लिए निर्भरता जोड़ें
  • गतिविधि के लिए और ग्रिड सेल के लिए xml लेआउट फ़ाइलें जोड़ें
  • RecyclerView एडॉप्टर बनाएं
  • अपनी गतिविधि में RecyclerView को आरम्भ करें

अद्यतन ग्रेड निर्भरता

सुनिश्चित करें कि निम्न निर्भरताएँ आपकी ऐप gradle.buildफ़ाइल में हैं:

compile 'com.android.support:appcompat-v7:27.1.1'
compile 'com.android.support:recyclerview-v7:27.1.1'

आप संस्करण संख्याओं को अपडेट कर सकते हैं जो कि सबसे अधिक चालू है ।

गतिविधि लेआउट बनाएँ

RecyclerViewअपने xml लेआउट में जोड़ें ।

activity_main.xml

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

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

</RelativeLayout>

ग्रिड सेल लेआउट बनाएँ

हमारे RecyclerViewग्रिड में प्रत्येक सेल में केवल एक ही है TextView। एक नया लेआउट संसाधन फ़ाइल बनाएँ।

recyclerview_item.xml

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

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@color/colorAccent"/>

</LinearLayout>

एडॉप्टर बनाएं

RecyclerViewआपके डेटा के साथ प्रत्येक सेल में विचारों को पॉप्युलेट करने के लिए एक एडेप्टर की आवश्यकता होती है। एक नई जावा फ़ाइल बनाएँ।

MyRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {

    private String[] mData;
    private LayoutInflater mInflater;
    private ItemClickListener mClickListener;

    // data is passed into the constructor
    MyRecyclerViewAdapter(Context context, String[] data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    // inflates the cell layout from xml when needed
    @Override
    @NonNull 
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
        return new ViewHolder(view);
    }

    // binds the data to the TextView in each cell
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.myTextView.setText(mData[position]);
    }

    // total number of cells
    @Override
    public int getItemCount() {
        return mData.length;
    }


    // stores and recycles views as they are scrolled off screen
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        TextView myTextView;

        ViewHolder(View itemView) {
            super(itemView);
            myTextView = itemView.findViewById(R.id.info_text);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
        }
    }

    // convenience method for getting data at click position
    String getItem(int id) {
        return mData[id];
    }

    // allows clicks events to be caught
    void setClickListener(ItemClickListener itemClickListener) {
        this.mClickListener = itemClickListener;
    }

    // parent activity will implement this method to respond to click events
    public interface ItemClickListener {
        void onItemClick(View view, int position);
    }
}

टिप्पणियाँ

  • यद्यपि कड़ाई से आवश्यक नहीं है, मैंने कोशिकाओं पर क्लिक की घटनाओं को सुनने के लिए कार्यक्षमता शामिल की है। यह पुराने में उपलब्ध था GridViewऔर एक आम जरूरत है। यदि आपको इसकी आवश्यकता नहीं है तो आप इस कोड को हटा सकते हैं।

गतिविधि में RecyclerView को आरम्भ करें

अपनी मुख्य गतिविधि में निम्न कोड जोड़ें।

MainActivity.java

public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {

    MyRecyclerViewAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // data to populate the RecyclerView with
        String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"};

        // set up the RecyclerView
        RecyclerView recyclerView = findViewById(R.id.rvNumbers);
        int numberOfColumns = 6;
        recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
        adapter = new MyRecyclerViewAdapter(this, data);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }

    @Override
    public void onItemClick(View view, int position) {
        Log.i("TAG", "You clicked number " + adapter.getItem(position) + ", which is at cell position " + position);
    }
}

टिप्पणियाँ

  • ध्यान दें कि गतिविधि वह है ItemClickListenerजिसे हम अपने एडेप्टर में परिभाषित करते हैं। यह हमें सेल क्लिक घटनाओं को संभालने की अनुमति देता है onItemClick।

ख़त्म होना

बस। अब आपको अपनी परियोजना चलाने में सक्षम होना चाहिए और शीर्ष पर छवि के समान कुछ प्राप्त करना चाहिए।

पर जा रहा

कोने पर गोलाकार आकृति

ऑटो-फिटिंग कॉलम

आगे के अध्ययन

— Suragch
स्रोत
2
@ MarianPa Mardzioch, हां, मैंने इसे केवल एक न्यूनतम उदाहरण के रूप में बनाया है। यह निश्चित रूप से कुछ सौंदर्यीकरण कार्य का उपयोग कर सकता है। मैं भविष्य में कुछ समय इस उत्तर को अपडेट करने का प्रयास करूंगा।
— सुरगाछ
1
मैंने केवल यह इंगित करने के लिए लॉग इन किया कि आप जैसे लोगों ने इस पोर्टल को जीवित रखा है और इस समाधान को देखने से पहले मैं दो दिनों से इस पर अटका हुआ था। बहुत बहुत धन्यवाद
— वरुणजोशी १२
1
@androiddeveloper, ग्रिड आइटम बाएं से दाएं, ऊपर से नीचे तक बिछाए जाते हैं। स्क्रीन पर फिट होने से अधिक आइटम होने पर स्क्रॉलिंग वर्टिकल होती है।
— सुरगाछ
13
भविष्य के पाठकों, मुझे कुछ समय बचाने के लिए, मुख्य बात यह हैrecyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
— daka
1
@ डाका, अच्छी बात है। मैंने शुरुआत में इसे शामिल करने के लिए अपने उत्तर को संपादित किया।
— Suragch
7

हालाँकि मैं सुरगच के उत्तर को पसंद और सराहना करता हूँ, फिर भी मैं एक नोट छोड़ना चाहूँगा क्योंकि मैंने पाया कि श्रोता विधि को परिभाषित करने और उजागर करने के लिए एडेप्टर ( MyRecyclerViewAdapter) onItemClickको कोड करना, इसे करने का सबसे अच्छा तरीका नहीं है, वर्ग के अतिक्रमण का उपयोग न करने के कारण। सही ढंग से। इसलिए मेरा सुझाव है कि एडॉप्टर को सुनने के संचालन को पूरी तरह से संभालने दें (यह उसका उद्देश्य है!) और एडॉप्टर ( MainActivity) का उपयोग करने वाली गतिविधि से उन्हें अलग करें । तो यह है कि मैं एडॉप्टर वर्ग कैसे सेट करूंगा:

MyRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {

    private String[] mData = new String[0];
    private LayoutInflater mInflater;

    // Data is passed into the constructor
    public MyRecyclerViewAdapter(Context context, String[] data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    // Inflates the cell layout from xml when needed
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    // Binds the data to the textview in each cell
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        String animal = mData[position];
        holder.myTextView.setText(animal);
    }

    // Total number of cells
    @Override
    public int getItemCount() {
        return mData.length;
    }

    // Stores and recycles views as they are scrolled off screen
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView myTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            myTextView = (TextView) itemView.findViewById(R.id.info_text);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            onItemClick(view, getAdapterPosition());
        }
    }

    // Convenience method for getting data at click position
    public String getItem(int id) {
        return mData[id];
    }

    // Method that executes your code for the action received
    public void onItemClick(View view, int position) {
        Log.i("TAG", "You clicked number " + getItem(position).toString() + ", which is at cell position " + position);
    }
}

कृपया ध्यान दें कि onItemClickअब परिभाषित की गई विधि MyRecyclerViewAdapterवह स्थान है जहां आप अपने कार्यों को प्राप्त होने वाली घटना / कार्रवाई के लिए कोड करना चाहेंगे।

इस परिवर्तन को पूरा करने के लिए केवल एक छोटा सा परिवर्तन किया जाना है: गतिविधि को MyRecyclerViewAdapter.ItemClickListenerअब लागू करने की आवश्यकता नहीं है, क्योंकि अब यह पूरी तरह से एडॉप्टर द्वारा किया जाता है । यह तब अंतिम संशोधन होगा:

MainActivity.java

public class MainActivity extends AppCompatActivity {

    MyRecyclerViewAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // data to populate the RecyclerView with
        String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"};

        // set up the RecyclerView
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rvNumbers);
        int numberOfColumns = 6;
        recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
        adapter = new MyRecyclerViewAdapter(this, data);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }
}
— jonypera
स्रोत
3
यदि गतिविधि को क्लिक ईवेंट सुनने की आवश्यकता हो तो क्या होगा? उदाहरण के लिए प्रस्तुतकर्ता को डेटा पास करना, आइटम पर आधारित कुछ तर्क करना, क्लिक करना, ट्रैकिंग, आदि
— अहमद फदली
मैं मानता हूं कि एडेप्टर को क्लिक इवेंट्स को हैंडल करना चाहिए, क्योंकि इसमें डेटा के साथ आइटम हैं। @ अम्माफदली अगर आपको एडॉप्टर होस्ट (कुछ अंश या गतिविधि) में कुछ काम करने की आवश्यकता है, तो आपको उन तरीकों के साथ कॉलबैक इंटरफ़ेस बनाना चाहिए। आपका होस्ट इस इंटरफ़ेस को लागू करता है। और फिर आप अपने मेजबान का एक उदाहरण एडॉप्टर के निर्माता में पास करते हैं। होस्ट के उदाहरण के बाद आप अपने एडेप्टर से ज़रूरत पड़ने पर इसे कॉल कर सकते हैं। और आपके होस्ट को हम कॉलबैक मिलते हैं। इसका उपयोग अक्सर तब किया जाता है जब आपको एक्शनमोड के साथ काम करने की आवश्यकता होती है। जब आप आइटम का चयन करने और ActionBar बटन का उपयोग करने के लिए लंबे समय तक क्लिक करें।
— किरिल कर्माज़िन
मैं असहमत हूं और सोचता हूं कि होस्टिंग में क्लिक इवेंट को संसाधित किया जाना चाहिए Activity। क्योंकि केवल यह की क्लिक श्रोता के बारे में पता कर सकते हैं Activityविचारों और अन्य Fragments, Activitiesआदि एडाप्टर केवल ऊपरी स्तर को घटनाओं क्लिक भेज सकते हैं। इसमें ItemClickListener कई घटनाओं के साथ इंटरफ़ेस होना चाहिए , क्योंकि कई घटनाओं के एडाप्टर के विचार उत्पन्न कर सकते हैं। यह समाधान पहले भी लिखा गया था: stackoverflow.com/a/40563598/2914140 ।
— कूलमाइंड
4

यो को अपने रिसाइकलव्यू लेआउटमैनग्रिड को ग्रिडलआउट मोड में सेट करना है, इसके लिए जब आप अपना RecyclerView LayoutManager सेट करना चाहते हैं तो बस अपना कोड बदल दें:

नोट: अपने स्तम्भों को गिनें जो आपको ### मदद से ### चाहिए

   recyclerView.setLayoutManager(new GridLayoutManager(getActivity(),###HELP###));
— एमआर कोडर
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.