网络请求UI自动切换框架

1. 概述与分析

在实际项目中,我们不可避免的需要网络请求数据,由于网络或请求方式等主观或客观原因,导致我们请求的结果有时会出现一些偏差,从而导致我们UI界面显示也会有所不同。一般情况下,网络请求后我们的界面一般呈现三种页面状态:“正在加载中”、“加载失败”和“加载成功”。那么就可以通过网络请求后结果让UI界面自动切换,

创新互联是一家专注于网站建设、成都做网站与策划设计,魏都网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:魏都等地区。魏都做网站价格咨询:18980820575

2. 设计思路

通常情况下,正在加载和加载失败的界面都是相同的,只有加载成功后的界面不同。为了能让UI界面随着网络请求结果自动切换,那我们可以按照如下思路去设计:

1: 将三种状态的界面叠加在一起

2: 定义三种状态

3: 定义一个当前状态

4: 定义一个根据当前状态来切换界面的方法

5: 定义一个根据网络请求返回结果自动切换界面的方法

综上分析,我们可以得出如下框架原理图:

网络请求UI自动切换框架

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自动切换框架的分析、实现和使用。希望对你有所帮助,不足之处,望指正,多谢!

分享标题:网络请求UI自动切换框架
转载源于:https://www.cdcxhl.com/article10/jjhsdo.html

成都网站建设公司_创新互联,为您提供静态网站网页设计公司网站排名软件开发企业网站制作全网营销推广

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

商城网站建设