GridViewで写真表示をする際に、表示が遅延しているのか波を打ってしまう

Question

フォトアルバムのギャラリーを自作しようとしています。
このフォトアルバムには、デジカメで撮影した写真を表示するので、かなり画像が大きくなるので縮小して表示するようにしていますが、それでも重たいのか表示に遅延が発生してしまいます。

スクロールは大変スムーズに動くのですが、スクロール完了後も表示している写真アイテムがスクロール途中の写真をコロコロと表示するような感じです。

public View getView(int position, View convertView, ViewGroup parent) {
        StringBuilder TextView = new StringBuilder();

        ViewHolder viewHolder;

        if(convertView == null){
            convertView = mInflater.inflate(R.layout.list_log_album_content, parent, false);
            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder)convertView.getTag();
        }
        viewHolder.thumbnail.setPhotoID(mPhotoList.get(position));

        /**
         * TextViewへの表示処理
         */
        // 時間
        if(mPhotoList.get(position).getExifInterface().getAttribute(ExifInterface.TAG_DATETIME)!=null){
            TextView.append(mContext.getString(R.string.text_label_log_album_date)  +
                    mPhotoList.get(position).getExifInterface().getAttribute(ExifInterface.TAG_DATETIME));
        }

        // 緯度
        if(mPhotoList.get(position).getExifInterface().getAttribute(ExifInterface.TAG_GPS_LONGITUDE) != null){
             TextView.append("\n" + mContext.getString(R.string.text_label_log_album_longitude) +
                     mPhotoList.get(position).getExifInterface().getAttribute(ExifInterface.TAG_GPS_LONGITUDE));
        }

        // 経度
        if(mPhotoList.get(position).getExifInterface().getAttribute(ExifInterface.TAG_GPS_LATITUDE) != null){
            TextView.append("\n" + mContext.getString(R.string.text_label_log_album_latitude) +
                    mPhotoList.get(position).getExifInterface().getAttribute(ExifInterface.TAG_GPS_LATITUDE));
        }

        viewHolder.textView.setText(TextView);

        return convertView;
    }

とアダプターの中の「viewHolder.thumbnail.setPhotoID(Xxxx)」で独自に作ったサムネイルイメージビューのクラスに表示したい写真のパスとExifを渡しています。
この独自で作ったサムネイルクラスは、GridViewの中のアイテムに情報を表示するところをつけたかったので、その為に作りました。

public class ThumbnailView extends ImageView {

    static private Photo mPhoto;
    private Bitmap bitmap;

    public ThumbnailView(Context context) {
        super(context);
    }

    public ThumbnailView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ThumbnailView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width = getMeasuredWidth();
        setMeasuredDimension(width, width);
    }

    public void setPhotoID(Photo photo){
        mPhoto = photo;

       PhotoTask task = new PhotoTask(this);
        task.execute(mPhoto);
    }

    public String getPhotoID(){
        return mPhoto.getFilePath();
    }

    class PhotoTask extends AsyncTask<Object,Void,Bitmap>{

        private final WeakReference<ThumbnailView> mThumbnailView;
        private Bitmap photos;
        private Bitmap photo_s = null;
        Photo mPhoto;

        public PhotoTask(ThumbnailView thumbnailView){
            mThumbnailView = new WeakReference<ThumbnailView>(thumbnailView);
        }

        @Override
        protected Bitmap doInBackground(Object... params){

            mPhoto = (Photo)params[0];

            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeFile(mPhoto.getFilePath(),options);
            int scaleW = options.outWidth / 530 + 1;
            int scaleH = options.outHeight / 570 + 1;

            int scale = Math.max(scaleW, scaleH);
            options.inJustDecodeBounds = false;
            options.inSampleSize = scale;
            try {
                photos = BitmapFactory.decodeFile(mPhoto.getFilePath(), options);
                photo_s = Bitmap.createBitmap(photos,0,0,photos.getWidth(),photos.getHeight(), PhotoRotatedMatrix.getRotatedMatrix(mPhoto.getExifInterface()),true);
            } catch (OutOfMemoryError e) {
                e.printStackTrace();
            }

            return photo_s;
        }

        @Override
        protected void onPostExecute(Bitmap result){
            // メインスレッドの処理
            final ThumbnailView thumbnailView = mThumbnailView.get();
            // デコードしたBitmapをThumbnailViewに設定する
            bitmap = result;
            thumbnailView.setImageBitmap(result);
        }
    }

このイメージビューの中で、バッググラウンドでビットマップを生成するような流れにしました。

動きは高速化できたのですが、表示が遅く一つ一つのイメージビューがスクロール途中の写真をスクロール完了後もローディングしているような状態になってしまいます。

・イメージビューにプログレスバーが表示されるようにする
という方法も検討はしてみたのですが、どこで本来欲しい写真が表示されたかどうかを取れなかったので断念しました。

どうすれば解決できるでしょうか？

ご教授のほどよろしくお願いいたします。

Answer 1

メモリキャッシュを使ってみてはどうでしょうか。現在の実装だと同じ画像を何回も読み込むことになっているので非効率です。またListViewを使っている以上何回も同じ表示することになると思いますのでメモリキャッシュは有効だと思います。LruCacheというメモリキャッシュのAPIがあるのでライブラリを使わずやるのであればそちらを使ってみてはどうでしょうか？
個人的にはPicassoなどの画像読み込みライブラリを使うことをお勧めします。ライブラリを使えば非同期読み込みやキャッシュを適切にやってくれるので、メモリリークなどをあまり気にしなくてよくなります。

Comments

[SmartBuzz]

情報を頂いてありがとうございます。
調査してみます！

[SmartBuzz]

Picassoは導入もとても簡単で、すぐ導入できました！
ありがとうございました。