天天看點
傳回

ViewPager懶加載極緻優化

目錄介紹

  • 01.ViewPager簡單介紹
  • 02.ViewPager弊端分析
  • 03.ViewPager預加載
  • 04.ViewPager部分源碼
  • 05.懶加載出現問題
  • 06.如何實作預加載機制
  • 07.懶加載配合狀态管理器

呂詩禹想換個工作，渴望同行内推

  • 個人資訊
  • 感謝同行朋友，如果可以，可以直接電話聯系或者微信聯系！

好消息

  • 部落格筆記大彙總【16年3月到至今】，包括Java基礎及深入知識點，Android技術部落格，Python學習筆記等等，還包括平時開發中遇到的bug彙總，當然也在工作之餘收集了大量的面試題，長期更新維護并且修正，持續完善……開源的檔案是markdown格式的！同時也開源了生活部落格，從12年起，積累共計N篇[近100萬字，陸續搬到網上]，轉載請注明出處，謝謝！
  • 連結位址： https://github.com/yangchong211/YCBlogs
  • 如果覺得好，可以star一下，謝謝！當然也歡迎提出建議，萬事起于忽微，量變引起質變！

  • ViewPager使用一個鍵對象來關聯每一頁，而不是管理View。這個鍵用于追蹤和唯一辨別在adapter中獨立位置中的一頁。調用方法startUpdate(ViewGroup)表明ViewPager中的内容需要更改。
  • 通過調用一次或多次調用instantiateItem(ViewGroup, int)來構造頁面視圖。
  • 調用destroyItem(ViewGroup, int, Object)來取消ViewPager關聯的頁面視圖。
  • 最後，當一次更新（添加和/或移除）完成之後将會調用finishUpdate(ViewGroup)來通知adapter, 送出關聯和/或取消關聯的操作。這三個方法就是用于ViewPager使用回調的方式來通知PagerAdapter來管理其中的頁面。
  • 一個非常簡單的方式就是使用每頁視圖作為key來關聯它們自己，在方法instantiateItem(ViewGroup, int)中建立和添加它們到ViewGroup之後，傳回該頁視圖。與之相比對的方法destroyItem(ViewGroup, int, Object)實作從ViewGroup中移除視圖。當然必須在isViewFromObject(View, Object)中這樣實作：return view == object;.
  • PagerAdapter支援資料改變時重新整理界面，資料改變必須在主線程中調用，并在資料改變完成後調用方法notifyDataSetChanged(), 和AdapterView中派生自BaseAdapter相似。一次資料的改變可能關聯着頁面的添加、移除、或改變位置。ViewPager将根據adapter中實作getItemPosition(Object)方法傳回的結果，來判斷是否保留目前已經構造的活動頁面（即重用，而不完全自行構造）。

  • 普通的viewpager如果你不使用setoffscreenpagelimit(int limit)這個方法去設定預設加載數的話是會預設加載頁面的左右兩頁的，也就是說當你進入viewpager第一頁的時候第二頁和第一頁是會被一起加載的，這樣同時加載就會造成一些問題，試想我們如果設定了setoffscreenpagelimit為3的話，那麼進入viewpager以後就會同時加載4個fragment，像我們平時的項目中在這些fragment中一般都是會發送網絡請求的，也就是說我們有4個fragment同時發送網絡請求去擷取資料，這樣的結果顯而易見給使用者的體驗是不好的（如：浪費使用者流量，造成卡頓等等）。
  • 懶加載的實作弊端
    • 概念：當需要時才加載，加載之後一直保持該對象。
    • 而關于Fragment實作的PagerAdapter都沒有完全儲存其引用和狀态。FragmentPageAdapter需要重建視圖，FragmentStatePageAdapter使用狀态恢複，View都被銷毀，但是恢複的方式不同，而通常我們想得到的結果是，Fragment一旦被加載，其視圖也不會被銷毀，即不會再重新走一遍生命周期。而且ViewPager為了實作滑動效果，都是預加載左右兩側的頁面。
    • 我們通常想要實作的兩種效果：不提供滑動，需要時才構造，并且隻走一遍生命周期，避免在Fragment中做過多的狀态儲存和恢複。

  • ViewPager的預加載機制。那麼，我們可不可以設定ViewPager的預加載為0，不就解決問題了嗎？也就是代碼這樣操作： 
    vp.setOffscreenPageLimit(0);
  • 然後看一下源碼
    • 即使你設定為0，那麼還是會在裡面判斷後設為預設值1。是以這個方法是行不通的。 
    public void setOffscreenPageLimit(int limit) {
    if (limit < 1) {
        Log.w("ViewPager", "Requested offscreen page limit " + limit + " too small; defaulting to " + 1);
        limit = 1;
    }

    if (limit != this.mOffscreenPageLimit) {
        this.mOffscreenPageLimit = limit;
        this.populate();
    }

}
  • ViewPager預設情況下的加載，當切換到目前頁面時，會預設預加載左右兩側的布局到ViewPager中，盡管兩側的View并不可見的，我們稱這種情況叫預加載；由于ViewPager對offscreenPageLimit設定了限制，頁面的預加載是不可避免……
  • 初始化緩存（mOffscreenPageLimit == 1）
    • 當初始化時，目前顯示頁面是第0頁；mOffscreenPageLimit為1，是以預加載頁面為第1頁，再往後的頁面就不需要加載了（這裡的2， 3， 4頁）
  • 中間頁面緩存（mOffscreenPageLimit == 1）
    • 當向右滑動到第2頁時，左右分别需要緩存一頁，第0頁就需要銷毀掉，第3頁需要預加載，第4頁不需要加載

  • ViewPager.setAdapter方法
    • 銷毀舊的Adapter資料，用新的Adaper更新UI
    • 清除舊的Adapter，對已加載的item調用destroyItem，
    • 将自身滾動到初始位置this.scrollTo(0, 0)
    • 設定PagerObserver: mAdapter.setViewPagerObserver(mObserver);
    • 調用populate()方法計算并初始化View（這個方法後面會詳細介紹）
    • 如果設定了OnAdapterChangeListener，進行回調
  • ViewPager.populate(int newCurrentItem)
    • 該方法是ViewPager非常重要的方法，主要根據參數newCurrentItem和mOffscreenPageLimit計算出需要初始化的頁面和需要銷毀頁面，然後通過調用Adapter的instantiateItem和destroyItem兩個方法初始化新頁面和銷毀不需要的頁面！
    • 根據newCurrentItem和mOffscreenPageLimit計算要加載的page頁面，計算出startPos和endPos
    • 根據startPos和endPos初始化頁面ItemInfo，先從緩存裡面擷取，如果沒有就調用addNewItem方法,實際調用mAdapter.instantiateItem
    • 将不需要的ItemInfo移除: mItems.remove(itemIndex)，并調用mAdapter.destroyItem方法
    • 設定LayoutParams參數(包括position和widthFactor)，根據position排序待繪制的View清單：mDrawingOrderedChildren，重寫了getChildDrawingOrder方法
    • 最後一步擷取目前顯示View的焦點：currView.requestFocus(View.FOCUS_FORWARD)
  • ViewPager.dataSetChanged()
    • 當調用Adapter的notifyDataSetChanged時，會觸發這個方法，該方法會重新計算目前頁面的position，
    • 移除需要銷毀的頁面的ItemInfo對象，然後再調用populate方法重新整理頁面
    • 循環mItems（每個page對應的ItemInfo對象），調用int newPos = mAdapter.getItemPosition方法
    • 當newPos等于PagerAdapter.POSITION_UNCHANGED表示目前頁面不需要更新，不用銷毀，當newPos等于PagerAdapter.POSITION_NONE時，需要更新，移除item，調用mAdapter.destroyItem
    • 循環完成後，最後計算出顯示頁面的newCurrItem，調用setCurrentItemInternal(newCurrItem, false, true)方法更新UI（實際調用populate方法重新計算頁面資訊）
  • ViewPager.scrollToItem(int item, boolean smoothScroll, int velocity, boolean dispatchSelected)
    • 滑動到指定頁面，内部會觸發OnPageChangeListener
  • ViewPager.calculatePageOffsets(ItemInfo curItem, int curIndex, ItemInfo oldCurInfo)
    • 這個方法主要用于計算每個頁面對應ItemInfo的offset變量，這個變量用于記錄目前view在所有緩存View中（包含目前顯示頁）的索引，用于布局的時候計算該View應該放在哪個位置
    • 在populate方法中更新完頁面資料後，會調用該方法計算所有頁面的offset

  • 發現Fragment中有一個setUserVisibleHint(boolean isVisibleToUser)方法，這個方法就是告訴使用者，UI對使用者是否可見，可以做懶加載初始化操作。
    • 因為ViewPager會加載好多Fragment，為了節省内容等會在Fragment不可見的某個時候調用onDestroyView()将使用者界面銷毀掉但是Fragment的執行個體還在，是以可能第一次加載沒有問題，但是再次回到第一個Fragment再去加載的時候就會出現UI對使用者可見但是視圖還沒有初始化。
  • 懶加載需要處理的幾個問題
    • 預加載，雖然沒有顯示在界面上，但是目前頁面的上一頁和下一頁的Fragment已經執行了一個Fragment能夠顯示在界面上的所有生命周期方法，但是我們想在跳轉到該頁時才真正構造資料視圖和請求資料。那麼我們可以使用一個占位視圖，那麼可以想到使用ViewStub，當真正跳轉到該頁時，執行ViewStub.inflate()方法，加載真正的資料視圖和請求資料。
  • 視圖儲存
    • 當某一頁超出可視範圍和預加載範圍，那麼它将會被銷毀，FragmentStatePagerAdapter銷毀整個Fragment, 我們可以自己儲存該Fragment,或使用FragmentPagerAdapter讓FragmentTransition來保留Fragment的引用。雖然這樣，但是它的周期方法已經走完，那麼我們隻能手動的儲存Fragment根View的引用，當再次重新進入新的聲明周期方法時，傳回原來的View
  • 是否已經被使用者所看到
    • 其實本身而言，FragmentManager并沒有提供為Fragment被使用者所看到的回調方法，而是在FragmentPagerAdapter和FragmentStatePagerAdapter中，調用了Fragment.setUserVisibleHint(boolean)來表明Fragment是否已經被作為primaryFragment. 是以這個方法可以被認為是一個回調方法。

  • 主要的方法是Fragment中的setUserVisibleHint()，此方法會在onCreateView(）之前執行，當viewPager中fragment改變可見狀态時也會調用,當fragment 從可見到不見，或者從不可見切換到可見，都會調用此方法，使用getUserVisibleHint() 可以傳回fragment是否可見狀态。
  • 在BaseLazyFragment中需要在onActivityCreated()及setUserVisibleHint()方法中都調了一次lazyLoad() 方法。如果僅僅在setUserVisibleHint()調用lazyLoad()，當預設首頁首先加載時會導緻viewPager的首頁第一次展示時沒有資料顯示，切換一下才會有資料。因為首頁fragment的setUserVisible()在onActivityCreated() 之前調用，此時isPrepared為false 導緻首頁fragment 沒能調用onLazyLoad()方法加載資料。 
    /**
 * <pre>
 *     @author yangchong
 *     blog  : https://github.com/yangchong211
 *     time  : 2017/7/22
 *     desc  : 懶加載
 *     revise: 懶加載時機：onCreateView()方法執行完畢 + setUserVisibleHint()方法傳回true
 * </pre>
 */
public abstract class BaseLazyFragment extends BaseFragment {

    /*
     * 預加載頁面回調的生命周期流程：
     * setUserVisibleHint() -->onAttach() --> onCreate()-->onCreateView()-->
     *              onActivityCreate() --> onStart() --> onResume()
     */

    /**
     * 懶加載過
     */
    protected boolean isLazyLoaded = false;
    /**
     * Fragment的View加載完畢的标記
     */
    private boolean isPrepared = false;

    /**
     * 第一步,改變isPrepared标記
     * 當onViewCreated()方法執行時,表明View已經加載完畢,此時改變isPrepared标記為true,并調用lazyLoad()方法
     */
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        isPrepared = true;
        //隻有Fragment onCreateView好了
        //另外這裡調用一次lazyLoad(）
        lazyLoad();
    }


    /**
     * 第二步
     * 此方法會在onCreateView(）之前執行
     * 當viewPager中fragment改變可見狀态時也會調用
     * 當fragment 從可見到不見，或者從不可見切換到可見，都會調用此方法
     * true表示目前頁面可見，false表示不可見
     */
    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        LogUtil.d("setUserVisibleHint---"+isVisibleToUser);
        //隻有當fragment可見時，才進行加載資料
        if (isVisibleToUser){
            lazyLoad();
        }
    }

    /**
     * 調用懶加載
     * 第三步:在lazyLoad()方法中進行雙重标記判斷,通過後即可進行資料加載
     */
    private void lazyLoad() {
        if (getUserVisibleHint() && isPrepared && !isLazyLoaded) {
            showFirstLoading();
            onLazyLoad();
            isLazyLoaded = true;
        } else {
            //當視圖已經對使用者不可見并且加載過資料，如果需要在切換到其他頁面時停止加載資料，可以覆寫此方法
            if (isLazyLoaded) {
                stopLoad();
            }
        }
    }

    /**
     * 視圖銷毀的時候講Fragment是否初始化的狀态變為false
     */
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        isLazyLoaded = false;
        isPrepared = false;
    }

    /**
     * 第一次可見時，操作該方法，可以用于showLoading操作，注意這個是全局加載loading
     */
    protected void showFirstLoading() {
        LogUtil.i("第一次可見時show全局loading");
    }

    /**
     * 停止加載
     * 當視圖已經對使用者不可見并且加載過資料，但是沒有加載完，而隻是加載loading。
     * 如果需要在切換到其他頁面時停止加載資料，可以覆寫此方法。
     * 存在問題，如何停止加載網絡
     */
    protected void stopLoad(){

    }

    /**
     * 第四步:定義抽象方法onLazyLoad(),具體加載資料的工作,交給子類去完成
     */
    @UiThread
    protected abstract void onLazyLoad();
}
  • onLazyLoad()加載資料條件
    • getUserVisibleHint()會傳回是否可見狀态，這是fragment實作懶加載的關鍵,隻有fragment 可見才會調用onLazyLoad() 加載資料。
    • isPrepared參數在系統調用onActivityCreated時設定為true,這時onCreateView方法已調用完畢(一般我們在這方法裡執行findviewbyid等方法),確定 onLazyLoad()方法不會報空指針異常。
    • isLazyLoaded確定ViewPager來回切換時BaseFragment的initData方法不會被重複調用，onLazyLoad在該Fragment的整個生命周期隻調用一次,第一次調用onLazyLoad()方法後馬上執行 isLazyLoaded = true。
    • 然後再繼承這個BaseLazyFragment實作onLazyLoad() 方法就行。他會自動控制當fragment 展現出來時，才會加載資料
  • 還有幾個細節需要優化一下
    • 當視圖已經對使用者不可見并且加載過資料，如果需要在切換到其他頁面時停止加載資料，可以覆寫此方法，也就是stopLoad
    • 視圖銷毀的時候講Fragment是否初始化的狀态變為false，這個也需要處理一下
    • 第一次可見時，定義一個showFirstLoading方法，操作該方法，可以用于Loading加載操作，注意這個是全局加載loading，和下拉重新整理資料或者局部重新整理的loading不一樣的。可能有些開發app，沒有将loading分的這麼細。

  • 什麼是狀态管理器？
    • 一般在需要使用者等待的場景，顯示一個Loading動畫可以讓使用者知道App正在加載資料，而不是程式卡死，進而給使用者較好的使用體驗。
    • 當加載的資料為空時顯示一個資料為空的視圖、在資料加載失敗時顯示加載失敗對應的UI并支援點選重試會比白屏的使用者體驗更好一些。
    • 加載中、加載失敗、空資料的UI風格，一般來說在App内的所有頁面中需要保持一緻，也就是需要做到全局統一。
  • 如何降低偶性和入侵性

    • 讓View狀态的切換和Activity徹底分離開，必須把這些狀态View都封裝到一個管理類中，然後暴露出幾個方法來實作View之間的切換。

      在不同的項目中可以需要的View也不一樣，是以考慮把管理類設計成builder模式來自由的添加需要的狀态View。

    • 那麼如何降低耦合性，讓代碼入侵性低。友善維護和修改，且移植性強呢？大概具備這樣的條件……
      • 可以運用在activity或者fragment中
      • 不需要在布局中添加LoadingView，而是統一管理不同狀态視圖，同時暴露對外設定自定義狀态視圖方法，友善UI特定頁面定制
      • 支援設定自定義不同狀态視圖，即使在BaseActivity統一處理狀态視圖管理，也支援單個頁面定制
      • 在加載視圖的時候像異常和空頁面能否用ViewStub代替，這樣減少繪制，隻有等到出現異常和空頁面時，才将視圖給inflate出來
      • 當頁面出現網絡異常頁面，空頁面等，頁面會有互動事件，這時候可以設定點選設定網絡或者點選重新加載等等
  • 那麼具體怎麼操作呢？
    • 可以自由切換内容，空資料，異常錯誤，加載，網絡錯誤等5種狀态。父類BaseFragment直接暴露5中狀态，友善子類統一管理狀态切換，這裡fragment的封裝和activity差不多。 
    /**
 * <pre>
 *     @author yangchong
 *     blog  : https://github.com/yangchong211
 *     time  : 2017/7/20
 *     desc  : fragment的父類
 *     revise: 注意，該類具有懶加載
 * </pre>
 */
public abstract class BaseStateFragment extends BaseLazyFragment {

    protected StateLayoutManager statusLayoutManager;
    private View view;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        if(view==null){
            view = inflater.inflate(R.layout.base_state_view, container , false);
            initStatusLayout();
            initBaseView(view);
        }
        return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initView(view);
        initListener();
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }

    /**
     * 擷取到子布局
     * @param view              view
     */
    private void initBaseView(View view) {
        LinearLayout llStateView = view.findViewById(R.id.ll_state_view);
        llStateView.addView(statusLayoutManager.getRootLayout());
    }


    /**
     * 初始化狀态管理器相關操作
     */
    protected abstract void initStatusLayout();

    /**
     * 初始化View的代碼寫在這個方法中
     * @param view              view
     */
    public abstract void initView(View view);

    /**
     * 初始化監聽器的代碼寫在這個方法中
     */
    public abstract void initListener();

    /**
     * 第一次可見狀态時，showLoading操作，注意下拉重新整理操作時不要用該全局loading
     */
    @Override
    protected void showFirstLoading() {
        super.showFirstLoading();
        showLoading();
    }

    /*protected void initStatusLayout() {
        statusLayoutManager = StateLayoutManager.newBuilder(activity)
                .contentView(R.layout.common_fragment_list)
                .emptyDataView(R.layout.view_custom_empty_data)
                .errorView(R.layout.view_custom_data_error)
                .loadingView(R.layout.view_custom_loading_data)
                .netWorkErrorView(R.layout.view_custom_network_error)
                .build();
    }*/


    /*---------------------------------下面是狀态切換方法-----------------------------------------*/


    /**
     * 加載成功
     */
    protected void showContent() {
        if (statusLayoutManager!=null){
            statusLayoutManager.showContent();
        }
    }

    /**
     * 加載無資料
     */
    protected void showEmptyData() {
        if (statusLayoutManager!=null){
            statusLayoutManager.showEmptyData();
        }
    }

    /**
     * 加載異常
     */
    protected void showError() {
        if (statusLayoutManager!=null){
            statusLayoutManager.showError();
        }
    }

    /**
     * 加載網絡異常
     */
    protected void showNetWorkError() {
        if (statusLayoutManager!=null){
            statusLayoutManager.showNetWorkError();
        }
    }

    /**
     * 加載loading
     */
    protected void showLoading() {
        if (statusLayoutManager!=null){
            statusLayoutManager.showLoading();
        }
    }
}

//如何切換狀态呢？
showContent();
showEmptyData();
showError();
showLoading();
showNetWorkError();

//或者這樣操作也可以
statusLayoutManager.showLoading();
statusLayoutManager.showContent();
  • 狀态管理器的設計思路
    • StateFrameLayout是繼承FrameLayout自定義布局，主要是存放不同的視圖，以及隐藏和展示視圖操作
    • StateLayoutManager是狀态管理器，主要是讓開發者設定不同狀态視圖的view，以及切換視圖狀态操作
      • 幾種異常狀态要用ViewStub，因為在界面狀态切換中loading和内容View都是一直需要加載顯示的，但是其他的3個隻有在沒資料或者網絡異常的情況下才會加載顯示，是以用ViewStub來加載他們可以提高性能。
    • OnRetryListener，為接口，主要是重試作用。比如加載失敗了，點選視圖需要重新重新整理接口，則可以用到這個。開發者也可以自己設定點選事件
    • 關于狀态視圖切換方案，目前市場有多種做法，具體可以看我的這篇部落格： https://juejin.im/post/5d2f014d6fb9a07ea648a959

其他介紹

01.關于部落格彙總連結

02.關于我的部落格

項目位址： https://github.com/yangchong211/YCStateLayout

緩存 viewpager懶加載 viewpager加載 viewpager效果 viewpager第三方 viewpager狀态
上一篇: MySQL的sql_mode模式說明及設定
下一篇: MySQL必知必會1

繼續閱讀