Android में ListView में इमेज और टेक्स्ट की सूची कैसे प्रदर्शित करें?

ListView उदाहरण में जाने से पहले, हमें ListView के बारे में पता होना चाहिए। ListView ArrayList, लिस्ट या किसी डेटाबेस से खींचे गए आइटम्स का संग्रह है। ListView का सबसे आम उपयोग वर्टिकल फॉर्मेट में आइटम्स का संग्रह है, हम ऊपर/नीचे स्क्रॉल कर सकते हैं और किसी भी आइटम पर क्लिक कर सकते हैं।

कस्टम ListView क्या है?

कस्टम ListView कस्टम एडाप्टर पर आधारित काम करता है। इस कस्टम एडाप्टर में हम कस्टम ऑब्जेक्ट पास कर सकते हैं। हम नीचे दिखाए अनुसार विषय डेटा को ListView में पास कर रहे हैं।

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

File → New Project पर जाएं और नया प्रोजेक्ट बनाने के लिए सभी आवश्यक विवरण भरें।

चरण 2: activity_main.xml में कोड जोड़ें

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ListView
            android:id="@+id/list"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:divider="#000"
            android:dividerHeight="1dp"
            android:footerDividersEnabled="false"
            android:headerDividersEnabled="false"/>
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

उपरोक्त activity_main.xml में हमने एक ListView घोषित किया है और नीचे दिखाए अनुसार डिवाइडर जोड़ा है:

<ListView
    android:id="@+id/list"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:divider="#000"
    android:dividerHeight="1dp"
    android:footerDividersEnabled="false"
    android:headerDividersEnabled="false" />

चरण 3: MainActivity.java में कोड जोड़ें

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ListView list = findViewById(R.id.list);
        ArrayList<SubjectData> arrayList = new ArrayList<SubjectData>();
        arrayList.add(new SubjectData("JAVA", "https://www.tutorialspoint.com/java/", "https://www.tutorialspoint.com/java/images/java-mini-logo.jpg"));
        arrayList.add(new SubjectData("Python", "https://www.tutorialspoint.com/python/", "https://www.tutorialspoint.com/python/images/python-mini.jpg"));
        arrayList.add(new SubjectData("Javascript", "https://www.tutorialspoint.com/javascript/", "https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg"));
        arrayList.add(new SubjectData("Cprogramming", "https://www.tutorialspoint.com/cprogramming/", "https://www.tutorialspoint.com/cprogramming/images/c-mini-logo.jpg"));
        arrayList.add(new SubjectData("Cplusplus", "https://www.tutorialspoint.com/cplusplus/", "https://www.tutorialspoint.com/cplusplus/images/cpp-mini-logo.jpg"));
        arrayList.add(new SubjectData("Android", "https://www.tutorialspoint.com/android/", "https://www.tutorialspoint.com/android/images/android-mini-logo.jpg"));
        CustomAdapter customAdapter = new CustomAdapter(this, arrayList);
        list.setAdapter(customAdapter);
    }
}

MainActivity में हमने CustomAdapter घोषित किया और SubjectData पास किया:

CustomAdapter customAdapter = new CustomAdapter(this, arrayList);
list.setAdapter(customAdapter);

चरण 4: CustomAdapter क्लास बनाएं

CustomAdapter.java में निम्न कोड जोड़ें:

import android.content.Context;
import android.database.DataSetObserver;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ListAdapter;
import android.widget.TextView;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;

class CustomAdapter implements ListAdapter {
    ArrayList<SubjectData> arrayList;
    Context context;
    
    public CustomAdapter(Context context, ArrayList<SubjectData> arrayList) {
        this.arrayList = arrayList;
        this.context = context;
    }
    
    @Override
    public boolean areAllItemsEnabled() { return false; }
    
    @Override
    public boolean isEnabled(int position) { return true; }
    
    @Override
    public void registerDataSetObserver(DataSetObserver observer) { }
    
    @Override
    public void unregisterDataSetObserver(DataSetObserver observer) { }
    
    @Override
    public int getCount() { return arrayList.size(); }
    
    @Override
    public Object getItem(int position) { return position; }
    
    @Override
    public long getItemId(int position) { return position; }
    
    @Override
    public boolean hasStableIds() { return false; }
    
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        SubjectData subjectData = arrayList.get(position);
        if (convertView == null) {
            LayoutInflater layoutInflater = LayoutInflater.from(context);
            convertView = layoutInflater.inflate(R.layout.list_row, null);
            convertView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) { }
            });
            TextView title = convertView.findViewById(R.id.title);
            ImageView image = convertView.findViewById(R.id.list_image);
            title.setText(subjectData.SubjectName);
            Picasso.with(context)
                .load(subjectData.Image)
                .into(image);
        }
        return convertView;
    }
    
    @Override
    public int getItemViewType(int position) { return position; }
    
    @Override
    public int getViewTypeCount() { return arrayList.size(); }
    
    @Override
    public boolean isEmpty() { return false; }
}

चरण 5: SubjectData क्लास बनाएं

SubjectData.java में निम्न कोड जोड़ें:

class SubjectData {
    String SubjectName;
    String Link;
    String Image;
    
    public SubjectData(String subjectName, String link, String image) {
        this.SubjectName = subjectName;
        this.Link = link;
        this.Image = image;
    }
}

चरण 6: इंटरनेट से इमेज लोड करने के लिए Picasso लाइब्रेरी

Picasso.with(context)
    .load(subjectData.Image)
    .into(image);

चरण 7: Gradle में Picasso लाइब्रेरी जोड़ें

dependencies {
    implementation 'com.squareup.picasso:picasso:2.5.1'
}

चरण 8: मैनिफेस्ट में इंटरनेट परमिशन

<uses-permission android:name="android.permission.INTERNET"/>

आउटपुट

जब आप विषय पर क्लिक करते हैं, तो यह नीचे दिखाए अनुसार लिंक खोलेगा।