Android ListView性能優化實例講解

前言:

  對於ListView,你們絕對都不會陌生,只要是作過Android開發的人,哪有不用ListView的呢?html

  只要是用過ListView的人,哪有不關心對它性能優化的呢?java

  關於如何對ListView進行性能優化,不只是面試中經常會被問到的(我前段時間面試了幾家公司,所有都問到了這個問題了),並且在實際項目中更是很是重要的一環,它甚至在某種程度上決定了用戶是否喜歡接受你的APP。(若是你的列表滑起來很卡,我敢說不少人會直接卸載)android

  網上關於如何對ListView進行性能優化,提出了不少方案。可是我搜過不少資料,卻感受不少文章都寫得比較模糊,沒有代碼說明,讓我感到很累。要知道能給程序員最直接感官刺激的,固然是代碼啦!!!git


1、Listview 性能優化方案

  1).複用convertView程序員

    在getItemView中,判斷convertView是否爲空,若是不爲空,可複用。若是couvertview中的view須要添加listerner,代碼必定要在if(convertView==null){}以外。github

  2).異步加載圖片web

    item中若是包含有webimage,那麼最好異步加載面試

  3).快速滑動時不顯示圖片json

    當快速滑動列表時(SCROLL_STATE_FLING),item中的圖片或獲取須要消耗資源的view,能夠不顯示出來;而處於其餘兩種狀態(SCROLL_STATE_IDLE 和SCROLL_STATE_TOUCH_SCROLL),則將那些view顯示出來api


2、實戰講解如何優化ListView

    2.1 咱們先定義一個ListView

<ListView
        android:id="@+id/listview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:divider="#7A7A7A"
        android:dividerHeight="10dp"
        />

    2.2 而後咱們去寫一個網絡請求,獲取網絡的json字符串。

    這裏,咱們用到xutils框架的httputil,經過它,能夠很方便的進行網絡請求。 至於請求的url,咱們使用慕課網提供的視頻數據列表接口「http://www.imooc.com/api/teacher?type=4&num=30」。先讓咱們看下我寫的一個HTTP請求的工具類:

import android.content.Context;

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.HttpMethod;
import com.lidroid.xutils.util.LogUtils;

/**
 * 網絡請求工具類
 *
 * @author lining
 */
public class HttpUtil {
    /**
     * 請求的根URL地址
     */
    public static final String BASE_URL = "http://www.imooc.com/api/teacher?type=4&num=50";

    public static void sendRequest(final Context context,
                                   final HttpMethod method, RequestParams params,
                                   final IOAuthCallBack iOAuthCallBack) {
        HttpUtils http = new HttpUtils();

        http.configCurrentHttpCacheExpiry(1000 * 5);
        // 設置超時時間
        http.configTimeout(5 * 1000);
        http.configSoTimeout(5 * 1000);

        if (method == HttpMethod.GET) {
            http.configCurrentHttpCacheExpiry(5000); // 設置緩存5秒,5秒內直接返回上次成功請求的結果。
        }

        http.send(method, BASE_URL, params,
                new RequestCallBack<String>() {

                    @Override
                    public void onStart() {
                        LogUtils.d(method.name() + " request is onStart.......");
                    }

                    @Override
                    public void onSuccess(ResponseInfo<String> responseInfo) {
                        LogUtils.d("statusCode:" + responseInfo.statusCode + " ----->" + responseInfo.result);
                        iOAuthCallBack.getIOAuthCallBack(responseInfo.result);// 利用接口回調數據傳輸
                    }

                    @Override
                    public void onFailure(HttpException error, String msg) {
                        LogUtils.d("statusCode:" + error.getExceptionCode() + " -----> " + msg);
                        iOAuthCallBack.getIOAuthCallBack("FF");// 利用接口回調數據傳輸
                    }
                });
    }
}
  工具類其實並無啥特別之處,無非就是利用Xutils框架的HttpUtil發送網絡請求,獲取數據。 方法參數裏,咱們加入了一個IOAuthCallBack回調接口,該接口主要用戶在Activity和工具類之間回調請求結果數據。

/**
 * 數據請求回調接口
 */
public interface IOAuthCallBack
{
    // 成功
    public void getIOAuthCallBack(String result);
}

    下面,咱們Activity發送一個網絡請求,獲取json數據,並回調處理:

 private void qryDataFromServer() {
        HttpUtil.sendRequest(this, HttpRequest.HttpMethod.GET, null, this);
    }

    @Override
    public void getIOAuthCallBack(String result) {

        RspData rspData = GsonUtil.getGson().fromJson(result, RspData.class);
        // 更新UI列表

        KechengAdapter mAdapter = new KechengAdapter(this, rspData.data);
        listview.setAdapter(mAdapter);
    }


這裏關於json數據的解析使用的GSON,無啥特別說明之處,把實體類的代碼貼出來看下:

public class RspData {
    public String status;
    public List<KeCheng> data;
    public String msg;
}

public class KeCheng {

    public String id;

    public String name;

    public String picSmall;

    public String picBig;

    public String description;

    public String learner;
}

    2.3 有了集合數據以後,去定義BaseAdapter

   在此以前,咱們先看下list item的佈局文件:list_item_kecheng.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/picBig"
        android:layout_width="fill_parent"
        android:layout_height="180dp"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher"
        />
    <TextView
        android:id="@+id/name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="CSS動畫實用技巧"
        android:singleLine="true"
        android:padding="10dp"
        android:textSize="15sp"
        />

    <TextView
        android:id="@+id/description"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="教你使用CSS實現驚豔的動畫效果!"
        android:textSize="12sp"
        android:lines="2"
        android:padding="10dp"
        />

</LinearLayout>


  接下來,讓咱們好好看看Adapter是如何定義的:

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

import java.util.List;

public class KechengAdapter extends BaseAdapter {

    private Context mContext;

    private LayoutInflater mInflater;

    private List<KeCheng> mDatas;

    public KechengAdapter(Context context, List<KeCheng> datas) {
        mContext = context;
        mInflater = LayoutInflater.from(mContext);
        mDatas = datas;
    }

    @Override
    public int getCount() {
        return (mDatas != null ? mDatas.size() : 0);
    }

    @Override
    public Object getItem(int position) {
        return (mDatas != null ? mDatas.get(position) : null);
    }

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

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.list_item_kecheng, null);

            holder = new ViewHolder();
            holder.picBig = (ImageView) convertView.findViewById(R.id.picBig);
            holder.name = (TextView) convertView.findViewById(R.id.name);
            holder.description = (TextView) convertView.findViewById(R.id.description);

            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        final KeCheng keCheng = mDatas.get(position);

        if (keCheng != null) {
            ImageLoaderUtil.getInstance().displayListItemImage(keCheng.picBig, holder.picBig);
            holder.name.setText(keCheng.name);
            holder.description.setText(keCheng.description);

        }
        return convertView;
    }

    static class ViewHolder {

        ImageView picBig;

        TextView name;

        TextView description;
    }
}

   ListView性能優化的重點就是如何去處理BaseAdapter,且看上面的代碼,咱們在getView中,判斷convertView是否爲空,若是不爲空,可複用。如何複用的呢?

  咱們經過convertview的setTag方法和getTag方法來將咱們要顯示的數據來綁定在convertview上。若是convertview 是第一次展現咱們就建立新的Holder對象與之綁定,並在最後經過return convertview 返回,去顯示;若是convertview 是回收來的那麼咱們就沒必要建立新的holder對象,只須要把原來的綁定的holder取出加上新的數據就好了。

   若是couvertview中的view須要添加listerner,代碼必定要在if(convertView==null){}以外。


   看代碼夠仔細的人可以發現有這麼一行代碼,ImageLoaderUtil.getInstance().displayListItemImage(keCheng.picBig, holder.picBig); 這是使用的圖片異步加載框架Universal-Image-Loader來完成對網絡圖片的異步加載、緩存,(強烈推薦使用)使用這個開源框架後,咱們就無需再爲如何加載緩存網絡圖片煩惱啦!

   快隨我一塊兒看看如何配置這個框架吧:

import android.content.Context;
import android.graphics.Bitmap;
import android.widget.ImageView;

import com.nostra13.universalimageloader.cache.disc.impl.UnlimitedDiscCache;
import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.cache.memory.impl.UsingFreqLimitedMemoryCache;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;

import java.io.File;

/**
 * 配置全局的 Android-Universal-Image-Loader
 */
public class ImageLoaderUtil {
    private static ImageLoaderUtil instance = null;

    private ImageLoader mImageLoader;

    // 列表中默認的圖片
    private DisplayImageOptions mListItemOptions;

    // 頭像圖片
    private DisplayImageOptions mUserHeadOptions;

    private ImageLoaderUtil(Context context) {
        mImageLoader = ImageLoader.getInstance();
        mListItemOptions = new DisplayImageOptions.Builder()
                // 設置圖片Uri爲空或是錯誤的時候顯示的圖片
                .showImageForEmptyUri(R.mipmap.load_default_img)
                .showStubImage(R.mipmap.load_default_img)
                        // 設置圖片加載/解碼過程當中錯誤時候顯示的圖片
                .showImageOnFail(R.mipmap.load_default_img)
                        // 加載圖片時會在內存、磁盤中加載緩存
                .cacheInMemory()
                .cacheOnDisc()
                .bitmapConfig(Bitmap.Config.RGB_565)
                .delayBeforeLoading(300)
                .build();

    }

    public static ImageLoaderUtil getInstance() {
        return instance;
    }

    public synchronized static ImageLoaderUtil init(Context context) {
        if (instance == null) {
            instance = new ImageLoaderUtil(context);
        }

        File cacheDir = context.getExternalFilesDir("news/pictures");
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context).threadPriority(
                Thread.NORM_PRIORITY - 2).denyCacheImageMultipleSizesInMemory()
                // .imageDownloader(imageDownloader).imageDecoder(imageDecoder)
                .discCacheFileNameGenerator(new Md5FileNameGenerator()).tasksProcessingOrder(QueueProcessingType.LIFO).memoryCacheExtraOptions(
                        360, 360).memoryCache(new UsingFreqLimitedMemoryCache(4 * 1024 * 1024)).discCache(
                        new UnlimitedDiscCache(cacheDir)).build();
        // Initialize ImageLoader with configuration.
        ImageLoader.getInstance().init(config);

        return instance;
    }

    /**
     * 列表圖片
     *
     * @param uri
     * @param imageView
     */
    public void displayListItemImage(String uri, ImageView imageView) {
        String strUri = (isEmpty(uri) ? "" : uri);
        mImageLoader.displayImage(strUri, imageView, mListItemOptions);
    }

    public ImageLoader getImageLoader() {
        return mImageLoader;
    }

    private boolean isEmpty(String str) {
        if (str != null && str.trim().length() > 0 && !str.equalsIgnoreCase("null")) {
            return false;
        }
        return true;
    }
}


   這是我寫好的一個Universal-Image-Loader的工具類,之後能夠直接使用它進行圖片的下載緩存處理了。 固然在使用前,還須要進行初始化它,咱們推薦在Application中對其進行初始化操做:

public class MyApp extends Application {

    public static Context context;

    @Override
    public void onCreate() {
        super.onCreate();
        context = this;
        ImageLoaderUtil.init(context);
    }
}
   

    2.4 處理快速滑動時暫停加載圖片

     咱們知道,當快速滑動列表時(SCROLL_STATE_FLING),item中的圖片獲取須要消耗資源的View,能夠不顯示出來(由於滑動的過快,咱們也不須要看圖片啊);而處於其餘兩種狀態(SCROLL_STATE_IDLE 和SCROLL_STATE_TOUCH_SCROLL),則將那些view顯示出來。

     那如何實現呢? 這裏我仍是推薦使用Universal-Image-Loader已經爲你們封裝好了的方法,(固然,別的框架,如Xutils也封裝了相關的方法)。Universal-Image-Loader框架的com.nostra13.universalimageloader.core.assist.PauseOnScrollListener監聽器已經封裝了對滾動時圖片處理的監聽,咱們只須要在爲ListView組件設置滾動監聽的時候,把PauseOnScrollListener的實例傳入便可。這裏,有必要讓你們先看下PauseOnScrollListener的源碼:

public class PauseOnScrollListener implements OnScrollListener {
    private ImageLoader imageLoader;
    private final boolean pauseOnScroll;
    private final boolean pauseOnFling;
    private final OnScrollListener externalListener;

    public PauseOnScrollListener(ImageLoader imageLoader, boolean pauseOnScroll, boolean pauseOnFling) {
        this(imageLoader, pauseOnScroll, pauseOnFling, (OnScrollListener)null);
    }

    public PauseOnScrollListener(ImageLoader imageLoader, boolean pauseOnScroll, boolean pauseOnFling, OnScrollListener customListener) {
        this.imageLoader = imageLoader;
        this.pauseOnScroll = pauseOnScroll;
        this.pauseOnFling = pauseOnFling;
        this.externalListener = customListener;
    }

    public void onScrollStateChanged(AbsListView view, int scrollState) {
        switch(scrollState) {
        case 0:
            this.imageLoader.resume();
            break;
        case 1:
            if(this.pauseOnScroll) {
                this.imageLoader.pause();
            }
            break;
        case 2:
            if(this.pauseOnFling) {
                this.imageLoader.pause();
            }
        }

        if(this.externalListener != null) {
            this.externalListener.onScrollStateChanged(view, scrollState);
        }

    }

    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if(this.externalListener != null) {
            this.externalListener.onScroll(view, firstVisibleItem, visibleItemCount, totalItemCount);
        }

    }
}
    你們能夠看到, PauseOnScrollListener實現了OnScrollListener接口,這也就是剛剛爲啥說能夠把PauseOnScrollListener的實例設置到ListView監聽器的緣由。PauseOnScrollListener有兩個重要的構造方法,其中參數pauseOnScroll控制咱們緩慢滑動ListView,GridView是否中止加載圖片,pauseOnFling 控制猛的滑動ListView,GridView是否中止加載圖片。而另外一個參數OnScrollListener customListener則能夠用於留給開發者繼續回處處理相應的滑動監聽事件,好比列表是否滑動到了最後等等。

      知道了如何利用PauseOnScrollListener,那咱們在Activity之中只須要設置一句簡單的監聽代碼便可:

listview.setOnScrollListener(new PauseOnScrollListener(ImageLoaderUtil.getInstance().getImageLoader(), false, true));

      如何你的項目須要下來刷新或者是滑動加載等功能,你又必須提供滑動事件的回調參數:

listview.setOnScrollListener(new PauseOnScrollListener(ImageLoaderUtil.getInstance().getImageLoader(), false, true, onScrollListener));
 private AbsListView.OnScrollListener onScrollListener = new AbsListView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {
            switch (scrollState) {
                case AbsListView.OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:
                    // 觸摸後滾動
                    break;

                case AbsListView.OnScrollListener.SCROLL_STATE_FLING:
                    // 滾動狀態
                    break;

                case AbsListView.OnScrollListener.SCROLL_STATE_IDLE:
                    // 空閒狀態
                    if (view.getLastVisiblePosition() == view.getCount() - 1) {
                        System.out.println("************滾動到了最後一個***************");
                    }
                    break;
            }
        }
        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

        }
    };

好啦,這樣作出的ListView已經很完美了,讓咱們欣賞下它的效果吧:




結束語:

    本文主要經過三個方面:一、複用convertView;二、異步加載圖片; 三、ListView快速滑動時不顯示圖片介紹瞭如何對ListView進行性能優化,這是最多見也是最重要的三個方面,建議你們務必將其使用在本身項目的開發中,以提升列表的易用性!

     固然,文章還提到了兩個第三方框架的使用:Xutils和Universal-Image-Loader,這是兩個很是使用的框架,建議你們也能學習下。

    若是你們還有別的優化方案,建議提出來,共同窗習,共同進步。


源碼下載地址:http://download.csdn.net/detail/zuiwuyuan/9055795

Gitub下載地址:https://github.com/zuiwuyuan/ListViewOptimized

相關文章
相關標籤/搜索