網(wǎng)絡(luò)請求UI自動切換框架

1. 概述與分析

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

2. 設(shè)計思路

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

1: 將三種狀態(tài)的界面疊加在一起

2: 定義三種狀態(tài)

3: 定義一個當(dāng)前狀態(tài)

4: 定義一個根據(jù)當(dāng)前狀態(tài)來切換界面的方法

5: 定義一個根據(jù)網(wǎng)絡(luò)請求返回結(jié)果自動切換界面的方法

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

3. 代碼實現(xiàn)

原理上面已經(jīng)分析清楚了，下面我們就將原理用代碼來實現(xiàn)：

/**
* 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("親，請?zhí)砑右粋€布局");
        }
    }

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

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

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

    //根據(jù)網(wǎng)絡(luò)數(shù)據(jù)，自動切換頁面
    autoShowPager();

}

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

//校驗數(shù)據(jù)
private STATE checkData(Object obj) {
    if (obj == null) {//如果數(shù)據(jù)為空，則失敗
        return STATE.ERROR;
    } else {
        if (obj instanceof List) {//如果返回的是數(shù)組
            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);

    //根據(jù)當(dāng)前狀態(tài)切換
    switch (mCurrentState) {
        case LOADING:
            mLoadingView.setVisibility(VISIBLE);
            break;
        case SUCCESS:
            mSuccessView.setVisibility(VISIBLE);
            break;
        case ERROR:
            mErrorView.setVisibility(VISIBLE);
            break;
    }
}

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

//定義一個當(dāng)前狀態(tài)（默認(rèn)正在加載中）
private STATE mCurrentState = STATE.LOADING;

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

//請求網(wǎng)絡(luò)數(shù)據(jù)
public abstract Object getNetData();
}

4. UI框架的使用

在開發(fā)中我們一般都會定義一個BaseFragment,當(dāng)涉及到網(wǎng)絡(luò)請求數(shù)據(jù)時，此時就可以在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;
}

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

//子類實現(xiàn)數(shù)據(jù)請求
public abstract Object questData();
}

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