網絡請求UI自動切換框架

1. 概述與分析

在實際項目中，我們不可避免的需要網絡請求數據，由于網絡或請求方式等主觀或客觀原因，導致我們請求的結果有時會出現一些偏差，從而導致我們UI界面顯示也會有所不同。一般情況下，網絡請求后我們的界面一般呈現三種頁面狀態：“正在加載中”、“加載失敗”和“加載成功”。那么就可以通過網絡請求后結果讓UI界面自動切換，

2. 設計思路

通常情況下，正在加載和加載失敗的界面都是相同的，只有加載成功后的界面不同。為了能讓UI界面隨著網絡請求結果自動切換，那我們可以按照如下思路去設計：

1: 將三種狀態的界面疊加在一起

2: 定義三種狀態

3: 定義一個當前狀態

4: 定義一個根據當前狀態來切換界面的方法

5: 定義一個根據網絡請求返回結果自動切換界面的方法

綜上分析，我們可以得出如下框架原理圖：

3. 代碼實現

原理上面已經分析清楚了，下面我們就將原理用代碼來實現：

/**
* author:salmonzhang
* Description:UI切換框架
 * Date:2017/8/6 0018 10:05
 */

public abstract class LoadPager extends FrameLayout {

private View mLoadingView;
private View mSuccessView;
private View mErrorView;

public LoadPager(@NonNull Context context) {
    this(context, null);
}

public LoadPager(@NonNull Context context, @Nullable AttributeSet attrs) {
    this(context, attrs, 0);
}

public LoadPager(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

//初始化UI框架三個界面
private void init() {
    //正在加載界面
    if (mLoadingView == null) {
        //此處正在加載界面的布局需要手動加入
        mLoadingView = View.inflate(getContext(), R.layout.page_loading, null);
    }

    //加載成功界面
    if (mSuccessView == null) {
        //成功的布局誰用誰傳
        mSuccessView = createSuccessView();
        if (mSuccessView == null) {
            throw new RuntimeException("親，請添加一個布局");
        }
    }

    //加載失敗的界面
    if (mErrorView == null) {
        //此處加載失敗界面的布局需要手動加入
        mErrorView = View.inflate(getContext(), R.layout.page_error, null);
    }

    //將三個布局添加在一起
    addView(mLoadingView);
    addView(mSuccessView);
    addView(mErrorView);

    //頁面切換的方法
    changeView();

    //根據網絡數據，自動切換頁面
    autoShowPager();

}

//自動切換頁面
private void autoShowPager() {
    new Thread(new Runnable() {
        @Override
        public void run() {
            //獲取網絡數據
            Object obj = getNetData();
            //校驗數據，根據返回狀態自動切換狀態
            mCurrentState = checkData(obj);
            //主線程去修改界面（注：這里我調用的是我工具類中的runOnUIThread方法）
            Utils.runOnUIThread(new Runnable() {
                @Override
                public void run() {
                    changeView();
                }
            });
        }
    }).start();
}

//校驗數據
private STATE checkData(Object obj) {
    if (obj == null) {//如果數據為空，則失敗
        return STATE.ERROR;
    } else {
        if (obj instanceof List) {//如果返回的是數組
            List list = (List) obj;
            if (list.size() > 0) {
                return STATE.SUCCESS;
            } else {
                return STATE.ERROR;
            }
        } else {//如果是對象
            return STATE.SUCCESS;
        }
    }
}

//頁面切換方法
private void changeView() {
    //先將三個頁面都隱藏
    mLoadingView.setVisibility(GONE);
    mSuccessView.setVisibility(GONE);
    mErrorView.setVisibility(GONE);

    //根據當前狀態切換
    switch (mCurrentState) {
        case LOADING:
            mLoadingView.setVisibility(VISIBLE);
            break;
        case SUCCESS:
            mSuccessView.setVisibility(VISIBLE);
            break;
        case ERROR:
            mErrorView.setVisibility(VISIBLE);
            break;
    }
}

//定義三個狀態
public enum STATE {
    LOADING,//正在加載中
    SUCCESS,//加載成功
    ERROR;//加載失敗
}

//定義一個當前狀態（默認正在加載中）
private STATE mCurrentState = STATE.LOADING;

//創建一個加載成功的界面
public abstract View createSuccessView();

//請求網絡數據
public abstract Object getNetData();
}

4. UI框架的使用

在開發中我們一般都會定義一個BaseFragment,當涉及到網絡請求數據時，此時就可以在onCreateView方法中使用UI自動切換框架來加載布局。示例代碼如下：

public abstract class BaseFragment extends Fragment {
public LoadPager mLoadPager;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    //使用UI自動切換框架加載頁面
    if (mLoadPager == null) {
        mLoadPager = new LoadPager(getContext()) {
            @Override
            public Object getNetData() {
                return questData();
            }

            @Override
            public View createSuccessView() {
                return createItemView();
            }
        };
    }
    return mLoadPager;
}

//子類創建布局
public abstract View createItemView();

//子類實現數據請求
public abstract Object questData();
}

好了，上面就是網絡請求UI自動切換框架的分析、實現和使用。希望對你有所幫助，不足之處，望指正，多謝！