ConstraintLayout के साथ RecyclerView का उपयोग कैसे करें?

RecyclerView आइटम लेआउट के रूप में ConstraintLayout

ConstraintLayout एक फ्लैट व्यू पदानुक्रम (नेस्टिंग के बिना) की अनुमति देता है, जो RecyclerView आइटम के लिए प्रदर्शन में सुधार करता है। यह गाइड एक कार्ड-शैली ग्रिड आइटम के लिए एक प्रतिक्रियाशील, बाधा-आधारित आइटम लेआउट दिखाता है।

निर्भरताएं

dependencies {
    implementation "androidx.recyclerview:recyclerview:1.3.2"
    implementation "androidx.constraintlayout:constraintlayout:2.1.4"
    implementation "com.google.android.material:material:1.11.0"
}

आइटम लेआउट (res/layout/item_grid_constraint.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <!-- शीर्ष पर इमेज, चौड़ाई के 100%, 4:3 पहलू अनुपात -->
    <ImageView
        android:id="@+id/ivImage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@drawable/placeholder"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- इमेज के नीचे शीर्षक -->
    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="आइटम शीर्षक"
        android:textSize="16sp"
        android:textStyle="bold"
        android:maxLines="2"
        android:ellipsize="end"
        app:layout_constraintTop_toBottomOf="@id/ivImage"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- शीर्षक के नीचे उपशीर्षक -->
    <TextView
        android:id="@+id/tvSubtitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="8dp"
        android:text="उपशीर्षक"
        android:textSize="13sp"
        android:textColor="#757575"
        app:layout_constraintTop_toBottomOf="@id/tvTitle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

मुख्य ConstraintLayout विशेषताएं जो उपयोग की गई हैं

एडॉप्टर (ListAdapter + DiffUtil)

public class ConstraintGridAdapter extends ListAdapter {

    public ConstraintGridAdapter() { super(DIFF); }

    private static final DiffUtil.ItemCallback DIFF = new DiffUtil.ItemCallback() {
        @Override public boolean areItemsTheSame(@NonNull Item o, @NonNull Item n) { return o.id == n.id; }
        @Override public boolean areContentsTheSame(@NonNull Item o, @NonNull Item n) { return o.title.equals(n.title); }
    };

    @NonNull @Override
    public VH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_grid_constraint, parent, false);
        return new VH(v);
    }

    @Override
    public void onBindViewHolder(@NonNull VH h, int pos) { h.bind(getItem(pos)); }

    static class VH extends RecyclerView.ViewHolder {
        ImageView iv; TextView tvTitle, tvSub;
        VH(View v) { super(v); iv = v.findViewById(R.id.ivImage); tvTitle = v.findViewById(R.id.tvTitle); tvSub = v.findViewById(R.id.tvSubtitle); }
        void bind(Item i) { tvTitle.setText(i.title); tvSub.setText(i.subtitle); iv.setImageResource(i.imageRes); }
    }
}

गतिविधि सेटअप (GridLayoutManager के साथ)

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView rv = findViewById(R.id.recyclerView);
        rv.setLayoutManager(new GridLayoutManager(this, 2));
        rv.setAdapter(new ConstraintGridAdapter());

        // नमूना डेटा जमा करें
        List items = new ArrayList<>();
        for (int i = 1; i <= 20; i++) {
            items.add(new Item(i, "आइटम " + i, "उपशीर्षक " + i, R.drawable.placeholder));
        }
        ((ConstraintGridAdapter) rv.getAdapter()).submitList(items);
    }
}

क्यों ConstraintLayout RecyclerView आइटम्स के लिए?

• फ्लैट पदानुक्रम → तेज माप/लेआउट/ड्रॉ पास।
• प्रतिक्रियाशील आकार → पहलू अनुपात, प्रतिशत चौड़ाई, चेन बिना नेस्टेड LinearLayout के।
• आसान एनिमेशन → MotionLayout में माइग्रेट करें साझा तत्व संक्रमण के लिए।
• डिज़ाइन टूल सपोर्ट → लेआउट इंस्पेक्टर/एडिटर में विजुअल बाधाएं।

प्रदर्शन युक्तियाँ

• गहरे नेस्टिंग से बचें — एक ConstraintLayout प्रति आइटम आदर्श है।
• कॉन्स्ट्रेंट सेट के लिए ConstraintSet का उपयोग करें प्रोग्रामेटिक परिवर्तन (उदाहरण: फोल्डेबल पर कॉलम काउंट बदलना)।
• rv.setItemViewCacheSize(20) के साथ व्यू कैशिंग सक्षम करें चिकनी स्क्रॉलिंग के लिए।

मूल उदाहरण की समीक्षा

मूल कोड एक्टिविटी लेआउट के लिए ConstraintLayout का उपयोग करता था (RecyclerView आइटम के लिए नहीं), लिगेसी सपोर्ट लाइब्रेरी, और एक मैन्युअल एडॉप्टर। ऊपर दिया गया संस्करण आइटम-स्तरीय ConstraintLayout, ListAdapter/DiffUtil, और GridLayoutManager एकीकरण दिखाता है।