ListView scroll lagging when images is shown?

问题:

My listview lags when scrolling. It seems as the lazyload works but the lag happens everytime an image is shown.

I'm using the imageLoader found here http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/ and this is my adapter:

public class EventAdapter extends ArrayAdapter<Event>{
    public ListImageLoader imageLoader; 
    public DisplayImageOptions imgDispOpts;
    private ArrayList<Event> objects;

    public EventAdapter(Context context, int textViewResourceId, ArrayList<Event> objects,ListImageLoader imageLoader) {
        super(context, textViewResourceId, objects);
        this.objects = objects;
        this.imageLoader = imageLoader;
    }
    /*
     * we are overriding the getView method here - this is what defines how each
     * list item will look.
     */
        @SuppressLint("DefaultLocale")
        @Override
        public View getView(int position, View convertView, ViewGroup parent){
            Event event = objects.get(position);
            // assign the view we are converting to a local variable
            View v = convertView;
            ViewHolder holder;

            // first check to see if the view is null. if so, we have to inflate it.
            // to inflate it basically means to render, or show, the view.
            if (v == null) {
                LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                v = inflater.inflate(R.layout.list_row, null);
                System.out.println("new Viewholder");
                holder = new ViewHolder();
                holder.listTimeString = (TextView) v.findViewById(R.id.listTimeString);
                holder.date =(TextView) v.findViewById(R.id.Date);
                holder.title = (TextView) v.findViewById(R.id.title);
                holder.shortInfo = (TextView) v.findViewById(R.id.shortinfo);
                holder.ageIcon = (ImageView) v.findViewById(R.id.listAgeIcon);
                holder.thumb = (ImageView) v.findViewById(R.id.wideListImage);
                holder.header = (RelativeLayout) v.findViewById(R.id.headerLayout);
                holder.rowLayout = (RelativeLayout) v.findViewById(R.id.rowlayout);
                holder.listVenueIcon = (ImageView) v.findViewById(R.id.listVenueIcon);
                holder.eventRowLayout = (RelativeLayout) v.findViewById(R.id.eventrowlayout);
                v.setTag(holder);
            }
            else{
                holder = (ViewHolder) v.getTag();
            }
            /*
             * Recall that the variable position is sent in as an argument to this method.
             * The variable simply refers to the position of the current object in the list. (The ArrayAdapter
             * iterates through the list we sent it)
             * 
             * Therefore, i refers to the current Item object.
             */

            if (event != null) {

                // This is how you obtain a reference to the TextViews.
                // These TextViews are created in the XML files we defined.

                //SET FONTS
                Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/myriad.otf");
                holder.title.setTypeface(tf);
                holder.shortInfo.setTypeface(tf);
                Typeface tf2 = Typeface.createFromAsset(getContext().getAssets(),"fonts/agencyr.ttf");
                holder.date.setTypeface(tf2);
                // check to see if each individual textview is null
                // if not, assign some text!
                if(event.isBig()){
                    //holder.rowLayout.getLayoutParams().height=230;
                    holder.shortInfo.setHeight(80);
                    holder.shortInfo.setMaxLines(5);
                    holder.shortInfo.setText(event.getInfo());
                }
                else{
                    //holder.rowLayout.getLayoutParams().height=125;
                    //holder.listVenueIcon.setImageResource(R.drawable.ikon_bar);
                    holder.shortInfo.setHeight(16);
                    holder.shortInfo.setMaxLines(1);
                    holder.shortInfo.setText(event.getInfo());
                }
                if(event.isClub()){
                    holder.listVenueIcon.setImageResource(R.drawable.ikon_klubb);
                }
                else{
                    holder.listVenueIcon.setImageResource(R.drawable.ikon_bar);

                }
                if (event.isNewDay()){
                    holder.date.setText(event.getDay().toUpperCase());
                    holder.header.setVisibility(View.VISIBLE);
                } else{
                    holder.header.setVisibility(View.GONE);
                }
                if (holder.title != null){
                    holder.title.setText(event.getHost().toUpperCase());
                }
                if(holder.ageIcon!= null){
                    switch(Integer.parseInt(event.getAge())){
                    case(19):
                        holder.ageIcon.setImageResource(R.drawable.event_info_19);
                        break;

                    ...
                    more cases
                    ...

                    case(30):
                        holder.ageIcon.setImageResource(R.drawable.event_info_30);
                        break;
                    default:
                        holder.ageIcon.setImageResource(R.drawable.event_info_18);
                        break;
                    }
                }
                if(holder.thumb != null){
                    imageLoader.DisplayImage(event.getThumbURL(), holder.thumb);
                }
                if(holder.listTimeString != null){
                    String tempTimeString = event.getStartTime() + " - " + event.getEndTime(); 
                    holder.listTimeString.setText(tempTimeString);
                }
            }

            // the view must be returned to our activity
            return v;

        }
        static class ViewHolder{
            RelativeLayout eventRowLayout;
            TextView listTimeString;
            TextView date;
            TextView title;
            TextView shortInfo;
            ImageView ageIcon;
            ImageView thumb;
            RelativeLayout header;
            RelativeLayout rowLayout;
            ImageView listVenueIcon;
        }
}

Any ideas?

EDIT: I am loading the imageURLs asynchronously at onCreate, this would be a perfect place to cache the images, can you see how this could be done using the ImageLoader in the link?

回答1:

yes, resolving the lagging by using memory cache. You can read the origin post from here.

I've implement my EntryArrayAdapter, which uses memory caching to prevent slow and lag when scrolling a list view.

public class EntryArrayAdapter extends ArrayAdapter<JSONObject> {
private final Context context;
private final ArrayList<JSONObject> values; 
private final LruCache<String, Bitmap> cache;

static class ViewHolder {
        public TextView title;
        public TextView city;
        public TextView outlet;
        public TextView service;
        public ImageView photo;
}

public EntryArrayAdapter(Context context, ArrayList<JSONObject> values) {
    super(context, R.layout.layout_list_item);
    this.context = context;
    this.values = values;

     final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);

        // Use 1/8th of the available memory for this memory cache.
        final int cacheSize = maxMemory / 8;

        cache = new LruCache<String, Bitmap>(cacheSize) {
            @Override
            protected int sizeOf(String key, Bitmap bitmap) {
                // The cache size will be measured in kilobytes rather than
                // number of items.
                return bitmap.getRowBytes() / 1024;
            }
        };
}

/* (non-Javadoc)
 * @see android.widget.ArrayAdapter#getCount()
 */
@Override
public int getCount() {     
    return values != null ? values.size() : 0;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View rowView = convertView;
    ViewHolder holder;

    if (rowView == null) {
        LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        rowView = inflater.inflate(R.layout.layout_list_item, parent, false);
        // set references
        holder = new ViewHolder();

        holder.title = (TextView) rowView.findViewById(R.id.titleText);
        holder.city = (TextView) rowView.findViewById(R.id.cityText);
        holder.outlet = (TextView) rowView.findViewById(R.id.outletText);
        holder.service = (TextView) rowView.findViewById(R.id.visaMasterText);      
        holder.photo = (ImageView) rowView.findViewById(R.id.itemImage);
        rowView.setTag(holder);
    }
    else {
        holder = (ViewHolder) rowView.getTag();
    }

    try {
        JSONObject obj = values.get(position);

        Bitmap bmp = getBitmapFromMemCache(obj.getString("id"));
        if (bmp == null) {
            bmp = BitmapHelper.decodeSampledBitmapFromResource(obj.getString("photo"), 96, 96);        
            addBitmapToMemoryCache(obj.getString("id"), bmp);
        }

        holder.title.setText(obj.getString("title"));
        holder.city.setText(obj.getString("city"));
        holder.outlet.setText(obj.getString("outlet"));
        holder.service.setText(obj.getString("service"));           
        holder.photo.setImageBitmap(bmp);


    } catch (JSONException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    return rowView;
}

public void addBitmapToMemoryCache(String key, Bitmap bitmap) {
    if (getBitmapFromMemCache(key) == null) {
        cache.put(key, bitmap);
    }
}

public Bitmap getBitmapFromMemCache(String key) {
    return cache.get(key);
}

回答2:

I solved it by caching the image in background by creating and using the following function in ImageLoader.java

public void cacheImage(String url){
    Bitmap bmp = getBitmap(url);
    memoryCache.put(url, bmp);
}

I created one instance of ImageLoader, made a static reference to it and then called

AsyncClass.imageLoader.cacheImage(url);

Where AsyncClass is the class where I made the static reference to the ImageLoader and called it "imageLoader".

回答3:

I recommend you to use Android-Universal-Image-Loader for asynchronous image loading, caching and displaying.