android - 为 listview + Lazy List image 实现了 ViewHolder Pattern 但滚动仍然不流畅

Question

我已经实现了著名的 lazy load image library在我的项目中并为我的 ListView 实现了 ViewHolder 模式，但我的 ListView 的滚动仍然不流畅。有什么我想念的吗？

这是我的代码。

public View getView(int position, View convertView, ViewGroup parent) {

        View vi = convertView; // trying to reuse a recycled view
        ViewHolder holder = null;

        if (vi == null) {

            vi = inflater.inflate(R.layout.realstate_listview_items,
                    parent, false);

            holder = new ViewHolder();

            holder.txtRealstateAddress = (TextView) vi
                    .findViewById(R.id.txtRealstateAddress);
            holder.txtRealstateHomeTypeBroker = (TextView) vi
                    .findViewById(R.id.txtRealstateHomeTypeBroker);
            holder.txtRealstatePrice = (TextView) vi
                    .findViewById(R.id.txtRealstatePrice);
            holder.txtRealStateStatus = (TextView) vi
                    .findViewById(R.id.txtRealStateStatus);
            holder.imgRealstatePhoto = (ImageView) vi
                    .findViewById(R.id.imgRealstatePhoto);
            vi.setTag(holder);

        } else {
            holder = (ViewHolder) vi.getTag();
        }

        if (isThreadCompleted) {

            if (position == selectedItem) {
                View view = (View) holder.txtRealstateAddress.getParent()
                        .getParent().getParent();
                view.setBackgroundColor(Color.parseColor("#BFB495"));
            } else {
                View view = (View) holder.txtRealstateAddress.getParent()
                        .getParent().getParent();
                view.setBackgroundColor(Color.TRANSPARENT);
            }

            holder.txtRealstateAddress
                    .setText(RealStateParsedData.realstate_address
                            .get(position));
            holder.txtRealstateHomeTypeBroker
                    .setText(RealStateParsedData.realstate_propertytype
                            .get(position)
                            + "\n"
                            + RealStateParsedData.realstate_broker
                                    .get(position));
            holder.txtRealstatePrice.setText("$"
                    + RealStateParsedData.realstate_price.get(position));

            holder.txtRealStateStatus.setVisibility(View.VISIBLE);
            holder.txtRealStateStatus
                    .setText(RealStateParsedData.realstate_status
                            .get(position));

            if (RealStateParsedData.realstate_status.get(position).equals(
                    "Active")) {

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    holder.txtRealStateStatus.setBackground(getResources()
                            .getDrawable(
                                    R.drawable.real_estate_text_bg_active));
                } else {
                    holder.txtRealStateStatus
                            .setBackgroundDrawable(getResources()
                                    .getDrawable(
                                            R.drawable.real_estate_text_bg_active));
                }

            } else {

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    holder.txtRealStateStatus
                            .setBackground(getResources().getDrawable(
                                    R.drawable.real_estate_text_bg_pending));
                } else {
                    holder.txtRealStateStatus
                            .setBackgroundDrawable(getResources()
                                    .getDrawable(
                                            R.drawable.real_estate_text_bg_pending));
                }

            }

            imageLoader.DisplayImage(data.get(position),
                    holder.imgRealstatePhoto);

        } else {
            holder.txtRealStateStatus.setVisibility(View.INVISIBLE);
        }

        return vi;
    }
}

private static class ViewHolder {

    TextView txtRealstateAddress;
    TextView txtRealstateHomeTypeBroker;
    TextView txtRealstatePrice;
    TextView txtRealStateStatus;
    ImageView imgRealstatePhoto;
}

更新

ImageLoader 类

package com.fedorvlasov.lazylist;
public class ImageLoader {

    MemoryCache memoryCache = new MemoryCache();
    FileCache fileCache;
    private Map<ImageView, String> imageViews = Collections
            .synchronizedMap(new WeakHashMap<ImageView, String>());
    ExecutorService executorService;
    Handler handler = new Handler();// handler to display images in UI thread

    public ImageLoader(Context context) {
        fileCache = new FileCache(context);
        executorService = Executors.newFixedThreadPool(5);
    }

    final int stub_id = R.drawable.img_bg_temp;

    public void DisplayImage(String url, ImageView imageView) {
        imageViews.put(imageView, url);
        Bitmap bitmap = memoryCache.get(url);
        if (bitmap != null)
            imageView.setImageBitmap(bitmap);
        else {
            queuePhoto(url, imageView);
            imageView.setImageResource(stub_id);
        }
    }

    private void queuePhoto(String url, ImageView imageView) {
        PhotoToLoad p = new PhotoToLoad(url, imageView);
        executorService.submit(new PhotosLoader(p));
    }

    private Bitmap getBitmap(String url) {
        File f = fileCache.getFile(url);

        // from SD cache
        Bitmap b = decodeFile(f);
        if (b != null)
            return b;

        // from web
        try {
            Bitmap bitmap = null;
            URL imageUrl = new URL(url);
            HttpURLConnection conn = (HttpURLConnection) imageUrl
                    .openConnection();
            conn.setConnectTimeout(30000);
            conn.setReadTimeout(30000);
            conn.setInstanceFollowRedirects(true);
            InputStream is = conn.getInputStream();
            OutputStream os = new FileOutputStream(f);
            Utils.CopyStream(is, os);
            os.close();
            conn.disconnect();
            bitmap = decodeFile(f);
            return bitmap;
        } catch (Throwable ex) {
            ex.printStackTrace();
            if (ex instanceof OutOfMemoryError)
                memoryCache.clear();
            return null;
        }
    }

    // decodes image and scales it to reduce memory consumption
    private Bitmap decodeFile(File f) {
        try {
            // decode image size
            BitmapFactory.Options o = new BitmapFactory.Options();
            o.inJustDecodeBounds = true;
            FileInputStream stream1 = new FileInputStream(f);
            BitmapFactory.decodeStream(stream1, null, o);
            stream1.close();

            // Find the correct scale value. It should be the power of 2.
            final int REQUIRED_SIZE = 128;
            int width_tmp = o.outWidth, height_tmp = o.outHeight;
            int scale = 1;
            while (true) {
                if (width_tmp / 2 < REQUIRED_SIZE
                        || height_tmp / 2 < REQUIRED_SIZE)
                    break;
                width_tmp /= 2;
                height_tmp /= 2;
                scale *= 2;
            }

            // decode with inSampleSize
            BitmapFactory.Options o2 = new BitmapFactory.Options();
            o2.inSampleSize = scale;
            FileInputStream stream2 = new FileInputStream(f);
            Bitmap bitmap = BitmapFactory.decodeStream(stream2, null, o2);
            stream2.close();
            return bitmap;
        } catch (FileNotFoundException e) {
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

    // Task for the queue
    private class PhotoToLoad {
        public String url;
        public ImageView imageView;

        public PhotoToLoad(String u, ImageView i) {
            url = u;
            imageView = i;
        }
    }

    class PhotosLoader implements Runnable {
        PhotoToLoad photoToLoad;

        PhotosLoader(PhotoToLoad photoToLoad) {
            this.photoToLoad = photoToLoad;
        }

        @Override
        public void run() {
            try {
                if (imageViewReused(photoToLoad))
                    return;
                Bitmap bmp = getBitmap(photoToLoad.url);
                memoryCache.put(photoToLoad.url, bmp);
                if (imageViewReused(photoToLoad))
                    return;
                BitmapDisplayer bd = new BitmapDisplayer(bmp, photoToLoad);
                handler.post(bd);
            } catch (Throwable th) {
                th.printStackTrace();
            }
        }
    }

    boolean imageViewReused(PhotoToLoad photoToLoad) {
        String tag = imageViews.get(photoToLoad.imageView);
        if (tag == null || !tag.equals(photoToLoad.url))
            return true;
        return false;
    }

    // Used to display bitmap in the UI thread
    class BitmapDisplayer implements Runnable {
        Bitmap bitmap;
        PhotoToLoad photoToLoad;

        public BitmapDisplayer(Bitmap b, PhotoToLoad p) {
            bitmap = b;
            photoToLoad = p;
        }

        public void run() {
            if (imageViewReused(photoToLoad))
                return;
            if (bitmap != null)
                photoToLoad.imageView.setImageBitmap(bitmap);
            else
                photoToLoad.imageView.setImageResource(stub_id);
        }
    }

    public void clearCache() {
        memoryCache.clear();
        fileCache.clear();
    }

}

更新2

这是我的 realestate_lisview_items.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" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:padding="5dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/listview_bg" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/imgRealstatePhoto"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="10dp"
            android:layout_toLeftOf="@+id/imageView1"
            android:layout_toRightOf="@+id/imgRealstatePhoto"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/txtRealstateAddress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#7D7D7D"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/txtRealstateHomeTypeBroker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="3"
                android:text="Loading...."
                android:textColor="#867C7D"
                android:textScaleX="1.025"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/linearLayout1"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_below="@+id/linearLayout1"
            android:gravity="bottom"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/txtRealstatePrice"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.75"
                android:textColor="#006B9E"
                android:textSize="12sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/txtRealStateStatus"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/real_estate_text_bg_pending"
                android:ellipsize="end"
                android:gravity="center"
                android:maxLines="1"
                android:singleLine="true"
                android:textColor="@android:color/white"
                android:textSize="12sp" />
        </LinearLayout>

        <ImageView
            android:id="@+id/imgRealstatePhoto"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:scaleType="centerCrop"
            android:src="@drawable/ellectedofficialsoverlay" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/expand_ico" />
    </RelativeLayout>
</RelativeLayout>

</RelativeLayout>

Answer 1

一些事情:

• 看起来你每次都在做 RealStateParsedData.realstate_status.get(position) - 我会保存它。
• 也许尝试为每个单元格状态创建不同的布局，而不是切换背景并加载正确的可绘制对象。
• 使用 holder.txtRealStateStatus.setVisibility(View.GONE); 而不是 INVISIBLE 以获得更好的布局性能
• 您是否在回收 View 时取消图像加载请求？
• 让我们看看realstate_listview_items 布局-复杂的布局可能会使列表非常慢-它的层次结构是否复杂？有 overdraw 吗？

无论如何，android 中内置了很多好用的工具 - 尝试在开发者选项中启用Debug GPU overdraw 和Profile GPU rendering。

编辑

要在 View 回收时取消任务，你应该将 RecyclerListener 设置为你的 ListView 和 onMovedToScrapHeap 你应该取消你的 PhotoToLoad 任务(这你应该通过为每个 View 保存它的任务来完成)。

无论如何-现在通过查看您的图像加载器，我会将其更改为使用AsyncTask，看看如何google建议加载图片。