鸿蒙开源组件——页面多状态布局

jacksky
发布于 2021-7-21 18:37
浏览
0收藏

loadinglayout

项目介绍

  • 项目名称:loadinglayout
  • 所属系列:openharmony第三方组件适配移植
  • 功能:简单实用的页面多状态布局(content,loading,empty,error)
  • 项目移植状态:主功能完成
  • 调用差异:无
  • 开发版本:sdk5,DevEco Studio2.1 beta3
  • 基线版本:Release v1.0.1

效果演示

鸿蒙开源组件——页面多状态布局-鸿蒙开发者社区

安装教程

在moudle级别下的build.gradle文件中添加依赖

// 添加maven仓库
repositories {
   maven {
       url 'https://s01.oss.sonatype.org/content/repositories/snapshots/'
   }
}

// 添加依赖库
dependencies {
   implementation 'com.gitee.chinasoft_ohos:loadinglayout:0.0.1-SNAPSHOT'
}

 

在sdk5,DevEco Studio2.1 beta3下项目可直接运行 如无法运行,删除项目.gradle,.idea,build,gradle,build.gradle文件, 并依据自己的版本创建新项目,将新项目的对应文件复制到根目录下

使用说明

简单实用的页面多状态布局(content,loading,empty,error)

  • 用法一:在布局中使用,注意调用java方法nInactive()兼容
<ezy.ui.layout.LoadingLayout
        ohos:id="$+id:loading"
        ohos:height="match_parent"
        ohos:width="match_parent"
        app:llEmptyText="暂无数据"
        app:llTextSize="16fp"
        app:llErrorImage="$media:error">
        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:layout_alignment="center"
            ohos:text="This is Content"
            ohos:text_color="#cccccc"
            ohos:text_size="16fp"/>
    </ezy.ui.layout.LoadingLayout>

 

  • 用法一:要调用该方法兼容下bug
        @Override
        public void onInactive() {
            super.onActive();
            // 兼容第二次进入之后相关页面不显示bug
            if (mLoadingLayout.getmLayouts() == null) {
                return;
            } else {
                mLoadingLayout.getmLayouts().clear();
            }
    
        }​
  • 用法二:包裹并替换内容元素
    @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_other);
            mLoadingLayout = (LoadingLayout) findComponentById(ResourceTable.Id_loading);
    
            // 调用类库公有方法,重新构建vLoading内容页面,特殊需求可将LoadingLayout类复制粘贴到项目,自行修改相关样式
            if (mLoadingLayout == null) {
                return;
            }
    
            mLoadingLayout.onFinishInflate();
            mLoadingLayout.setRetryListener(new LoadingLayout.ClickedListenered() {
                @Override
                public void clicked(Component component) {
    
                    new ToastsUtils.Builder(getContext())
                        .setToastText(
                            // "测试other" +
                            "retry")
                        .build().show();
                }
            });
            mLoadingLayout.showContent();
        }​
  • API
    // 显示 content/loading/empty/error 布局
    showContent()
    showLoading()
    showEmpty()
    showError()
    
    // 设置 loading/empty/error 布局
    setLoading(int resId)
    setEmpty(int resId)
    setError(int resId)
    
    // 设置空布局的图片与文本
    setEmptyImage(int resId)
    setEmptyText(String value)
    
    // 设置错误布局的图片与文本,
    setErrorImage(int resId)
    setErrorText(String value) 
    
    // 设置重试按钮文本
    setRetryText(String value)
    
    // 设置重试按钮的监听回调
    setRetryListener(ClickedListenered listener)​
  • 属性配置的字段并获取的方法,参考AttrUtil
    <!-- 空布局资源id"llEmptyResId" -->
    mEmptyResId = AttrUtil.getResourceId(attrSet, "llEmptyResId", ResourceTable.Layout__loading_layout_empty);
    <!-- 加载中布局资源id"llLoadingResId" -->
    mLoadingResId = AttrUtil.getResourceId(attrSet, "llLoadingResId", ResourceTable.Layout__loading_layout_loading);
    <!-- 错误布局资源id"llErrorResId" -->
    mErrorResId = AttrUtil.getResourceId(attrSet, "llErrorResId", ResourceTable.Layout__loading_layout_error);
    
    <!-- 空布局图片"llEmptyImage" -->
    mEmptyImage = AttrUtil.getMediaId(attrSet, "llEmptyImage", ResourceTable.Media_empty);
    <!-- 空布局文本"llEmptyText" -->
    mEmptyText = AttrUtil.getStringValue(attrSet, "llEmptyText", "暂无数据");
    
    <!-- 错误布局图片"llErrorImage" -->
    mErrorImage = AttrUtil.getMediaId(attrSet, "llErrorImage", ResourceTable.Media_icon);
    <!-- 错误布局文本"llErrorText" -->
    mErrorText = AttrUtil.getStringValue(attrSet, "llErrorText", "无网络连接,请检查您的网络...");
    
    <!-- 错误布局重试按钮文本"llRetryText" -->
    mRetryText = AttrUtil.getStringValue(attrSet, "llRetryText", "加载失败,点击重试~~");
    <!-- 文本颜色llTextColor -->
    mTextColor = AttrUtil.getColorValue(attrSet, "llTextColor", COLOR);
    <!-- 文本尺寸 -->
    mTextSize = AttrUtil.getDimension(attrSet, "llTextSize", AttrHelper.vp2px(ONESIX, getContext()));
    
    <!-- 按钮文本颜色 llButtonTextColor-->
    mButtonTextColor = AttrUtil.getColorValue(attrSet, "llButtonTextColor", COLOR);
    <!-- 按钮文本尺寸"llButtonTextSize" -->
    mButtonTextSize = AttrUtil.getDimension(attrSet, "llButtonTextSize", AttrHelper.vp2px(ONESIX, getContext()));
    <!-- 按钮背景"llButtonBackground" -->
    mButtonBackground = AttrUtil.getElementValue(attrSet, "llButtonBackground", background);​

测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异

版本迭代

  • 0.0.1-SNAPSHOT

版权和许可信息

Copyright 2016 czy1121

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

 

chinasoft_ohos-loadinglayout-master.zip 402.9K 6次下载
已于2021-7-21 18:37:04修改
收藏
回复
举报
回复
    相关推荐