使用GridView显示网络图片
目的：
显示多行两列的网格图片列表，图片资源来源于服务器。
思路：
1. 布局组件儿，使用ABSListview的子类，常用的是有Listview GridView，因为要显示多列，所以使用GridView。本例中用的是5行2列的GridView，一共十个图片，对应的是十个url。
2. 图片来源于服务器，要从服务器下载图片，用到了Http协议，android java有一些比较优秀的http库，这里用的okhttp3，还有okhttputil。因我初学android，想摸索一下，暂时不用任何开源库，想根据自己的思路来做，如果用到GridView显示网络图片，最直观的想法就是用GridView和BaseAdapter搭配来显示，在BaseAdapter的
public View getView(final int position, View convertView, ViewGroup parent) ；在getView中从网络下载图片，然后渲染要返回的图片，最后返回这个ImageView。
下面粘贴部分代码：
public static byte[] getImage(String path) throws Exception {
URL url = new URL(path);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
// 设置连接超时为5秒
conn.setConnectTimeout(5000);
// 设置请求类型为Get类型
conn.setRequestMethod("GET");
// 判断请求Url是否成功
if (conn.getResponseCode() != 200) {
throw new RuntimeException("请求url失败");
}
InputStream inStream = conn.getInputStream();
byte[] bt = StreamTool.read(inStream);
inStream.close();
return bt;
}
public class homepageview extends AppCompatActivity {
static final private String TAG = "homepageview";
private GridView GlobalPrevGridview = null;
private Context curcontext;
private final static String HTML_JSON="http://101.200.213.137/weibov1/getHotWeibolist?T=NjllY2Y5OWU3NjRkNTA2ZDhjNjFiNzFlNmIxMGZjMDA&page=1&Q=VDJnNVJFNWxURkp4TUM5M2VIWlJiRUZUZGk5eE0yRktVMEU9";
private hotweibolist homepiclist;//Json数据对应的结构体
private Bitmap bitmapfactory[];
private ImageView pageviews[];
private int[] imageIds = new int[10];
/*图片渲染在Handler中执行,因为如果直接在GridView的adapter的getView中请求URL并渲染返回的图片,按照现在的做法，会导致app界面上的图片多次刷,因为一个position对应一个url，对应一个图片，而在拖动GridView滑动列表的时候，这个position变化快，而网络下载图片可能会比较慢，也就会出现滑动一次列表，调用了多次下载，下载完成后就渲染，而这个时候渲染的内容未必跟当前的position是对应的，然后接着继续下载渲染，下载渲染。》*/
private Handler myuihandler=new Handler(){
public void handleMessage(Message msg){
switch (msg.what){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 9:
int pos=msg.what;
if(null==pageviews[pos]){
pageviews[pos]=new ImageView(curcontext);
}
pageviews[pos].setImageBitmap(bitmapfactory[pos]);
pageviews[pos].setMaxHeight(640);
pageviews[pos].setMaxWidth(480);
pageviews[pos].setMinimumHeight(640);
pageviews[pos].setMinimumWidth(480);
break;
}
}
};
public void onCreate(Bundle savedInstanceState) {
setTheme(R.style.mydefstyle);
super.onCreate(savedInstanceState);
curcontext=this;
//设置当前的Activity的界面布局
setContentView(R.layout.yujiahomepage);
pageviews=new ImageView[10];
bitmapfactory=new Bitmap[10];
showimage=new ImageView(curcontext);
assigned_ids();
drawinit();
}
private void assigned_ids() {
homepageviewlistbottom = (GridView) findViewById(R.id.homepagebottomGview);
}
/*Gridview 初始化*/
private int drawuserpicfromcloud() {
GlobalPrevGridview=(GridView)findViewById(R.id.homepagecloudpics);
GridViewAdapter gridViewAdapter = new GridViewAdapter();
GlobalPrevGridview.setAdapter(gridViewAdapter);
// 为GridView设定监听器
GlobalPrevGridview.setOnItemClickListener(new gridViewListener());
return 0;
}
private class gridViewListener implements AdapterView.OnItemClickListener {
@Override
public void onItemClick(AdapterView arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub
System.out.println("arg2 = " + arg2); // 打印出点击的位置
}
}
private class GridViewAdapter extends BaseAdapter {
class ViewHoldwe {
private ImageView iv_url;
};
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
if(null==pageviews[position]){
pageviews[position]=new ImageView(curcontext);
}
Log.d(TAG,"getView position " + position);
if(null==homepiclist){
Log.d(TAG,"homepiclist is null");
}else if(null==homepiclist.data){
Log.d(TAG,"homepiclist.data is null");
}else if(null==homepiclist.data.weibo[position]){
Log.d(TAG,"homepiclist.data.weibo[" +position +"] is null");
}else if(null==homepiclist.data.weibo[position].picinfo[0]){
Log.d(TAG,"homepiclist.data.weibo[" +position +"].picinfo[0] is null");
}else if(null==homepiclist.data.weibo[position].picinfo[0].pic_url){
Log.d(TAG,"homepiclist.data.weibo[" +position +"].picinfo[0].pic_url is null");
}else {
new Thread() {
public void run() {
try {
byte[] data = com.example.xxxxx.yujiadenglu.socket_http.
Hal_urlconnect.getImage(homepiclist.data.weibo[position].picinfo[0].pic_url);
bitmapfactory[position] = BitmapFactory.decodeByteArray(data, 0, data.length);
} catch (Exception e) {
e.printStackTrace();
}
myuihandler.sendEmptyMessage(position);
}
}.start();
}
if (convertView == null)
{
}
else
{
pageviews[position] = (ImageView)convertView;
}
//pageviews[position].setImageBitmap(bitmapfactory[position]);
pageviews[position].setMaxHeight(640);
pageviews[position].setMaxWidth(480);
pageviews[position].setMinimumHeight(640);
pageviews[position].setMinimumWidth(480);
//imageView.setImageResource(imageIds[position]);
// pageviews[position].setImageDrawable(showimage.getDrawable());
return pageviews[position];
}
/*
* 功能：获得当前选项的ID
*
* @see android.widget.Adapter#getItemId(int)
*/
@Override
public long getItemId(int position) {
return position;
}
/*
* 功能：获得当前选项
*
* @see android.widget.Adapter#getItem(int)
*/
@Override
public Object getItem(int position) {
return position;
}
/*
* 获得数量
*
* @see android.widget.Adapter#getCount()
*/
@Override
public int getCount() {
return imageIds.length;
}
}
private void drawinit() {
drawuserpicfromcloud();
}
......
}运行效果:
图片位置跟postion不对应。
原因：
1. 能访问到图片资源，但是出现过访问失败的情况。
2. http下载图片的方式 需要优化
下面分析一下http部分：
其中com.example.xxxxx.yujiadenglu.socket_http.
Hal_urlconnect.getImage的代码如下：
public class Hal_urlconnect {
static hotweibolist retlist;
public static byte[] getImage(String path) throws Exception {
URL url = new URL(path);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
// 设置连接超时为5秒
conn.setConnectTimeout(5000);
// 设置请求类型为Get类型
conn.setRequestMethod("GET");
// 判断请求Url是否成功
if (conn.getResponseCode() != 200) {
throw new RuntimeException("请求url失败");
}
InputStream inStream = conn.getInputStream();
byte[] bt = StreamTool.read(inStream);
inStream.close();
return bt;
}没有使用任何框架，改用如果okhttp3是否能好一些呢？下面使用Okhttp3的同步get方式
public class Hal_okhttp {
private static final String TAG="Hal_okhttp";
/* okhttp3 同步 Get方法 */
//同步get方式提交
static byte[] okhttp_syncget(String urlstr) throws IOException{
OkHttpClient mOkHttpClient = new OkHttpClient();
Request request = new Request.Builder()
.url(urlstr)
.build();
Call call = mOkHttpClient.newCall(request);
Response mResponse=call.execute();
if (mResponse.isSuccessful()) {
return mResponse.body().bytes();
} else {
throw new IOException("Unexpected code " + mResponse);
}
}
}没有明显改善，感觉访问网络失败的次数少了，但还是图片位置不对应。
下面改成okhttp3的异步get方式。
/* 以最新的okhttp3为例。
1. Http-GET
1) OkHttpClient：新建一个OkHttpClient实例，用于处理请求。
2) Request：构建请求参数，如url，请求方式，请求参数，header等。
3) Call：生成一个具体请求实例，相当于将请求封装成了任务；两种方式：
①、call.execute()，非异步方式，会阻塞线程，等待返回结果。
②、call.enqueue(Callback)，异步方式。
onResponse回调的参数是response，
一般情况下，比如我们希望获得返回的字符串，可以通过response.body().string()获取；
如果希望获得返回的二进制字节数组，则调用response.body().bytes()；
如果你想拿到返回的inputStream，则调用response.body().byteStream()。
*/
public void okHttp_AsynGet(String urlstr) {
OkHttpClient mOkHttpClient=new OkHttpClient();
Request.Builder requestBuilder = new Request.Builder().url(urlstr); //可以省略，默认是GET请求
Request request = requestBuilder.build();
Call mcall= mOkHttpClient.newCall(request);
mcall.enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
Log.d(TAG,"getAsynHttp onFailure");
} @Override
public void onResponse(Call call, Response response) throws IOException {
if ( response.isSuccessful()) {
String str = response.body().string();
Log.i(TAG, "response.body().string---" + str);
} else {
response.body().string();
String str = response.networkResponse().toString();
Log.i(TAG, "network---" + str);
}
}
});
}
上述是okhttp异步获取数据的步骤。我们只能从call.enqueue(Callback)中的Callback的onResponse中拿数据，根据这些数据做其他的操作。
如果每次调用一次okhttp3的异步get，都要写new OkHttpClient();
newCall、Call中的回调函数，会显得很繁琐。
所以改为下列方式：
1. 一个单例okhttp
2. 在okhttp的数据回调函数中，把数据传给调用线程，这需要在主线程传给okhttp层函数一个函数指针，或者接口。
/*因为从网络端获取资源，图片可以转成数组，json数据又可以转成string，okhttps的异步Callback的onResponse的参数Response可以获取bytes、string，但如果每次都写一遍new Callback的话会很繁琐*/
//首先声明一个接口
public interface hal_okhttp3resp {
/**响应失败*/
void onReqFailed(String errorMsg);
/*获取返回的字符串*/
void onReqStrSuccess(String str);
/*获取返回的byte[]*/
void onReqBytearraySuccess(byte[] str);
}
/*单例*/
/**
* 获取单例引用
*/
private static final String TAG="Hal_okhttp";
private static volatile Hal_okhttp mInstance=null;//单例引用
private OkHttpClient mOkHttpClient;//okHttpClient实例
private android.os.Handler okHttpHandler;//全局处理子线程和主线程通信
public static Hal_okhttp getInstance(Context context) {
if (mInstance == null) {
synchronized (Hal_okhttp.class) {
if (mInstance == null) {
mInstance = new Hal_okhttp(context);
}
}
}
return mInstance;
}
/**
* 初始化OkHttpManager
*/
private Hal_okhttp(Context context) {
//初始化OkHttpClient
mOkHttpClient = new OkHttpClient().newBuilder()
.connectTimeout(10, TimeUnit.SECONDS)//设置超时时间
.readTimeout(10, TimeUnit.SECONDS)//设置读取超时时间
.writeTimeout(10, TimeUnit.SECONDS)//设置写入超时时间
.build();
//初始化Handler
okHttpHandler = new Handler(context.getMainLooper());
}
/*在okhttp的操作函数中，调用这几个接口*/
public int hal_okhttp3asyngetstring(String url, final hal_okhttp3resp calstr) {
try {
final Request request = new Request.Builder()
.url(url)
.build();
Call call = mOkHttpClient.newCall(request);
call.enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
Log.d(TAG,"访问失败");
}
@Override
public void onResponse(Call call, Response response) throws IOException {
if (response.isSuccessful()) {
calstr.onReqStrSuccess(response.body().string());
} else {
Log.d(TAG,"服务器错误");
}
}
});
return 0;
}catch (Exception e){
e.printStackTrace();
}
return -1;
}
/**getAsynHttp
* okHttp get异步请求
* @param url 接口地址
* @param calstr 请求返回数据回调，参数类型是byte数组
* @return
*/
public int hal_okhttp3asyngetbytes(String url, final hal_okhttp3resp calstr) {
try {
final Request request = new Request.Builder()
.url(url)
.build();
Call call = mOkHttpClient.newCall(request);
call.enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
Log.d(TAG,"访问失败");
}
@Override
public void onResponse(Call call, Response response) throws IOException {
if (response.isSuccessful()) {
calstr.onReqBytearraySuccess(response.body().bytes());
} else {
Log.d(TAG,"服务器错误");
}
}
});
return 0;
}catch (Exception e){
e.printStackTrace();
}
return -1;
}接下来在主线程调用：
Hal_okhttp hero=Hal_okhttp.getInstance(curcontext);
hero.hal_okhttp3asyngetbytes(homepiclist.data.weibo[position].picinfo[0].pic_url, new hal_okhttp3resp<byte[]>() {
@Override
public void onReqSuccess(byte[] result) {
Log.d(TAG, "hal_okhttp3asynget onReqSuccess");
bitmapfactory[position] = BitmapFactory.decodeByteArray(result, 0, result.length);
pageviews[position].setImageBitmap(bitmapfactory[position]);
}
@Override
public void onReqFailed(String errorMsg) {
Log.d(TAG, "onReqFailed");
}
public void onReqStrSuccess(String str){
}
/*获取返回的byte[]*/
public void onReqBytearraySuccess(byte[] result){
bitmapfactory[position] = BitmapFactory.decodeByteArray(result, 0, result.length);
myuihandler.sendEmptyMessage(position);
//pageviews[position].setImageBitmap(bitmapfactory[position]);
}
});
hero.hal_okhttp3asyngetstring(HTML_JSON,new hal_okhttp3resp<byte[]>(){
@Override
public void onReqSuccess(byte[] result) {
Log.d(TAG, "hal_okhttp3asynget onReqSuccess");
}
@Override
public void onReqFailed(String errorMsg) {
Log.d(TAG, "onReqFailed");
}
public void onReqStrSuccess(String result){
Log.d(TAG,"form " + HTML_JSON +" get : " + result);
}
/*获取返回的byte[]*/
public void onReqBytearraySuccess(byte[] result){
}
});
}
}
} 接下来看看效果，依然很差，下一章用库试试。