数字孪生场景下基于UIScrollView的下拉界面动态展示方法与流程

阅读：评论：0

数字孪生场景下基于uiscrollview的下拉界面动态展示方法
技术领域
1.本发明涉及图像处理技术领域，具体是一种基于 uiscrollview的下拉界面动态展示方法。

背景技术：

2.手机屏幕大小是极其有限的，因此直接展示在用户眼前的内容也相当有限，当展示的内容超出一个屏幕时，需要用户对屏幕内容进行拖动或缩放来查看屏幕或窗口区域外的内容。例如，在手机屏幕上显示内容丰富的网页或者很大的图片，其高度需要手机屏幕高度几倍的才能展示完整。uiscrollview(滚动视图)是一个在日常开发中使用频率极高的容器视图控件，它允许用户通过滚动和缩放的方式查看超出屏幕区域大小的内容。
3.在数字孪生场景下，使用手指快速滑动方法，手机界面有加速、减速的弹动效果；使用手指慢速滑动方法，手机界面随行随止。当滑动到达界面边界位置后，即超出当前预定显示区域，超出部分会显示空白，使得界面显示没有延展性，操作卡顿影响界面效果。

技术实现要素：

4.本发明旨在解决上述提到的各种问题，进而提供一种应用于数字孪生场景下基于 uiscrollview的下拉界面动态展示方法。通过该方法使手机界面随着用户操作随意动态拉伸变形，充分利用手机屏幕整个显示区域。
5.为解决上述问题，本发明所采用的技术方案是：数字孪生场景下基于 uiscrollview的下拉界面动态展示方法，其特殊之处在于，包括：步骤1：快速滑动手机屏幕或按住手机界面上下拉动；步骤2：手机响应于步骤1的触控操作，界面实现加减速动态弹动，当界面在到达顶部、底部边界的位置后，随着弹动的进行，超出当前预定显示区域，其后通过以下方法使得界面完成动态拉伸变形：步骤2.1：创建一个带有 xib 文件的视图控制器viewcontroller ，所述视图控制器用以控制相应的逻辑处理及视图view上的数据源展示；步骤2.2：在视图控制器viewcontroller的 xib 文件中初始化一个滚动视图uiscrollview，设置滚动视图uiscrollview的父控件为视图控制器viewcontroller 的视图 view，固定其上、下、左、右与视图view的距离为0，宽、高与视图view相等并随视图view变化；打开滚动视图uiscrollview 的滚动功能属性scrolling enable 和弹跳功能属性bounce；滚动视图uiscrollview 横、纵滚动方向选其一；步骤2.3：在滚动视图uiscrollview上添加一个子视图subview，固定上、左、右与滚动视图uiscrollview的距离为 0，宽与其父视图相等并随滚动视图uiscrollview变化，高度subviewheight为一个定值并且不随滚动视图uiscrollview变化；子视图subview 设置背景或背景图片，效果更明显。
6.步骤2.4：在视图控制器中添加滚动视图uiscrollview、子视图 subview 的引用和操作代理，通过滚动视图uiscrollview的方法 scrollviewdidscroll实时监听滚动视图uiscrollview上下滑动偏移量contentoffset；通过监听偏移量contentoffset 获取实时偏移大小，据此动态改变滑动时子视图subview的坐标值和显示高度，在界面上呈现出动态拉伸压缩效果。
7.进一步地，步骤2.1中，所述xib 文件使用自适应子控件autoresizing subviews 来控制其子视图的位置、大小。
8.进一步地，步骤2.3中，设置子视图subview 中子控件的位置、大小，以及界面变动后的显示样式，偏上方的控件固定顶部距离；偏下方的控件固定底部距离；界面滑动时上方控件位置保持不变，下方控件回随视图移动而变动。
9.进一步地，步骤2.4中，当滑动方向的偏移量contentoffset小于 0 时，重新给子视图subview 的位置属性frame 赋值，赋值大小为：非滑动方向坐标值不变；滑动方向坐标值为偏移量contentoffset在这个方向上的值；宽度不变；高度为子视图的高度subviewheight减去偏移量contentoffset在这个方向上的值。
10.进一步地，还包括步骤2.5：设置子视图subview上的控件位置，偏上方的控件，设置固定顶部距离；偏下方的控件固定底部距离。界面滑动时上方控件位置保持不变，下方控件回随视图移动而变动，实现更加细致的动态拉伸效果。
11.本发明通过设置uiscrollview 以及内部子视图位置、显示样式，根据屏幕大小铺满或等比例缩放铺满，在界面滑动到界面顶部时，展示一种界面在无限空间内拉伸的效果，使用户整体使用操作顺滑，提高用户使用体验。
具体实施方式
12.下面以苹果手机的移动操作系统ios为例，对本发明的下拉界面动态展示方案作进一步详细说明。
13.实施例1数字孪生场景下基于 uiscrollview的ios下拉界面动态展示方法，包括：步骤1：快速滑动手机的屏幕或按住手机界面上下拉动；步骤2：手机响应于步骤1的触控操作，界面实现加减速动态弹动，当界面在到达顶部、底部边界的位置后，随着弹动的进行，超出当前预定显示区域，其后通过以下方法使得界面完成动态拉伸变形：步骤2.1：创建一个带有 xib 文件的视图控制器viewcontroller，由此视图控制器来控制相应的逻辑处理及视图view上的数据源展示；xib 文件使用自适应子控件autoresizing subviews 来控制其子视图的位置、大小。
14.步骤2.2：在视图控制器viewcontroller的 xib 文件中，初始化一个滚动视图uiscrollview，设置滚动视图uiscrollview的父控件为视图控制器viewcontroller 的视图view，固定上、下、左、右与视图view的距离为0，宽、高与视图view相等并随视图view变化。打开滚动视图uiscrollview 的滚动功能属性scrolling enable 和弹跳功能属性bounce，滚动视图uiscrollview 横、纵滚动方向选其一。
15.步骤2.3：在滚动视图uiscrollview上添加一个子视图subview，固定上、左、右与
滚动视图uiscrollview的距离为 0，宽与其父视图相等并随滚动视图uiscrollview变化，高度subviewheight为一个定值并且不随滚动视图uiscrollview变化。子视图subview 设置背景或背景图片，效果更明显。
16.步骤2.4：在视图控制器中添加滚动视图uiscrollview、子视图 subview 的引用和操作代理，通过滚动视图uiscrollview的方法 scrollviewdidscroll实时监听滚动视图uiscrollview上下滑动偏移量contentoffset。当滑动方向的偏移量contentoffset小于 0 时，重新给子视图subview 的位置属性frame 赋值，赋值大小为：非滑动方向坐标值不变；滑动方向坐标值为偏移量contentoffset在这个方向上的值；宽度不变；高度为子视图的高度subviewheight减去偏移量contentoffset在这个方向上的值（值为负数）。监听偏移量contentoffset 获取实时偏移大小，据此动态改变滑动时子视图subview的坐标值和显示高度，在界面上呈现出动态拉伸压缩效果。
17.步骤2.5：设置子视图subview的控件位置，偏上方的控件固定顶部距离；偏下方的控件固定底部距离。界面滑动时上方控件位置保持不变，下方控件回随视图移动而变动，实现更加细致的动态拉伸效果。
18.本发明的方法可以让界面随着下滑拉伸延展显示自定义的界面，在自定义界面中还可以设置跟随滑动位置变动和不变的部分，整个界面动态变化，提高用户使用体验。

技术特征：

1.数字孪生场景下基于 uiscrollview的下拉界面动态展示方法，其特征在于，包括：步骤1：快速滑动手机屏幕或按住手机界面上下拉动；步骤2：手机响应于所述步骤1的触控操作，界面实现加减速动态弹动，当界面在到达顶部、底部边界的位置后，随着弹动的进行，超出当前预定显示区域，其后通过以下方法使得界面完成动态拉伸变形：步骤2.1：创建一个带有 xib 文件的视图控制器，所述视图控制器用以控制相应的逻辑处理及视图上的数据源展示；步骤2.2：在视图控制器的 xib 文件中初始化一个滚动视图，设置滚动视图的父控件为视图控制器的视图，固定其上、下、左、右与视图的距离为0，宽、高与视图相等并随视图变化；打开滚动视图的滚动功能属性和弹跳功能属性；滚动视图横、纵滚动方向选其一；步骤2.3：在滚动视图上添加一个子视图，固定上、左、右与滚动视图的距离为 0，宽与其父视图相等并随滚动视图变化，高度为一个定值并且不随滚动视图变化；步骤2.4：在视图控制器中添加滚动视图、子视图的引用和操作代理，通过滚动视图的方法 scrollviewdidscroll实时监听滚动视图上下滑动偏移量；通过监听偏移量获取实时偏移大小，据此动态改变滑动时子视图的坐标值和显示高度，在界面上呈现出动态拉伸压缩效果。2.如权利要求1所述的数字孪生场景下基于 uiscrollview的下拉界面动态展示方法，其特征在于，步骤2.1中，所述xib 文件使用自适应子控件来控制其子视图的位置、大小。3.如权利要求1所述的数字孪生场景下基于 uiscrollview的下拉界面动态展示方法，其特征在于，步骤2.3中，设置子视图中子控件的位置、大小，以及界面变动后的显示样式，偏上方的控件固定顶部距离；偏下方的控件固定底部距离；界面滑动时上方控件位置保持不变，下方控件回随视图移动而变动。4.如权利要求1所述的数字孪生场景下基于 uiscrollview的下拉界面动态展示方法，其特征在于，步骤2.4中，当滑动方向的偏移量小于 0 时，重新给子视图的位置属性赋值，赋值大小为：非滑动方向坐标值不变；滑动方向坐标值为偏移量在这个方向上的值；宽度不变；高度为子视图的高度减去偏移量在这个方向上的值。5.如权利要求1所述的数字孪生场景下基于 uiscrollview的下拉界面动态展示方法，其特征在于，还包括步骤2.5：设置子视图的控件位置，偏上方的控件固定顶部距离；偏下方的控件固定底部距离；界面滑动时上方控件位置保持不变，下方控件回随视图移动而变动。

技术总结

本发明涉及数字孪生场景下的基于UIScrollView的下拉界面动态展示方法，属于图像处理技术领域。数字孪生场景下基于UIScrollView的下拉界面动态展示方法，其特征在于，包括：步骤1：快速滑动手机屏幕或按住手机界面上下拉动；步骤2：手机响应步骤1的触控操作，界面实现加减速动态弹动，当界面在到达顶部、底部边界的位置后，随着弹动的进行，超出当前预定显示区域，其后通过本发明方法使得界面动态拉伸变形。本发明展示了一种界面在无限空间内拉伸的效果，使用户整体使用操作顺滑，提高用户使用体验。提高用户使用体验。