开发者社区> 西北野狼> 正文

【第二篇】Volley的使用之加载图片

简介: Volley加载图片有两种方式:  1,ImageRequest 来对网络图片进行请求,放入请求队列,获取后现在在控件上面。  2,NetworkImageView 最为自定义控件来自动加载网络图片。   3,imageloader,对图片大小,质量格式控制来按需加载图片。
+关注继续查看

Volley加载图片有两种方式:
  1,ImageRequest 来对网络图片进行请求,放入请求队列,获取后现在在控件上面。
  2,NetworkImageView 最为自定义控件来自动加载网络图片。

  3,imageloader,对图片大小,质量格式控制来按需加载图片。
下面分别举例子说明使用:

ImageRequest的使用来加载图片:
首先设计界面,是个Gridview来加载图片:
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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
   <GridView android:id="@+id/gvImages"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:numColumns="3"       
       android:stretchMode="columnWidth"
       android:verticalSpacing="10dp" 
       android:horizontalSpacing="10dp">       
   </GridView>
</RelativeLayout>

 

GridViewitem布局文件如下,上面是图片,下面是文字说明:

<?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" >
    <ImageView
        android:id="@+id/ivImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:contentDescription="test" />
    <TextView
        android:id="@+id/tvDesc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ivImage"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

 

 

下面是主要的图片加载的逻辑代码,流程如下:

  1,创建请求队列mQueue;
  2,创建ImageRequest 请求,并进行配置,并将请求放入请求队列mqueue中去;
  3,ImageRequest只有一个构造方法:对图片大小和图片格式进行设置;

 /**
     * Creates a new image request, decoding to a maximum specified width and
     * height. If both width and height are zero, the image will be decoded to
     * its natural size. If one of the two is nonzero, that dimension will be
     * clamped and the other one will be set to preserve the image's aspect
     * ratio. If both width and height are nonzero, the image will be decoded to
     * be fit in the rectangle of dimensions width x height while keeping its
     * aspect ratio.
     *
     * @param url URL of the image 网络图片Url
     * @param listener Listener to receive the decoded bitmap 接收网络图片的bitmap回调参数
     * @param maxWidth Maximum width to decode this bitmap to, or zero for none 宽
     * @param maxHeight Maximum height to decode this bitmap to, or zero for 高
     *            none
     * @param decodeConfig Format to decode the bitmap to 编码质量的配置
     * @param errorListener Error listener, or null to ignore errors 加载图片失败的回调
     */
    public ImageRequest(String url, Response.Listener<Bitmap> listener, int maxWidth, int maxHeight,
            Config decodeConfig, Response.ErrorListener errorListener) {
        super(Method.GET, url, errorListener);
        setRetryPolicy(
                new DefaultRetryPolicy(IMAGE_TIMEOUT_MS, IMAGE_MAX_RETRIES, IMAGE_BACKOFF_MULT));
        mListener = listener;
        mDecodeConfig = decodeConfig;
        mMaxWidth = maxWidth;
        mMaxHeight = maxHeight;
    }

 

package com.soyoungboy.volleydemo;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.Response.ErrorListener;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.ImageRequest;
import com.android.volley.toolbox.Volley;
/**
 * Volley使用demo
 * 
 * @author soyoungboy
 */
public class MainActivity extends Activity {
    private static final String[] URLS = {
        "http://img.my.csdn.net/uploads/201403/03/1393854094_4652.jpg",
        "http://img.my.csdn.net/uploads/201403/03/1393854084_6138.jpg",
        "http://img.my.csdn.net/uploads/201403/03/1393854084_1323.jpg",
        "http://img.my.csdn.net/uploads/201403/03/1393854084_8439.jpg",
        "http://img.my.csdn.net/uploads/201403/03/1393854083_6511.jpg",
    "http://img.my.csdn.net/uploads/201403/03/1393854083_2323.jpg" };
    private static final String[] DESCS = { "photo1", "photo2", "photo3",
        "photo4", "photo5", "photo6" };
    private RequestQueue mQueue;
    private GridView gvImages;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gvImages = (GridView) findViewById(R.id.gvImages);
        GridAdapter adpater = new GridAdapter();
        gvImages.setAdapter(adpater);
        mQueue = Volley.newRequestQueue(this);
    }
    class GridAdapter extends BaseAdapter {
        private LayoutInflater layoutInflater;
        public GridAdapter() {
            layoutInflater = LayoutInflater.from(MainActivity.this);
        }
        @Override
        public int getCount() {
            return URLS.length;
        }
        @Override
        public Object getItem(int position) {
            return URLS[position];
        }
        @Override
        public long getItemId(int position) {
            return position;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder;
            if (convertView == null) {
                viewHolder = new ViewHolder();
                convertView = layoutInflater.inflate(R.layout.grid_item, null);
                viewHolder.ivImage = (ImageView) convertView
                        .findViewById(R.id.ivImage);
                viewHolder.tvDesc = (TextView) convertView
                        .findViewById(R.id.tvDesc);
                convertView.setTag(viewHolder);
            } else {
                viewHolder = (ViewHolder) convertView.getTag();
            }
            loadImgByVolley(URLS[position], viewHolder.ivImage);
            viewHolder.tvDesc.setText(DESCS[position]);
            return convertView;
        }
    }
    static class ViewHolder {
        ImageView ivImage;
        TextView tvDesc;
    }
    public void loadImgByVolley(String imgUrl, final ImageView imageView) {
        ImageRequest imgRequest = new ImageRequest(imgUrl,
                new Response.Listener<Bitmap>() {
            /**
             * 加载成功
             * @param arg0
             */
            @Override
            public void onResponse(Bitmap arg0) {
                imageView.setImageBitmap(arg0);
            }
        }, 300, 200, Config.ARGB_8888, 
        new ErrorListener() {
            //加载失败
            @Override
            public void onErrorResponse(VolleyError arg0) {
                imageView.setImageResource(R.drawable.ic_launcher);
            }
        });
        //将图片加载放入请求队列中去
        mQueue.add(imgRequest);
    }
}

 

效果:

NetworkImageView加载图片:
首先在布局中使用NetWorkImageView:

<?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" >
    <com.android.volley.toolbox.NetworkImageView 
        android:id="@+id/load_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</RelativeLayout>

 

java代码里面实现:

package com.soyoungboy.volleydemo;
import android.app.Activity;
import android.os.Bundle;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.NetworkImageView;
import com.android.volley.toolbox.Volley;
public class NetworkImageViewActivity extends Activity {
    private NetworkImageView load_img;
    private ImageLoader imageLoader;
    private RequestQueue requestQueue;
    private LruImageCache lruImageCache;
    private static final String IMGURL = "http://imgsrc.baidu.com/forum/w%3D580/sign=f96acdfc08f79052ef1f47363cf1d738/cb2fc65c10385343223c39ce9213b07ecb808870.jpg";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_networkimageview);
        load_img = (NetworkImageView) findViewById(R.id.load_img);
        lruImageCache = LruImageCache.getInstance();
        requestQueue = Volley.newRequestQueue(this);
        imageLoader = new ImageLoader(requestQueue, lruImageCache);
        load_img.setImageUrl(IMGURL, imageLoader);
    }
}

 

LruImageCache.java缓存类:

package com.soyoungboy.volleydemo;

import android.graphics.Bitmap;
import android.support.v4.util.LruCache;

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

public class LruImageCache implements ImageCache{

    private static LruCache<String, Bitmap> mMemoryCache;
    
    private static LruImageCache lruImageCache;
    
    private LruImageCache(){
        // Get the Max available memory
        int maxMemory = (int) Runtime.getRuntime().maxMemory();
        int cacheSize = maxMemory / 8;
        mMemoryCache = new LruCache<String, Bitmap>(cacheSize){
            @Override
            protected int sizeOf(String key, Bitmap bitmap){
                return bitmap.getRowBytes() * bitmap.getHeight();
            }
        };        
    }
    
    public static LruImageCache getInstance(){
        if(lruImageCache == null){
            lruImageCache = new LruImageCache();
        }
        return lruImageCache;
    }
    
    @Override
    public Bitmap getBitmap(String arg0) {        
        return mMemoryCache.get(arg0);    
    }

    @Override
    public void putBitmap(String arg0, Bitmap arg1) {
        if(getBitmap(arg0) == null){
            mMemoryCache.put(arg0, arg1);
        }        
    }

}

 


其中LruImageCache是个Lru算法类,主要用于处理缓存的大小问题,可以避免加载图片的时候oom的问题,ImaageLoader是volley提供的另外一种加载图片的方式。最后通过setImageUrl(String url, ImageLoader imageLoader)来进行加载。
NetworkImageView的优势在于他能够根据组件的大小自动进行图片的大小缩放处理。后面文章会在源码分析中进行讲解。
效果:

ImageLoader加载图片:
帮我们对图片进行缓存,还可以过滤掉重复的链接,避免重复发送请求。
  1,创建请求队列;
  2,创建imageloader对象,其中imageloader的构造方法第二个参数为imageCache的实现类,实现图片缓存的算法类。
  3,创建imagelistener对象,主要设置图片加载失败和加载过程中的图片设置。
界面如上面第一个的界面activity_main.xml;
这里主要看下逻辑:

package com.soyoungboy.volleydemo.activity;
import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.ImageLoader.ImageListener;
import com.android.volley.toolbox.Volley;
import com.soyoungboy.volleydemo.LruImageCache;
import com.soyoungboy.volleydemo.R;
public class ImageLoaderActivity extends Activity {
    private GridView gvImages;
    private static final String[] URLS = {
        "http://img.my.csdn.net/uploads/201403/03/1393854094_4652.jpg",
        "http://img.my.csdn.net/uploads/201403/03/1393854084_6138.jpg",
        "http://img.my.csdn.net/uploads/201403/03/1393854084_1323.jpg",
        "http://img.my.csdn.net/uploads/201403/03/1393854084_8439.jpg",
        "http://img.my.csdn.net/uploads/201403/03/1393854083_6511.jpg",
    "http://img.my.csdn.net/uploads/201403/03/1393854083_2323.jpg" };
    private static final String[] DESCS = { "photo1", "photo2", "photo3",
        "photo4", "photo5", "photo6" };
    private RequestQueue mQueue;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gvImages = (GridView) findViewById(R.id.gvImages);
        mQueue = Volley.newRequestQueue(this);
        GridAdapter adpater = new GridAdapter();
        gvImages.setAdapter(adpater);
    }
    class GridAdapter extends BaseAdapter {
        private LayoutInflater layoutInflater;
        private ImageLoader imageLoader;
        public GridAdapter() {
            layoutInflater = LayoutInflater.from(ImageLoaderActivity.this);
            imageLoader = new ImageLoader(mQueue, LruImageCache.getInstance());
        }
        @Override
        public int getCount() {
            return URLS.length;
        }
        @Override
        public Object getItem(int position) {
            return URLS[position];
        }
        @Override
        public long getItemId(int position) {
            return position;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder;
            if (convertView == null) {
                viewHolder = new ViewHolder();
                convertView = layoutInflater.inflate(R.layout.grid_item, null);
                viewHolder.ivImage = (ImageView) convertView
                        .findViewById(R.id.ivImage);
                viewHolder.tvDesc = (TextView) convertView
                        .findViewById(R.id.tvDesc);
                convertView.setTag(viewHolder);
            } else {
                viewHolder = (ViewHolder) convertView.getTag();
            }
            loadImgByVolley(URLS[position], viewHolder.ivImage);
            viewHolder.tvDesc.setText(DESCS[position]);
            return convertView;
        }
        private void loadImgByVolley(String string, ImageView ivImage) {
            ImageListener listener = ImageLoader.getImageListener(ivImage,
                    R.drawable.ic_launcher, R.drawable.ic_launcher);
            imageLoader.get(string, listener);
        }
    }
    static class ViewHolder {
        ImageView ivImage;
        TextView tvDesc;
    }
}

 

界面效果:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《用友ERP-U8完全使用详解》—— 导读
随着全球商业化发展,企业与企业之间的竞争日益激烈,如何寻找利润突破口时常摆在企业的会议桌上,从营销模式的改变、成本的控制、管理工具的使用都希望实现利润的提升。
2006 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18435 0
UIBezierPath 的使用介绍
<span style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> </span><wbr style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"><span style="
1106 0
一个不使用CRM中间件成功地将ERP Material下载到CRM的原型开发
一个不使用CRM中间件成功地将ERP Material下载到CRM的原型开发
19 0
新版 VolumeSnapshot 使用注意事项
基础文档: https://developer.aliyun.com/article/757325 背景: csi-plugin 插件于近期进行一次重大升级,升级到最新版本的 csi-plugin 镜像在使用 VolumeSnapshot 的时候需要做模板上的变更。 使用 csi-plugin:v1.14.8.42-9451f619-aliyun 以及以上版本的镜像需要参照如下内容对模板进行
297 0
+关注
西北野狼
擅长Android ,J2EE开发 博客园地址:http://www.cnblogs.com/androidsuperman/p/7834762.html github地址: https://github.com/soyoungboy
463
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载