android एंड्रॉइड में ListView में छवियों की एक सूची कैसे प्रदर्शित करें?




android-image (7)

फ़ाइल नाम लेआउट आईडी से मेल खाना चाहिए जो इस उदाहरण में है: items_list_item.xml आपके एप्लिकेशन के लेआउट फ़ोल्डर में

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >  

<ImageView android:id="@+id/R.id.list_item_image"
  android:layout_width="100dip"
  android:layout_height="wrap_content" />  
</LinearLayout>

मैं ListView का उपयोग कर छवियों की एक सूची कैसे प्रदर्शित करूं? मैं रन टाइम पर छवियों को dowloading हूँ। छवियों की कुल संख्या तय नहीं है।


मैं इस तरह से कुछ शुरू करूंगा (और यदि मेरे कोड में कुछ गड़बड़ है, तो मैं निश्चित रूप से किसी भी टिप्पणी की सराहना करता हूं):

public class ItemsList extends ListActivity {

private ItemsAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.items_list);

    this.adapter = new ItemsAdapter(this, R.layout.items_list_item, ItemManager.getLoadedItems());
    setListAdapter(this.adapter);
}

private class ItemsAdapter extends ArrayAdapter<Item> {

    private Item[] items;

    public ItemsAdapter(Context context, int textViewResourceId, Item[] items) {
        super(context, textViewResourceId, items);
        this.items = items;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;
        if (v == null) {
            LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = vi.inflate(R.layout.items_list_item, null);
        }

        Item it = items[position];
        if (it != null) {
            ImageView iv = (ImageView) v.findViewById(R.id.list_item_image);
            if (iv != null) {
                iv.setImageDrawable(it.getImage());
            }
        }

        return v;
    }
}

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
    this.adapter.getItem(position).click(this.getApplicationContext());
}
}

जैसे ArrayAdapter को अपने प्रकार के आइटम (अपनी तस्वीरों के बारे में जानकारी रखने) और overriden getView() विधि के साथ getView() , जो सूची के भीतर वस्तुओं के लिए दृश्य तैयार करता है। सूची के अंत में आइटम जोड़ने के लिए ArrayAdapter पर विधि add() भी है।

R.layout.items_list ListView साथ सरल लेआउट है

R.layout.items_list_item सूची में एक आइटम का प्रतिनिधित्व लेआउट है


यहां विभिन्न छवियों के साथ सरल सूचीदृश्य है। सबसे पहले आपको विभिन्न प्रकार की छवियों की प्रतिलिपि बनाना होगा और इसे अपने प्रोजेक्ट में res / drawable-hdpi पर पेस्ट करना होगा। छवियां .png प्रारूप होना चाहिए। फिर इस कोड की प्रतिलिपि बनाएँ।

Main.xml में

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

<TextView
    android:id="@+id/textview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
/>

<ListView
    android:id="@+id/listview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
/>
</LinearLayout>

listview_layout.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:orientation="horizontal"
>
<ImageView
    android:id="@+id/flag"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/hello"
    android:paddingTop="10dp"
    android:paddingRight="10dp"
    android:paddingBottom="10dp"
/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
>
    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15dp"
        android:text="TextView1"
    />

    <TextView
        android:id="@+id/cur"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10dp"
        android:text="TextView2"
    />
</LinearLayout>
</LinearLayout>

आपकी गतिविधि में

package com.test;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

public class SimpleListImageActivity extends Activity {

    // Array of strings storing country names
    String[] countries = new String[] {
        "India",
        "Pakistan",
        "Sri Lanka",
        "China",
        "Bangladesh",
        "Nepal",
        "Afghanistan",
        "North Korea",
        "South Korea",
        "Japan"
    };

    // Array of integers points to images stored in /res/drawable-hdpi/
    int[] flags = new int[]{
        R.drawable.image1,         
  //here you have to give image name which you already pasted it in /res/drawable-hdpi/
        R.drawable.image2,   
        R.drawable.image3,
        R.drawable.image4,
        R.drawable.image5,
        R.drawable.image6,
        R.drawable.image7,
        R.drawable.image8,
        R.drawable.image9,
        R.drawable.image10,
    };

    // Array of strings to store currencies
    String[] currency = new String[]{
        "Indian Rupee",
        "Pakistani Rupee",
        "Sri Lankan Rupee",
        "Renminbi",
        "Bangladeshi Taka",
        "Nepalese Rupee",
        "Afghani",
        "North Korean Won",
        "South Korean Won",
        "Japanese Yen"
    };

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Each row in the list stores country name, currency and flag
        List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();

        for(int i=0;i<10;i++){
            HashMap<String, String> hm = new HashMap<String,String>();
            hm.put("txt", "Country : " + countries[i]);
            hm.put("cur","Currency : " + currency[i]);
            hm.put("flag", Integer.toString(flags[i]) );
            aList.add(hm);
        }

        // Keys used in Hashmap
        String[] from = { "flag","txt","cur" };

        // Ids of views in listview_layout
        int[] to = { R.id.flag,R.id.txt,R.id.cur};

        // Instantiating an adapter to store each items
        // R.layout.listview_layout defines the layout of each item
        SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), aList,                R.layout.listview_layout, from, to);

        // Getting a reference to listview of main.xml layout file
        ListView listView = ( ListView ) findViewById(R.id.listview);

        // Setting the adapter to the listView
        listView.setAdapter(adapter);
    }
}

यह पूरा कोड है। आप अपनी जरूरतों में बदलाव कर सकते हैं ... टिप्पणियां आपका स्वागत है


छह साल, यह अभी भी कुछ खोजों के लिए शीर्ष पर है। तब से चीजें बहुत बदल गई हैं। अब डिफैक्टो मानक Volley और नेटवर्क इमेज व्यू का उपयोग करने के लिए कम या ज्यादा है जो आपके लिए भारी उठाने का ख्याल रखता है।

यह मानते हुए कि आपके पास पहले से ही आपके Apaters, Loaders और ListFragments सेटअप ठीक से हैं, यह आधिकारिक Google ट्यूटोरियल बताता है कि छवियों को लोड करने के लिए NetworkImageView का उपयोग कैसे करें। छवियों को पृष्ठभूमि थ्रेड में स्वचालित रूप से लोड किया जाता है और यूआई थ्रेड पर अपडेट किया जाता है। यह कैशिंग का भी समर्थन करता है।


डेटाबेस से डेटा प्राप्त करने के लिए, आप एक SimpleCursorAdapter उपयोग SimpleCursorAdapter

मुझे लगता है कि आप सीधे SimpleCursorAdapter में SimpleCursorAdapter को बाध्य कर सकते हैं - यदि नहीं, तो आप एक कस्टम एडाप्टर क्लास बना सकते हैं जो SimpleCursorAdapter को कस्टम ViewBinder साथ ViewBinder जो ViewBinder को ओवरराइड setViewValue

SimpleCursorAdapter का उपयोग करने के तरीके को देखने के लिए Notepad ट्यूटोरियल देखें।


हमें दो लेआउट लागू करने की जरूरत है। सूचीदृश्य की पंक्ति वस्तु रखने के लिए एक सूची सूची और दूसरा पकड़ने के लिए। अपने स्वयं के कस्टम एडाप्टर को लागू करें। आइडिया एक टेक्स्टव्यू और एक छविदृश्य शामिल करना है।

public View getView(int position, View convertView, ViewGroup parent) {
 // TODO Auto-generated method stub
 LayoutInflater inflater = (LayoutInflater) context
 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
 View single_row = inflater.inflate(R.layout.list_row, null,
 true);
 TextView textView = (TextView) single_row.findViewById(R.id.textView);
 ImageView imageView = (ImageView) single_row.findViewById(R.id.imageView);
 textView.setText(color_names[position]);
 imageView.setImageResource(image_id[position]);
 return single_row; 
 }

इसके बाद हम रनटाइम के दौरान गतिशील रूप से छवियों और टेक्स्ट डेटा को शामिल करने के लिए मुख्य गतिविधि में कार्यक्षमता लागू करते हैं। आप कस्टम एडाप्टर के निर्माता को गतिशील रूप से बनाए गए टेक्स्ट सरणी और छवि आईडी सरणी को पारित कर सकते हैं।

Customlistadapter adapter = new Customlistadapter(this, image_id, text_name);

मैं एक समाधान के साथ आया कि मैं "बैच इमेजडाउनलोडर" कहता हूं जिसने अच्छी तरह से सेवा की है। यहां इसका एक त्वरित सारांश दिया गया है कि इसका उपयोग कैसे किया जाता है:

  • ग्लोबल हैश मैप रखें (आदर्श रूप से आपके एप्लिकेशन ऑब्जेक्ट में) जो ड्रॉइंग ऑब्जेक्ट्स के कैश के रूप में कार्य करता है

  • अपनी सूची एडाप्टर की getView () विधि में, अपनी सूची आइटम में ImageView को पॉप्युलेट करने के लिए कैश से ड्रॉ करने योग्य का उपयोग करें।

  • अपने ListView एडाप्टर में गुजरने, बैचइमेजडाउनलोडर का एक उदाहरण बनाएं

  • प्रत्येक छवि के लिए addUrl () को कॉल करें जिसे लाने / प्रदर्शित करने की आवश्यकता है

  • पूरा होने पर, निष्पादित करें ()। यह एक AsyncTask को निकालता है जो सभी छवियों को प्राप्त करता है, और जैसे ही प्रत्येक छवि को कैश में लाया जाता है और जोड़ा जाता है, यह आपके ListView को रीफ्रेश करता है (NotataDataSetChanged () को सूचित करके)

दृष्टिकोण के निम्नलिखित फायदे हैं:

  • प्रत्येक छवि / दृश्य के लिए अलग थ्रेड की बजाय सभी छवियों को लाने के लिए एक एकल कार्यकर्ता थ्रेड का उपयोग किया जाता है
  • एक बार छवि प्राप्त होने के बाद, इसका उपयोग करने वाली सभी सूची आइटम तुरंत अपडेट हो जाते हैं
  • कोड सीधे आपकी सूची आइटम में छवि दृश्य तक नहीं पहुंचता है - इसके बजाय यह आपकी सूची एडाप्टर पर NotifyDataSetChanged () को कॉल करके एक सूचीदृश्य रीफ्रेश ट्रिगर करता है, और getView () कार्यान्वयन केवल कैश से ड्रॉबल खींचता है और इसे प्रदर्शित करता है। यह ListViews में उपयोग की गई पुनर्नवीनीकरण दृश्य वस्तुओं से जुड़ी समस्याओं से बचाता है।

बैचइमेजडाउनलोडर का स्रोत कोड यहां दिया गया है:

package com.mobrite.androidutils;

import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;

import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.widget.BaseAdapter;

public class BatchImageDownloader extends AsyncTask<Void, Void, Void> {

    List<String> imgUrls = new ArrayList<String>();
    BaseAdapter adapter;
    HashMap<String, Drawable> imageCache;

    public BatchImageDownloader(BaseAdapter adapter,
            HashMap<String, Drawable> imageCache) {
        this.adapter = adapter;
        this.imageCache = imageCache;
    }

    public void addUrl(String url) {
        imgUrls.add(url);
    }

    @Override
    protected Void doInBackground(Void... params) {
        for (String url : imgUrls) {
            if (!imageCache.containsKey(url)) {
                Drawable bm = downloadImage(url);
                if (null != bm) {
                    imageCache.put(url, bm);
                    publishProgress();
                }
            }
        }
        return null;
    }

    @Override
    protected void onProgressUpdate(Void... values) {
        adapter.notifyDataSetChanged();
    }

    @Override
    protected void onPostExecute(Void result) {
        adapter.notifyDataSetChanged();
    }

    public Drawable downloadImage(String url) {

        DefaultHttpClient httpClient = new DefaultHttpClient();
        HttpGet request = new HttpGet(url);
        try {
            HttpResponse response = httpClient.execute(request);
            InputStream stream = response.getEntity().getContent();
            Drawable drawable = Drawable.createFromStream(stream, "src");
            return drawable;
        } catch (ClientProtocolException e) {
            e.printStackTrace();
            return null;
        } catch (IllegalStateException e) {
            e.printStackTrace();
            return null;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }

    }

}




android-image