`
IT梦想家
  • 浏览: 18190 次
社区版块
存档分类
最新评论

巧用tab组件实现APP的布局效果

阅读更多

 

FineReport巧用tab组件实现APP的布局效果

1. 版本说明

 

 iOS/Android支持版本

  jar包版本

  8.4及往后版本

  2017年4月1日

 

 

 

 

2. 描述

tab布局能避免多层次钻取与返回,可以在一个报表内部进行切换,钻取层数如果过多的话,看报表的人的操作体验就会下降很多,这时就可以选用tab组件。

 

3. 实际效果

新建一张表单,首先在表单中拖入tab组件,然后在第一层级的tab组件中再添加新一层的tab组件,并在第二层tab组件中添加报表块组件,通过表单组件的参数联动,即可实现不同tab系列下不同维度的数据分析。

报表样式设计如下:

我们以行业榜单中的手机行业举例来说明组件间的参数联动,其他tab页的设置方法相同。

新建一个内置数据集手机,其中时间段包含月度、季度和年度。



拖入两个报表块,左侧的为report0,右侧的是report1,左边的报表块(report0)界面设置如下:

 


右击A1单元格,点击超级链接,进入超级链接窗口,点击“+”号,添加当前表单对象,表单对象为report1,参数a的值为月度,表示当参数为月度的时候,report1中的数据为月度的数据,再添加一个当前表单对象,表单对象为report0,参数line的值为1,表示line的值为1的,report0进行刷新。

 

 


A2单元格超级链接中的参数a为季度,line的值为2。

 

A3单元格超级链接中的参数a月年度,line的值为3。

其他设置均与A1单元格的超级链接设置相同。

右击A1单元格,点击条件属性,弹出条件属性对话框,公式为$line = 1时,背景色为蓝色,字体色为白色,如下图所示:

 


A2单元格的条件属性为$line = 2 时,背景色为蓝色,字体色为白色。

 

A3单元格的条件属性为$line = 3 时,背景色为蓝色,字体色为白色。

右边的报表块(report1)界面设置如下:



B2单元格设置了过滤,显示参数a的值时的数据,如下图:



A2单元格中的=seq()为序号公式,根据B2排序,所以A2单元格的左父格为B2。

并且A2单元格设置了条件属性,是为了实现隔行换色,如下图所示:



至此,第一个tab页就设置完成,其他tab页与上述步骤相似,就不一一赘述了。

这时,可以看到在同一个界面中可以切换多个布局,减少了层层钻取的烦恼。

点击预览后,可以看到描述中的效果。

注:在表单body中移动端属性手机重布局的勾选要去掉。

注:在app中适用需要点击模板>移动端属性,选择HTML5解析。

 

分享到:
评论

相关推荐

    多种多样的App主界面Tab实现方法

    动态Tab的实现涉及到对用户状态的判断和Tab的实时更新,这通常需要编程逻辑与界面布局的紧密结合。 在选择Tab实现方式时,开发者和设计师应考虑以下因素: - **用户需求**:分析用户对功能的访问频率和顺序,确保最...

    使用Fragment实现Tab效果

    `TabLayout`是Android Design Support Library中的一个组件,它提供了一种方便的方式来创建和管理Tab,可以和`ViewPager`配合使用,实现Tab的滑动切换效果。 接下来,我们详细讲解如何创建和配置`Fragment`及`...

    Android滚动多TAB悬浮头效果

    下面将详细介绍这些组件以及如何利用它们来实现滚动多TAB悬浮头效果。 1. **CoordinatorLayout**:这是Android设计支持库中的一个高级布局,主要用于实现复杂的交互和动画效果。它能感知其子视图之间的相互作用,...

    Android TestTab 选项卡Tab组件示例代码

    在Android应用开发中,选项卡(Tab)组件是构建用户界面时常见的元素,它用于将大量内容分隔成可切换的区域,以提高用户体验。`TestTab`项目提供了一系列的示例代码,帮助开发者理解如何在Android应用中实现和管理...

    Android Design新控件之TabLaout(二),仿微信实现App底部Tab布局

    本篇文章主要探讨如何使用Android Design Support Library中的TabLayout组件来实现类似微信App底部Tab的效果。我们将深入理解TabLayout的工作原理,以及如何与ViewPager配合使用,为用户提供流畅的导航体验。 ...

    组件-uniapp中tab切换,底部内容跟着移动,相反,底部移动,tab也跟着切换-组件

    在uni-app框架中,开发移动端...总的来说,uni-app中的滚动Tab组件实现涉及HTML结构设计、CSS样式布局、事件监听和处理以及数据驱动的逻辑。通过合理地组合这些技术,我们可以构建出高效且用户体验良好的滚动Tab组件。

    Fragment实现app Tab主页

    在实现Tab主页时,Fragment尤其常用,因为它们可以用来创建可切换的页面,模拟传统的Tab布局。然而,如果在Tab切换时频繁使用`FragmentManager.replace()`方法,可能会遇到应用程序崩溃的问题。本文将深入探讨如何...

    一个漂亮的Tab效果

    标题“一个漂亮的Tab效果”和描述“Div+Css实现的一个漂亮的Tab样式效果”指出,我们将探讨如何使用HTML的`div`元素和CSS来创建美观的Tab组件。 Tab样式通常包括一组可切换的面板,每个面板代表一个独立的内容区域...

    RadioGroup实现APP首页底部Tab的切换

    本篇文章将详细介绍如何利用`RadioGroup`组件来实现APP首页底部Tab的切换功能。 `RadioGroup`是Android SDK提供的一种控件,它允许我们在一组单选按钮(RadioButton)中进行互斥的选择。在底部Tab切换场景中,我们...

    tablayout+recyclerview 实现仿淘宝、京东商品详情滑动切换tab效果

    在Android应用开发中,创建一个类似淘宝或...通过以上步骤,我们可以实现一个类似淘宝、京东商品详情页的滑动切换Tab效果。这个效果使得用户在查看商品信息时,可以方便地浏览评价和店铺介绍,提升了整体的使用体验。

    Android-自定义蚂蜂窝app滑动tab实现波浪线滑动View

    本文将深入探讨如何实现“Android-自定义蚂蜂窝app滑动tab实现波浪线滑动View”的功能,这属于Android开发中的“其它控件”类别。 首先,我们需要理解“蚂蜂窝app滑动tab”的概念。滑动tab通常指的是...

    Tab页面实现代码

    在这个名为"Tab页面实现代码"的Eclipse Android工程中,开发者使用了PagerAdapter来实现Tab页面布局。PagerAdapter是Android SDK提供的一种适配器,专门用于处理TabLayout与ViewPager之间的数据绑定和视图切换。 ...

    ActionBar用Tab+ViewPager+Fragment实现快速导航.

    标题提到的"ActionBar用Tab+ViewPager+Fragment实现快速导航"是一种常见的做法,它充分利用了Android SDK提供的组件和模式来创建一个可滑动、分页的界面,使用户能够轻松地在多个内容区域之间切换。以下是对这个主题...

    4种App主界面Tab实现方法的源代码

    本资源包含了四种实现App主界面Tab的源代码,旨在帮助开发者理解并掌握不同的实现方式,提升用户体验。下面我们将详细探讨这四种方法。 1. **Android原生TabLayout** Android SDK提供了一个名为`TabLayout`的组件...

    Tab Layout(选项卡布局)

    在XML布局文件中,添加`TabLayout`组件,并设置相应的属性,如`app:tabMode`(决定标签的显示方式,横向滚动或固定数量)和`app:tabGravity`(决定标签如何对齐): ```xml android:id="@+id/tab_layout" ...

    Tab选项卡页面滑动切换

    在“tab滑动效果Demo”这个项目中,很可能包含了实现上述功能的代码示例和资源文件。通过查看和分析这些文件,开发者可以学习如何在实际项目中实现选项卡滑动切换效果,包括自定义滑动动画、响应手势事件以及优化...

    Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

    `TabLayout`是Android Design Support Library中的一个重要组件,它提供了美观且易于使用的标签页功能,可以与`ViewPager`结合使用,实现底部Tab栏的交互效果。本文将详细介绍如何使用`TabLayout`和`ViewPager`在...

    vue.js移动端tab组件的封装实践实例

    为了实现Tab组件的样式和功能,文章中使用了Stylus作为CSS预处理器,这是因为Stylus来自于Node.js社区,且作者认为它比较高效。尽管如此,具体使用Stylus的细节不在文章讨论范围之内。 在实现Tab组件时,使用了Vue...

    Android中底部tab,中间凸起按钮的效果

    综上所述,实现Android应用中的底部tab中间凸起按钮效果,需要结合自定义布局、监听器、动画和Material Design库等技术。通过精心设计和不断优化,我们可以创建出既美观又实用的底部导航栏,为用户提供直观、易用的...

    BottomNavigationView实现material design 的tab选项卡效果

    要在Android应用中实现Material Design的tab选项卡效果,首先需要在项目中添加相关的依赖。在`build.gradle`(Module: app)文件中,确保添加了以下依赖: ```gradle dependencies { implementation '...

Global site tag (gtag.js) - Google Analytics