本作品介绍了一种简洁高效的页面切换布局设计,旨在提供流畅的用户体验和清晰的内容呈现。通过减少视觉杂乱,增强网站或应用的功能性与美观度。
作者Hankkin开发了一款名为PageLayoutDemo的简单页面切换组件,该组件支持空布局、错误布局以及加载布局,并且可以通过Java代码一键配置而无需编写xml文件。
此功能的一个特点是它可以单独为某个视图设置状态改变,例如当ListView的数据未获取到时,可以将targetView设为其父容器或自身。具体来说,在初始化页面时调用fun initPage(targetView: Any),其中的targetView可指定为listview或者包裹listview的parent布局。
在项目开发中,频繁需要处理加载数据、展示数据和显示错误信息的情况。当获取的数据为空时会显示一个空白页;如果网络出现异常,则显示网络错误页面。例如最近流行的京东APP就采用了类似的机制来提高用户体验。
虽然网上有许多开源组件可以实现类似功能,但大多数是通过继承某个布局并在xml文件中配置其作为根布局,并将内容添加进去以达到效果。然而这种方式不够灵活且需要定义多个xml布局,因此作者决定寻找一种更简便的方法来替代现有的解决方案。
其实现思路如下:
1. 自定义一个布局用作整个应用的根布局。
2. 提供切换加载loading、空白页empty、错误页error和内容页content的功能。
3. 如何管理上述四个页面?
4. contentView如何添加到自定义布局中?
5. 如果需要替换的不是Activity或Fragment,该如何操作?
6. 由于整个应用通常会使用统一的页面状态切换功能,是否可以一键配置?
在代码设计方面:
- 定义PageLayout继承FrameLayout或其他布局,并提供加载、错误、空和内容四种视图之间的切换。
- 使用Builder模式来创建实例,类似于Android中的AlertDialog构建方式。
最终实现的效果如下:
```java
// 默认样式
PageLayout.Builder(this)
.initPage(ll_default) // 初始化页面
.setOnRetryListener(new PageLayout.OnRetryClickListener() { // 设置重试监听器
@Override
public void onRetry() {
loadData(); // 加载数据的方法,具体实现根据项目需求编写
}
})
.create();
// 自定义样式
PageLayout.Builder(this)
.initPage(ll_demo)
.setLoading(R.layout.layout_loading_demo) // 设置加载布局资源id
.setEmpty(R.layout.layout_empty_demo, R.id.tv_page_empty_demo) // 设置空页面和其中的TextView id
.setError(R.layout.layout_error_demo, R.id,// 同上设置错误页面及相应组件ID...
```
以上是作者对于PageLayoutDemo的设计思路以及具体实现方式。