Android代碼優化----PullToRefresh+universal-image-loader實現從網絡獲取數據並刷新

 

 【聲明】 

歡迎轉載，但請保留文章原始出處→_→ 

生命壹號：http://www.cnblogs.com/smyhvae/

文章來源：http://www.cnblogs.com/smyhvae/p/4488049.html

聯系方式：[e-mail] 

 效果圖：（gif圖太大了，有點卡，建議將圖片保存到本地查看或者直接本文末尾的源碼查看gif圖）

加載網絡圖片我們用universal-image-loader，然后實現ListView的上拉下拉刷新我們用PullToRefresh。下面開始寫代碼。

整個代碼的工程文件結構如下：

• libs文件夾下是需要用到的一些庫和開源框架（這里有個picasso框架，是用來加載網絡圖片的，暫時不用哈，留着以后備用，現在這個項目用的是universal-image-loader）。
• adapter文件夾下是listView的自定義適配器（本文的重點）
• entities是從網絡獲取到json數據，解析之后，用來存放這些數據的實體
• utils文件夾下是url的常量
• MainActivity.java是主程序的入口
• MyApplication才是真正的app的第一個入口，這個不多解釋，都懂得。

一、開始寫代碼：

（1）activity_main.xml（MainActvity的布局）

<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">

    <com.handmark.pulltorefresh.library.PullToRefreshListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


    </com.handmark.pulltorefresh.library.PullToRefreshListView>
</RelativeLayout>

 

這里就放了個PullToRefreshListView，其實本質上還是個ListView

（2）item_listview.xml（ListView中單個item的布局）

<LinearLayout 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:orientation="vertical"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingTop="28dp">

        <!--作者頭像-->
        <ImageButton
            android:id="@+id/mVideoAvatarBtn"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:background="@mipmap/defaultimg"/>

        <!--昵稱-->
        <TextView
            android:id="@+id/mVideoNicknameTv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="13dp"
            android:layout_toRightOf="@+id/mVideoAvatarIv"
            android:singleLine="true"
            android:text="張三"
            android:textSize="16sp"/>

    </LinearLayout>


    <!--視頻縮略圖-->
    <ImageButton
        android:id="@+id/mVideoImgBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        />


</LinearLayout>

 

單個item中，一個是頭像，一個是文本，一個是圖片（包裹內容），其布局效果如下：

（3）MyApplication.java:

package com.smyhvae.pulltorefreshdemo;

import android.app.Application;

import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;

/**
 * Created by smyhvae on 2015/5/8.
 */
public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();


        //創建默認的ImageLoader配置參數
        ImageLoaderConfiguration configuration = new ImageLoaderConfiguration.Builder(this)
                .writeDebugLogs() //打印log信息
                .build();


        //Initialize ImageLoader with configuration.
        ImageLoader.getInstance().init(configuration);
    }

}

 

主程序一進來，我們就在onCreate()中創建ImageLoader的配置參數，並初始化到ImageLoader中。

 

（4）JavaBean的實體：

這個其實就是下面的這些實體：

這個不需要贅述，代碼略，在本文最后有源碼下載鏈接。

（5）ViewHolder.java:(ListView的萬能模板，嘿嘿)

package com.smyhvae.pulltorefreshdemo.adapter;

import android.content.Context;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by smyhvae on 2015/5/4.
 * 通用的viewHolder類
 */
public class ViewHolder {

    private SparseArray<View> mViews;
    private int mPosition;
    private View mConvertView;

    public ViewHolder(Context context, ViewGroup parent, int layoutId, int position) {
        this.mPosition = position;
        this.mViews = new SparseArray<View>();

        mConvertView = LayoutInflater.from(context).inflate(layoutId, parent, false);

        mConvertView.setTag(this);

    }

    public static ViewHolder get(Context context, View convertView, ViewGroup parent, int layoutId, int position) {
        if (convertView == null) {
            return new ViewHolder(context, parent, layoutId, position);
        } else {
            ViewHolder holder = (ViewHolder) convertView.getTag();
            holder.mPosition = position; //即時ViewHolder是復用的，但是position記得更新一下
            return holder;
        }
    }

    /*
    通過viewId獲取控件
     */
    //使用的是泛型T,返回的是View的子類
    public <T extends View> T getView(int viewId) {
        View view = mViews.get(viewId);

        if (view == null) {
            view = mConvertView.findViewById(viewId);
            mViews.put(viewId, view);
        }

        return (T) view;
    }

    public View getConvertView() {
        return mConvertView;
    }

}

 

（6）ListViewAdapter.java:（同樣是ListView的萬能模板）

package com.smyhvae.pulltorefreshdemo.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

import java.util.List;

/**
 * Created by smyhvae on 2015/5/4.
 * 通用的ListView的BaseAdapter，所有的ListView的自定義adapter都可以繼承這個類哦
 */
public abstract class ListViewAdapter<T> extends BaseAdapter {

    //為了讓子類訪問，於是將屬性設置為protected
    protected Context mContext;
    protected List<T> mDatas;
    protected LayoutInflater mInflater;
    private int layoutId; //不同的ListView的item布局肯能不同，所以要把布局單獨提取出來

    public ListViewAdapter(Context context, List<T> datas, int layoutId) {
        this.mContext = context;
        mInflater = LayoutInflater.from(context);
        this.mDatas = datas;
        this.layoutId = layoutId;
    }

    @Override
    public int getCount() {
        return mDatas.size();
    }

    @Override
    public T getItem(int position) {
        return mDatas.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //初始化ViewHolder,使用通用的ViewHolder，一樣代碼就搞定ViewHolder的初始化咯
        ViewHolder holder = ViewHolder.get(mContext, convertView, parent, layoutId, position);//layoutId就是單個item的布局

        convert(holder, getItem(position));
        return holder.getConvertView(); //這一行的代碼要注意了
    }

    //將convert方法公布出去
    public abstract void convert(ViewHolder holder, T t);

}

 

（7）【非常非常重要】VideoListViewAdapter.java:

這個才是我們的這個ListView的自定義適配器哦：

package com.smyhvae.pulltorefreshdemo.adapter;


import android.content.Context;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.smyhvae.pulltorefreshdemo.R;
import com.smyhvae.pulltorefreshdemo.entities.Video;
import com.smyhvae.pulltorefreshdemo.utils.Constants;

import java.util.List;

/**
 * Created by smyhvae on 2015/5/5.
 */


public class VideoListViewAdapter extends ListViewAdapter<Video> {


    DisplayImageOptions options;        // DisplayImageOptions是用於設置圖片顯示的類


    //MyAdapter需要一個Context，通過Context獲得Layout.inflater，然后通過inflater加載item的布局
    public VideoListViewAdapter(Context context, List<Video> datas) {
        super(context, datas, R.layout.item_listview);
    }



  /*  @Override
    public void convert(ViewHolder holder, Bean bean) {

        ((TextView) holder.getView(R.id.titleTv)).setText(bean.getTitle());
        ((TextView) holder.getView(R.id.descTv)).setText(bean.getDesc());
        ((TextView) holder.getView(R.id.timeTv)).setText(bean.getTime());
        ((TextView) holder.getView(R.id.phoneTv)).setText(bean.getPhone());

*//*
        TextView tv = holder.getView(R.id.titleTv);
        tv.setText(...);

       ImageView view = getView(viewId);
       Imageloader.getInstance().loadImag(view.url);
/*//*
    }*/

    @Override
    public void convert(ViewHolder holder, final Video video) {

        //1、作者的頭像
        ImageButton mVideoAvatarBtn = holder.getView(R.id.mVideoAvatarBtn);
        //如果用的是開源框架Picasso獲取網絡圖片，那就按照下面注釋掉這一行代碼來做。
        // load方法里的參數是請求的圖片的url。placeholder方法中的參數是說，加載圖片成功之前默認顯示的圖片
        //Picasso.with(mContext).load(Constants.CONTENT_HOST + video.getUserAvatarUrl()).placeholder(R.mipmap.ic_launcher).into(mVideoAvatarBtn);
        String imageUrl = Constants.CONTENT_HOST + video.getUserAvatarUrl();

        /*
        下面的加載網絡圖片中，用到了Android-Universal-Image-Loader框架
         */
        //顯示圖片的配置
        // 使用DisplayImageOptions.Builder()創建DisplayImageOptions
        options = new DisplayImageOptions.Builder()
                .showStubImage(R.mipmap.phone)            // 設置圖片下載期間顯示的圖片
                .showImageForEmptyUri(R.mipmap.ic_launcher)    // 設置圖片Uri為空或是錯誤的時候顯示的圖片
                .showImageOnFail(R.drawable.default_ptr_flip)        // 設置圖片加載或解碼過程中發生錯誤顯示的圖片
                .cacheInMemory(true)                        // 設置下載的圖片是否緩存在內存中
                .cacheOnDisc(true)                            // 設置下載的圖片是否緩存在SD卡中
                .imageScaleType(ImageScaleType.EXACTLY_STRETCHED)   //圖片會縮放到目標大小完全。非常重要，也就是說，這個view有多大，圖片就會縮放到多大
                .build();

        ImageLoader.getInstance().displayImage(imageUrl, mVideoAvatarBtn, options);

        //2、作者的昵稱
        TextView mVideoNicknameTv = holder.getView(R.id.mVideoNicknameTv);
        mVideoNicknameTv.setText(video.getUserNickName());


        //3、視頻的縮略圖
        ImageButton mVideoImgBtn = holder.getView(R.id.mVideoImgBtn);

       //讓縮略圖的寬度為手機屏幕的寬度，高度為手機屏幕寬度的一半。說白了，就是讓 圖片的尺寸為2:1
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                (int) (Constants.displayWidth * 0.5f + 0.5f));
        mVideoImgBtn.setLayoutParams(params);

        String PicUrl = Constants.CONTENT_HOST + video.getPicUrl();


        //Picasso.with(mContext).load(Constants.CONTENT_HOST + video.getPicUrl()).placeholder(R.mipmap.defaultimg).into(mVideoImgBtn);
        ImageLoader.getInstance().displayImage(PicUrl, mVideoImgBtn, options);


        System.out.println("---->" + video.getPicUrl());



        //跳轉到具體是哪一個視頻（即item的詳情頁）
/*        mVideoImgBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int id = video.getVideoUrl();
                mContext.startActivity(new Intent());
            }
        });*/
    }
}

 

尤其要注意第75行的屬性哦，這樣可以讓圖片縮放到當前控件的大小。（如果沒有這一行，圖片大小就是包裹內容；如果加了這一行，圖片大小就是匹配當前控件的大小，因為我在第88行設置了這個ImageButton的寬度是手機屏幕的寬度，高度是手機屏幕寬度的一半，這樣的話，不管網絡上的 圖片是多大，都能夠保證顯示出來的圖片比例是2:1）

（8）MainActivity.java:

package com.smyhvae.pulltorefreshdemo;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.DisplayMetrics;
import android.util.Log;
import android.widget.ListView;
import android.widget.Toast;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshListView;
import com.lidroid.xutils.HttpUtils;
import com.lidroid.xutils.exception.HttpException;
import com.lidroid.xutils.http.RequestParams;
import com.lidroid.xutils.http.ResponseInfo;
import com.lidroid.xutils.http.callback.RequestCallBack;
import com.lidroid.xutils.http.client.HttpRequest;
import com.smyhvae.pulltorefreshdemo.adapter.VideoListViewAdapter;
import com.smyhvae.pulltorefreshdemo.entities.ResponseObject;
import com.smyhvae.pulltorefreshdemo.entities.Video;
import com.smyhvae.pulltorefreshdemo.entities.VideoResponse;
import com.smyhvae.pulltorefreshdemo.utils.Constants;

import java.util.List;


public class MainActivity extends Activity {

    private PullToRefreshListView lv;
    private Context mContext;

    private List<Video> videoList; //用來存放視頻列表的集合

    private int page = 0;  //當前頁碼
    private int size = 10; //每頁顯示10個
    private int count = 0; //當前頁面有多少個視頻

    private VideoListViewAdapter videoListViewAdapter;




    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //第一個Activity加載進來時，我們就獲取屏幕的寬度和高度
        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        Constants.displayWidth = displayMetrics.widthPixels;
        Constants.displayHeight = displayMetrics.heightPixels;



        initView();

    }

    private void initView() {
        lv = (PullToRefreshListView) findViewById(R.id.lv);

        /*
        設置刷新的模式：
        可選值為：disabled（禁用下拉刷新），
        pullFromStart（僅支持下拉刷新），
        pullFromEnd（僅支持上拉刷新），
        both（二者都支持），
        manualOnly（只允許手動觸發）
         */
        lv.setMode(PullToRefreshBase.Mode.BOTH);  //讓這個Listview支持上拉加載更多，下拉刷新
        lv.setScrollingWhileRefreshingEnabled(true);//滾動的時候不允許刷新，要不然么會很亂
        //很重要，刷新時做回調
        lv.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener<ListView>() {
            @Override
            public void onRefresh(PullToRefreshBase<ListView> refreshView) {
                //在這里做數據加載的操作
                loadData(refreshView.getScrollY() < 0);
            }
        });

        //首次打開頁面時，延時200ms后自動加載數據
       new Handler (new Handler.Callback(){
           @Override
            public boolean handleMessage(Message msg) {
               lv.setRefreshing();
               return true;
           }
       }).sendEmptyMessageDelayed(0,200);
    }


    //如果是true表示下拉刷新，false表示上拉加載更多（如果y值小於0，說明是下拉操作）
    private void loadData(final boolean direction) {
        //http://172.24.1.49:8081/video/getVideos?apikey=  &typeid=1&page=1
        RequestParams params = new RequestParams();

        if (direction) {  //如果是上拉，那應該將page變為第一頁
            page = 1;

        } else {
            page++; //如果是下拉，就讓page加1

        }

        params.addQueryStringParameter("page", String.valueOf(page)); //默認顯示第一頁
        // params.addQueryStringParameter("size", "10"); //每頁顯示10個

        new HttpUtils().send(HttpRequest.HttpMethod.GET, Constants.VIDEO_LIST + "typeid=1&", params, new RequestCallBack<String>() {
            @Override
            public void onSuccess(ResponseInfo<String> responseInfo) {
                lv.onRefreshComplete();
                Log.d("json", "---video的json數據>" + responseInfo.result);

                //解析服務器端的json數據
                Gson gson = new GsonBuilder().create();
                ResponseObject<VideoResponse> object = gson.fromJson(responseInfo.result, new TypeToken<ResponseObject<VideoResponse>>() {
                }.getType());
/*                ResponseObject<VideoResponse> object = new GsonBuilder().create().fromJson(responseInfo.result, new TypeToken<VideoResponse>() {
                }.getType());*/
                page = Integer.parseInt(object.getResult().getPage()); //獲取服務器端返回來的當前頁碼
                count = object.getResult().getCnt(); //獲取當前頁面有多少個視頻
                Log.d("json","---當前頁面的item的個數>"+count);
                if (direction) { //下拉刷新
                    videoList = object.getResult().getVideos();  //獲取視頻信息的集合，並存放

                    videoListViewAdapter = new VideoListViewAdapter(MainActivity.this,videoList);
                    lv.setAdapter(videoListViewAdapter); //為這個listView綁定適配器

                } else {//尾部加載更多
                    videoList.addAll(object.getResult().getVideos());

                }

                if (count == 0) { //如果當前頁面已經沒有視頻了，那就告訴客戶端，不要再拉了,因為后面沒有數據了。
                    lv.setMode(PullToRefreshBase.Mode.PULL_FROM_START);
                }

            }

            @Override
            public void onFailure(HttpException e, String s) {
                lv.onRefreshComplete();//不管是請求成功還是請求失敗，我們都停止加載數據
                Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();

            }
        });

    }

} 

這個MainActivity中講到了xUtils怎樣獲取到網絡上的json數據，並用Gson解析，然后用pull to refresh處理上拉下拉刷新的邏輯，好吧，確實是快速開發，用到的框架還挺多的好伐~

 

【工程文件】

 2015-05-08-PullToRefreshDemo.rar