LoadingLayout封装网络请求的各种效果


继承FrameLayout,在xml渲染完成后,加上加载中、无网络、无数据、出错四个页面,根据需要控制显示哪一层,花了些时间,开了很多方法出来,支持很多属性的设置,算是比较实用,源码里已对各个方法的作用都加了注释

使用方式

gradle引用:

compile 'com.lai.weavey:loadinglayout:1.3.1'

使用说明

LoadingLayout支持全局配置,对所有使用到的地方都起效,需要在Application中配置,如下:

 public class App extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        LoadingLayout.getConfig()
                .setErrorText("出错啦~请稍后重试!")
                .setEmptyText("抱歉,暂无数据")
                .setNoNetworkText("无网络连接,请检查您的网络···")
                .setErrorImage(R.mipmap.define_error)
                .setEmptyImage(R.mipmap.define_empty)
                .setNoNetworkImage(R.mipmap.define_nonetwork)
                .setAllTipTextColor(R.color.gray)
                .setAllTipTextSize(14)
                .setReloadButtonText("点我重试哦")
                .setReloadButtonTextSize(14)
                .setReloadButtonTextColor(R.color.gray)
                .setReloadButtonWidthAndHeight(150,40);
    }
}

由于“加载中”的页面,可能每个App都不一样,因此,LoadingLayout支持自定义LoadingPage,如下:

 LoadingLayout.getConfig()
     .setLoadingPageLayout(R.layout.define_loading_page);

同时,为了适应个别界面的“特殊需求”,LoadingLayout也支持局部设置各种属性,仅对当前对象生效,不影响全局。如下:

        LoadingLayout  loading = (LoadingLayout) findViewById(R.id.loading_layout);
        loading.setLoadingPage(R.layout.define_loading_page)
                .setEmptyText("暂无报告数据")
                .setErrorText("")
                .setNoNetworkText("")
                .setErrorImage(R.mipmap.ic_launcher)
                .setErrorTextSize(16)
                .setReloadButtonText("点我重新加载哦"); //等等

为ReloadButton设置监听:

loadingLayout.setOnReloadListener(new LoadingLayout.OnReloadListener() {
            @Override
            public void onReload(View v) {

            }
        });

设置显示的页面:

 loadingLayout.setStatus(LoadingLayout.Loading);//加载中
 loadingLayout.setStatus(LoadingLayout.Empty);//无数据
 loadingLayout.setStatus(LoadingLayout.Error);//错误
 loadingLayout.setStatus(LoadingLayout.No_Network);//无网络
 loadingLayout.setStatus(LoadingLayout.Success);//加载成功

最后,在xml里面使用:

<com.weavey.loading.lib.LoadingLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:isFirstVisible="true">

    <TextView
        android:background="@color/colorPrimary"
        android:visibility="visible"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="ContentView"/>

</com.weavey.loading.lib.LoadingLayout>

注意:
(1)isFirstVisible属性用来控制contentView一开始是否隐藏,由于LoadingLayout原理是在xml渲染完成后在contentView上铺上三层View,因此,一开始如果不隐藏,等contentView渲染完成后调用: loadingLayout.setStatus(LoadingLayout.Loading);
会造成界面闪烁的效果,影响体验,因此默认将contentView隐藏,所以数据加载完成后一定要调用loadingLayout.setStatus(LoadingLayout.Success);,将contentView显示出来。这样也能解决未获取到数据的情况下,被用户看到杂乱无章的布局,个人还是比较喜欢默认隐藏contentView;
(2)为了方便管理,LoadingLayout只能有一个直属子View,类似ScrollView,添加两个直属子View会抛出异常throw new IllegalStateException("LoadingLayout can host only one direct child");
(3)由于AS会直接将自定义View的特性反应在预览界面,所以在使用LoadingLayout的时候,会无法看到被LoadingLayout包裹住的布局(默认为gone),因此也可以将isFirstVisible属性暂时设为true,预览布局。



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在React中封装网络请求可以使用各种库,如axios、fetch等。下面是一个简单的示例,演示如何使用axios来封装网络请求: 1. 首先,安装axios库: ``` npm install axios ``` 2. 创建一个名为api.js的文件,用于封装所有的API请求: ```jsx import axios from 'axios'; // 封装GET请求 export const get = async (url, params) => { try { const response = await axios.get(url, { params }); return response.data; } catch (error) { console.error(error); throw error; } }; // 封装POST请求 export const post = async (url, data) => { try { const response = await axios.post(url, data); return response.data; } catch (error) { console.error(error); throw error; } }; ``` 3. 在需要发送网络请求的组件中使用封装的API方法: ```jsx import React, { useEffect, useState } from 'react'; import { get } from './api'; const MyComponent = () => { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { try { const result = await get('https://api.example.com/data'); setData(result); } catch (error) { // 处理错误 } }; fetchData(); }, []); if (!data) { return <div>Loading...</div>; } return ( <div> {/* 使用获取到的数据 */} {data.map((item) => ( <div key={item.id}>{item.name}</div> ))} </div> ); }; export default MyComponent; ``` 这是一个简单的示例,你可以根据实际需求进行扩展和修改。封装网络请求可以使代码更加模块化和可复用,同时也方便统一处理错误和请求拦截等操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值