Shulou(Shulou.com)06/03 Report--

1. Summary and analysis

In the actual project, we inevitably need network request data, due to subjective or objective reasons such as network or request mode, the result of our request will sometimes have some deviation, resulting in our UI interface display will be different. In general, after a network request, our interface generally presents three page states: "loading", "loading failure" and "loading success". Then the UI interface can be switched automatically through the result of the network request

two。 Design ideas

In general, the interface that is being loaded and the interface that failed to load is the same, only the interface after successful loading is different. In order to make the UI interface switch automatically with the result of the network request, we can design it according to the following ideas:

1: superimpose the interfaces of the three states

2: define three states

3: define a current state

4: define a method to switch interfaces according to the current state

5: define a method to automatically switch the interface according to the result returned by the network request

Based on the analysis, we can get the following frame schematic diagram:

3. Code implementation

The principle has been analyzed clearly above, so let's implement the principle in code:

/ * author:salmonzhang* Description:UI switching framework * 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 ();} / initialize the three interfaces of the UI framework private void init () {/ / the loading interface if (mLoadingView = = null) {/ / the layout of the loading interface here needs to be manually added mLoadingView = View.inflate (getContext (), R.layout.page_loading, null) } / / load successful interface if (mSuccessView = = null) {/ / successful layout who uses mSuccessView = createSuccessView (); if (mSuccessView = = null) {throw new RuntimeException ("dear, please add a layout") }} / / failed interface if (mErrorView = = null) {/ / the layout of the failed interface needs to be manually added mErrorView = View.inflate (getContext (), R.layout.page_error, null);} / / add three layouts together addView (mLoadingView); addView (mSuccessView); addView (mErrorView); / / page switching method changeView () / / automatically switch page autoShowPager () according to network data;} / / automatically switch page private void autoShowPager () {new Thread (new Runnable () {@ Override public void run () {/ / get network data Object obj = getNetData (); / / check data, automatically switch status mCurrentState = checkData (obj) based on returned status) / / main thread to modify the interface (Note: here I call the runOnUIThread method in my tool class) Utils.runOnUIThread (new Runnable () {@ Override public void run () {changeView ();}});}}) .start () } / / check data private STATE checkData (Object obj) {if (obj = = null) {/ / if the data is empty, return STATE.ERROR;} else {if (obj instanceof List) {/ / if the array List list = (List) obj; if (list.size () > 0) is returned) {return STATE.SUCCESS } else {return STATE.ERROR;}} else {/ / if it is an object return STATE.SUCCESS;}} / / Page switching method private void changeView () {/ / hide all three pages first mLoadingView.setVisibility (GONE); mSuccessView.setVisibility (GONE); mErrorView.setVisibility (GONE) / / switch switch (mCurrentState) {case LOADING: mLoadingView.setVisibility (VISIBLE); break; case SUCCESS: mSuccessView.setVisibility (VISIBLE); break; case ERROR: mErrorView.setVisibility (VISIBLE); break according to the current state }} / / define three states public enum STATE {LOADING,// loading success ERROR;// loading failure} / define a current state (default loading) private STATE mCurrentState = STATE.LOADING;// create a successfully loaded interface public abstract View createSuccessView (); / / request network data public abstract Object getNetData ();} 4. Use of the UI framework

In development, we usually define a BaseFragment, and when it comes to network request data, we can use UI to automatically switch the framework in the onCreateView method to load the layout. The sample code is as follows:

Public abstract class BaseFragment extends Fragment {public LoadPager mLoadPager;@Nullable@Overridepublic View onCreateView (LayoutInflater inflater, @ Nullable ViewGroup container, @ Nullable Bundle savedInstanceState) {/ / use the UI automatic switching frame to load the page if (mLoadPager = = null) {mLoadPager = new LoadPager (getContext ()) {@ Overridepublic Object getNetData () {return questData () } @ Override public View createSuccessView () {return createItemView ();}};} return mLoadPager;} / / subclass creates layout public abstract View createItemView (); / / subclass implements data request public abstract Object questData ();}

All right, the above is the analysis, implementation and use of the network request UI automatic switching framework. Hope to help you, inadequacies, hope to correct, thank you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.