用Volley让GridView加载网络图片

时间：2023-03-09 00:24:58
用Volley让GridView加载网络图片

用Volley让GridView加载网络图片

一、布局文件

总共两个布局文件，一个是GridView，还有一个是GridView的item，是NetworkImageView和TextView

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <GridView

        android:id="@+id/photo_wall"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:columnWidth="@dimen/image_thumbnail_size"

        android:gravity="center"

        android:numColumns="auto_fit"

        android:stretchMode="columnWidth"

        android:horizontalSpacing="@dimen/image_thumbnail_spacing"

        android:verticalSpacing="@dimen/image_thumbnail_spacing" >

    </GridView>

</RelativeLayout>

photo_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content" >

    <com.android.volley.toolbox.NetworkImageView

        android:id="@+id/netork_imageView"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_alignParentBottom="true"

        android:layout_alignParentTop="true"

        android:scaleType="centerCrop" />

    <TextView

        android:id="@+id/textView"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:textSize="18sp"

        android:textColor="#ffffff"

        android:text="TextView" />

</RelativeLayout>

二、MainActivity & Application

1.1 MainActivity

MainActivity主要作用是加载GridView，这里做了一个小小的处理（参考自：bitmapfun），通过计算GridView的宽，然后根据GridView的列数和边距，最终计算出GridView中item的宽度。

package com.example.kalephotoswall;

import android.app.Activity;

import android.os.Bundle;

import android.os.Debug;

import android.widget.GridView;

import com.kale.photoswall.adapter.PhotoWallAdapter;

public class MainActivity extends Activity {

    /**

     * 用于展示照片墙的GridView

     */

    private GridView mPhotoWall;

    private PhotoWallAdapter mAdapter;

    // 小图片的大小

    int mImageThumbSize;

    // 图片间距

    int mImageThumbSpacing;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mImageThumbSize = getResources().getDimensionPixelSize(R.dimen.image_thumbnail_size); // 读取资源文件中的宽度，即：100

        mImageThumbSpacing = getResources().getDimensionPixelSize(R.dimen.image_thumbnail_spacing); // 读取资源文件中的itmap边距，即：1

        mAdapter = new PhotoWallAdapter(this);

        mPhotoWall = (GridView) findViewById(R.id.photo_wall);

        mPhotoWall.post(new Runnable() {

            @Override

            public void run() {

                final int numColumns = (int) Math.floor(mPhotoWall.getWidth() / (mImageThumbSize + mImageThumbSpacing));

                if (numColumns > 0) {

                    int columnWidth = (mPhotoWall.getWidth() / numColumns) - mImageThumbSpacing; // 计算出item的列宽

                    mAdapter.setItemHeight(columnWidth); // 调用适配器中我们自定义的方法，来在getView()中设置好item宽度

                }

            }

        });

        mPhotoWall.setAdapter(mAdapter); // 设置适配器

    }

}

1.2 Application

在应用程序的代码中初始化volley用到的对象，方便以后调用。

package com.kale.photoswall.application;

import android.app.Application;

import com.android.volley.RequestQueue;

import com.android.volley.toolbox.Volley;

public class KaleApplication extends Application {

    public static RequestQueue requestQueue;

    public static int memoryCacheSize;

    //public static ImageLoader imageLoader;

    @Override

    public void onCreate() {

        super.onCreate();

        // 不必为每一次HTTP请求都创建一个RequestQueue对象，推荐在application中初始化

        requestQueue = Volley.newRequestQueue(this);

        // 计算内存缓存

        memoryCacheSize = getMemoryCacheSize();

    }

    /**

     * @description

     *

     * @param context

     * @return 得到需要分配的缓存大小，这里用八分之一的大小来做

     */

    public int getMemoryCacheSize() {

        // Get memory class of this device, exceeding this amount will throw an

        // OutOfMemory exception.

        int maxMemory = (int) Runtime.getRuntime().maxMemory();

        // Use 1/8th of the available memory for this memory cache.

        return maxMemory / 8;

    }

}

三、准备图片数据源 & ViewHolder & Cache

3.1 数据源

建立一个用url的string数组—— Images.java

/*

 * Copyright (C) 2012 The Android Open Source Project

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *      http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */

package com.kale.photoswall.provider;

/**

 * Some simple test data to use for this sample app.

 */

public class Images {

    public final static String[] imageThumbUrls = new String[] {

        "http://static4.photo.sina.com.cn/middle/69670edbx9475f3f01283&690",

        "http://s8.sinaimg.cn/middle/6f78405exa6e437719ea7&690",

        "http://s3.sinaimg.cn/middle/6f78405ex9f4d66911f22&690",

        "http://s8.sinaimg.cn/middle/6f78405exa6e436d8f357&690",

        "http://s4.sinaimg.cn/middle/6f78405exa6e43621ecb3&690",

        "http://s10.sinaimg.cn/middle/6f78405exa0f4f335c589&690",

        "http://s16.sinaimg.cn/middle/6f78405ex9f4d7b2eff0f&690",

        "http://s7.sinaimg.cn/middle/6f78405exa6e2fa1d4ab6&690",

        "http://s8.sinaimg.cn/middle/6f78405exa6e2fa4b19c7&690",

        "http://s6.sinaimg.cn/middle/69670edbx94da12276525&690",

        "http://s2.sinaimg.cn/middle/69670edbx94da117f7c41&690",

        "http://s3.sinaimg.cn/bmiddle/6f78405exa503c5d0a462&690",

        "http://s6.sinaimg.cn/middle/6f78405exa72b24119765&690",

        "http://s11.sinaimg.cn/middle/6f78405ex9f4d5245988a&690",

        "http://s10.sinaimg.cn/middle/6f78405ex9f4d7b107f29&690",

        "http://img0.tech2ipo.com/upload/img/article/2013/03/1364556945327.png",

        "http://s7.sinaimg.cn/middle/6f78405eta77a260b8d96&690",

        "http://s3.sinaimg.cn/middle/6f78405eta77a29344d92&690",

        "http://s10.sinaimg.cn/middle/6f78405exa0f4f250e469&690",

        "http://s3.sinaimg.cn/middle/6f78405eta77a21932632&690",

        "http://s13.sinaimg.cn/middle/6f78405eta77a2c9a0d2c&690",

        "http://s9.sinaimg.cn/middle/6f78405eta77a47b89188&690",

        "http://s16.sinaimg.cn/middle/6f78405exa0f4f11fb58f&690",

        "http://img2.imgtn.bdimg.com/it/u=2449553173,1966285445&fm=23&gp=0.jpg",

        "http://h.hiphotos.baidu.com/baike/w%3D150/sign=406f3d00251f95caa6f596b3f9167fc5/d50735fae6cd7b89493402fd0f2442a7d9330e77.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383299_1976.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383291_6518.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383291_8239.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383290_9329.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383290_1042.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383275_3977.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383265_8550.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383264_3954.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383264_4787.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383264_8243.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383248_3693.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383243_5120.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383242_3127.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383242_9576.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383242_1721.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383219_5806.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383214_7794.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383213_4418.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383213_3557.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383210_8779.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383172_4577.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383166_3407.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383166_2224.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383166_7301.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383165_7197.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383150_8410.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383131_3736.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383130_5094.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383130_7393.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383129_8813.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383100_3554.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383093_7894.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383092_2432.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383092_3071.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383091_3119.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383059_6589.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383059_8814.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383059_2237.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383058_4330.jpg",

        "http://img.my.****.net/uploads/201407/26/1406383038_3602.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382942_3079.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382942_8125.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382942_4881.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382941_4559.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382941_3845.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382924_8955.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382923_2141.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382923_8437.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382922_6166.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382922_4843.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382905_5804.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382904_3362.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382904_2312.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382904_4960.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382900_2418.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382881_4490.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382881_5935.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382880_3865.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382880_4662.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382879_2553.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382862_5375.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382862_1748.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382861_7618.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382861_8606.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382861_8949.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382841_9821.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382840_6603.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382840_2405.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382840_6354.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382839_5779.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382810_7578.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382810_2436.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382809_3883.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382809_6269.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382808_4179.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382790_8326.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382789_7174.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382789_5170.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382789_4118.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382788_9532.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382767_3184.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382767_4772.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382766_4924.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382766_5762.jpg",

        "http://img.my.****.net/uploads/201407/26/1406382765_7341.jpg",

        "http://kale/error/201407/26/1406382765_7341.jpg"

    };

}

3.2 ViewHolder

package com.kale.photoswall.util;

import android.util.SparseArray;

import android.view.View;

public class ViewHolder {

    // I added a generic return type to reduce the casting noise in client code

    @SuppressWarnings("unchecked")

    public static <T extends View> T get(View view, int id) {

        SparseArray<View> viewHolder = (SparseArray<View>) view.getTag();

        if (viewHolder == null) {

            viewHolder = new SparseArray<View>();

            view.setTag(viewHolder);

        }

        View childView = viewHolder.get(id);

        if (childView == null) {

            childView = view.findViewById(id);

            viewHolder.put(id, childView);

        }

        return (T) childView;

    }

}

3.3 设置内存缓存对象

既然用到了volley，那么就需要自定义一个内存缓存对象，用它来缓存图片。

LruBitmapCache.java

package com.kale.photoswall.util;

import android.graphics.Bitmap;

import android.util.LruCache;

import com.android.volley.toolbox.ImageLoader.ImageCache;

import com.kale.photoswall.application.KaleApplication;

public class LruBitmapCache implements ImageCache {

    private LruCache<String, Bitmap> mMemoryCache;

    public static Bitmap cacheBitmap;

    public LruBitmapCache() {

        mMemoryCache = new LruCache<String, Bitmap>(KaleApplication.memoryCacheSize) {

            @Override

            protected int sizeOf(String key, Bitmap bitmap) {

                return bitmap.getRowBytes() * bitmap.getHeight();

            }

        };

    }

    @Override

    public Bitmap getBitmap(String url) {

        return mMemoryCache.get(url);

    }

    @Override

    public void putBitmap(String url, Bitmap bitmap) {

        mMemoryCache.put(url, bitmap);

    }

}

四、设置Adapter

准备工作做好了，现在就来自定义一个adapter。

package com.kale.photoswall.adapter;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AbsListView;

import android.widget.AbsListView.OnScrollListener;

import android.widget.BaseAdapter;

import android.widget.TextView;

import com.android.volley.toolbox.ImageLoader;

import com.android.volley.toolbox.NetworkImageView;

import com.example.kalephotoswall.R;

import com.kale.photoswall.application.KaleApplication;

import com.kale.photoswall.provider.Images;

import com.kale.photoswall.util.LruBitmapCache;

import com.kale.photoswall.util.ViewHolder;

public class PhotoWallAdapter extends BaseAdapter implements OnScrollListener{

    private Context mContext;

    private static ImageLoader mImageLoader; // imageLoader对象，用来初始化NetworkImageView

    /**

     * 记录每个子项的高度。

     */

    private int mItemHeight = 0;

    public PhotoWallAdapter(Context context) {

        mContext = context;

        // 初始化mImageLoader，并且传入了自定义的内存缓存

        mImageLoader = new ImageLoader(KaleApplication.requestQueue, new LruBitmapCache()); // 初始化一个loader对象，可以进行自定义配置

        // 配置是否进行磁盘缓存

        mImageLoader.setShouldCache(true); // 设置允许磁盘缓存，默认是true

    }

    @Override

    public int getCount() {

        return Images.imageThumbUrls.length; // 返回item的个数

    }

    @Override

    public Object getItem(int position) {

        return position;

    }

    @Override

    public long getItemId(int position) {

        return position;

    }

    /*

     * 重要的方法。通过viewHolder复用view，并且设置好item的宽度

     *

     * @param position

     * @param convertView

     * @param parent

     * @return

     */

    @Override

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

        if (convertView == null) {

            // init convertView by layout

            LayoutInflater inflater = LayoutInflater.from(mContext);

            convertView = inflater.inflate(R.layout.photo_layout, null);

        }

        // 得到item中显示图片的view

        NetworkImageView networkImageView = ViewHolder.get(convertView, R.id.netork_imageView);

        // 得到item中的textview

        TextView textView = ViewHolder.get(convertView, R.id.textView);

        // 设置默认的图片

        networkImageView.setDefaultImageResId(R.drawable.default_photo);

        // 设置图片加载失败后显示的图片

        networkImageView.setErrorImageResId(R.drawable.error_photo); 

        if (networkImageView.getLayoutParams().height != mItemHeight) {

            // 通过activity中计算出的结果，在这里设置networkImageview的高度（得到的是正方形）

            networkImageView.getLayoutParams().height = mItemHeight;

        }

        // 开始加载网络图片

        networkImageView.setImageUrl(Images.imageThumbUrls[position], mImageLoader);

        textView.setText("" + position); // 简单的设置textview上的文字

        return convertView;

    }

    /**

     * 设置item子项的高度。

     */

    public void setItemHeight(int height) {

        if (height == mItemHeight) {

            return;

        }

        mItemHeight = height;

        notifyDataSetChanged();

    }

    @Override

    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount , int totalItemCount ) {

    }

    @Override

    public void onScrollStateChanged(AbsListView view, int scrollState) {

        // 仅当GridView静止时才去下载图片，GridView滑动时取消所有正在下载的任务

        if (scrollState == SCROLL_STATE_IDLE) {

            // loadBitmaps(mFirstVisibleItem, mVisibleItemCount);

        } else {

            // cancelAllTasks();

        }

    }

}

源码下载：http://download.****.net/detail/shark0017/8429613

其他参考的demo，这个demo是通过LruCache，DiskLruCache来实现的照片墙，效果挺不错的。

下载地址：

相关文章