CN115708345A - 数字孪生场景下基于UIScrollView的下拉界面动态展示方法 - Google Patents
数字孪生场景下基于UIScrollView的下拉界面动态展示方法 Download PDFInfo
- Publication number
- CN115708345A CN115708345A CN202310016914.6A CN202310016914A CN115708345A CN 115708345 A CN115708345 A CN 115708345A CN 202310016914 A CN202310016914 A CN 202310016914A CN 115708345 A CN115708345 A CN 115708345A
- Authority
- CN
- China
- Prior art keywords
- view
- interface
- uiscrollview
- control
- scroll
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及数字孪生场景下的基于UIScrollView的下拉界面动态展示方法，属于图像处理技术领域。数字孪生场景下基于UIScrollView的下拉界面动态展示方法，其特征在于，包括：步骤1：快速滑动手机屏幕或按住手机界面上下拉动；步骤2：手机响应步骤1的触控操作，界面实现加减速动态弹动，当界面在到达顶部、底部边界的位置后，随着弹动的进行，超出当前预定显示区域，其后通过本发明方法使得界面动态拉伸变形。本发明展示了一种界面在无限空间内拉伸的效果，使用户整体使用操作顺滑，提高用户使用体验。
Description
技术领域
本发明涉及图像处理技术领域，具体是一种基于 UIScrollView的下拉界面动态展示方法。
背景技术
手机屏幕大小是极其有限的，因此直接展示在用户眼前的内容也相当有限，当展示的内容超出一个屏幕时，需要用户对屏幕内容进行拖动或缩放来查看屏幕或窗口区域外的内容。例如，在手机屏幕上显示内容丰富的网页或者很大的图片，其高度需要手机屏幕高度几倍的才能展示完整。UIScrollView(滚动视图)是一个在日常开发中使用频率极高的容器视图控件，它允许用户通过滚动和缩放的方式查看超出屏幕区域大小的内容。
在数字孪生场景下，使用手指快速滑动方法，手机界面有加速、减速的弹动效果；使用手指慢速滑动方法，手机界面随行随止。当滑动到达界面边界位置后，即超出当前预定显示区域，超出部分会显示空白，使得界面显示没有延展性，操作卡顿影响界面效果。
发明内容
本发明旨在解决上述提到的各种问题，进而提供一种应用于数字孪生场景下基于UIScrollView的下拉界面动态展示方法。通过该方法使手机界面随着用户操作随意动态拉伸变形，充分利用手机屏幕整个显示区域。
为解决上述问题，本发明所采用的技术方案是：
数字孪生场景下基于 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 设置背景色或背景图片，效果更明显。
步骤2.4：在视图控制器中添加滚动视图UIScrollView、子视图 subview 的引用和操作代理，通过滚动视图UIScrollView的方法 scrollViewDidScroll实时监听滚动视图UIScrollView上下滑动偏移量contentOffset；通过监听偏移量contentOffset 获取实时偏移大小，据此动态改变滑动时子视图subview的坐标值和显示高度，在界面上呈现出动态拉伸压缩效果。
进一步地，步骤2.1中，所述xib 文件使用自适应子控件Autoresizing subviews来控制其子视图的位置、大小。
进一步地，步骤2.3中，设置子视图subview 中子控件的位置、大小，以及界面变动后的显示样式，偏上方的控件固定顶部距离；偏下方的控件固定底部距离；界面滑动时上方控件位置保持不变，下方控件回随视图移动而变动。
进一步地，步骤2.4中，当滑动方向的偏移量contentOffset小于 0 时，重新给子视图subview 的位置属性frame 赋值，赋值大小为：非滑动方向坐标值不变；滑动方向坐标值为偏移量contentOffset在这个方向上的值；宽度不变；高度为子视图的高度subviewHeight减去偏移量contentOffset在这个方向上的值。
进一步地，还包括步骤2.5：设置子视图subview上的控件位置，偏上方的控件，设置固定顶部距离；偏下方的控件固定底部距离。界面滑动时上方控件位置保持不变，下方控件回随视图移动而变动，实现更加细致的动态拉伸效果。
本发明通过设置UIScrollView 以及内部子视图位置、显示样式，根据屏幕大小铺满或等比例缩放铺满，在界面滑动到界面顶部时，展示一种界面在无限空间内拉伸的效果，使用户整体使用操作顺滑，提高用户使用体验。
具体实施方式
下面以苹果手机的移动操作***iOS为例，对本发明的下拉界面动态展示方案作进一步详细说明。
实施例1
数字孪生场景下基于 UIScrollView的iOS下拉界面动态展示方法，包括：
步骤1：快速滑动手机的屏幕或按住手机界面上下拉动；
步骤2：手机响应于步骤1的触控操作，界面实现加减速动态弹动，当界面在到达顶部、底部边界的位置后，随着弹动的进行，超出当前预定显示区域，其后通过以下方法使得界面完成动态拉伸变形：
步骤2.1：创建一个带有 xib 文件的视图控制器ViewController，由此视图控制器来控制相应的逻辑处理及视图View上的数据源展示；xib 文件使用 自适应子控件Autoresizing subviews 来控制其子视图的位置、大小。
步骤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 设置背景色或背景图片，效果更明显。
步骤2.4：在视图控制器中添加滚动视图UIScrollView、子视图 subview 的引用和操作代理，通过滚动视图UIScrollView的方法 scrollViewDidScroll实时监听滚动视图UIScrollView上下滑动偏移量contentOffset。当滑动方向的偏移量contentOffset小于 0时，重新给子视图subview 的位置属性frame 赋值，赋值大小为：非滑动方向坐标值不变；滑动方向坐标值为偏移量contentOffset在这个方向上的值；宽度不变；高度为子视图的高度subviewHeight减去偏移量contentOffset在这个方向上的值（值为负数）。监听偏移量contentOffset 获取实时偏移大小，据此动态改变滑动时子视图subview的坐标值和显示高度，在界面上呈现出动态拉伸压缩效果。
步骤2.5：设置子视图subview的控件位置，偏上方的控件固定顶部距离；偏下方的控件固定底部距离。界面滑动时上方控件位置保持不变，下方控件回随视图移动而变动，实现更加细致的动态拉伸效果。
本发明的方法可以让界面随着下滑拉伸延展显示自定义的界面，在自定义界面中还可以设置跟随滑动位置变动和不变的部分，整个界面动态变化，提高用户使用体验。
Claims (5)
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：设置子视图的控件位置，偏上方的控件固定顶部距离；偏下方的控件固定底部距离；界面滑动时上方控件位置保持不变，下方控件回随视图移动而变动。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310016914.6A CN115708345B (zh) | 2023-01-06 | 2023-01-06 | 数字孪生场景下基于UIScrollView的下拉界面动态展示方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310016914.6A CN115708345B (zh) | 2023-01-06 | 2023-01-06 | 数字孪生场景下基于UIScrollView的下拉界面动态展示方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115708345A true CN115708345A (zh) | 2023-02-21 |
| CN115708345B CN115708345B (zh) | 2023-04-18 |
Family
ID=85213090
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310016914.6A Active CN115708345B (zh) | 2023-01-06 | 2023-01-06 | 数字孪生场景下基于UIScrollView的下拉界面动态展示方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115708345B (zh) |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140298254A1 (en) * | 2013-03-07 | 2014-10-02 | Tencent Technology (Shenzhen) Company Limited | View mode switch of graphical user interface |
| CN108334393A (zh) * | 2018-01-10 | 2018-07-27 | 武汉斗鱼网络科技有限公司 | 一种iOS端视图资源复用方法、存储介质、设备及*** |
| CN108419116A (zh) * | 2018-04-16 | 2018-08-17 | 北京酷我科技有限公司 | 一种竖版视频与滚动区联动的方法 |
| CN109542304A (zh) * | 2018-11-22 | 2019-03-29 | 北京字节跳动网络技术有限公司 | 显示内容的加载方法、装置、设备及存储介质 |
| CN110175023A (zh) * | 2019-05-28 | 2019-08-27 | 四川长虹电器股份有限公司 | 基于iOS***中的UIScrollView多级嵌套联动的方法及*** |
| CN110568974A (zh) * | 2019-09-11 | 2019-12-13 | 北京齐尔布莱特科技有限公司 | 一种滑动视图显示方法、装置和移动终端 |
| CN111506242A (zh) * | 2020-05-28 | 2020-08-07 | 支付宝(杭州)信息技术有限公司 | 实现页面视图的弹性滚动效果的方法及装置和电子设备 |
| CN112445566A (zh) * | 2020-11-30 | 2021-03-05 | 北京达佳互联信息技术有限公司 | 页面展示方法、装置、电子设备及存储介质 |
| CN114756155A (zh) * | 2022-04-24 | 2022-07-15 | 康键信息技术（深圳）有限公司 | 一种应用于页面展示的滑动控制方法及装置 |
| CN115048020A (zh) * | 2022-05-06 | 2022-09-13 | 全芯(佛山)科技有限公司 | 一种增加滚动视图交互感知的方法及终端 |
-
2023
- 2023-01-06 CN CN202310016914.6A patent/CN115708345B/zh active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140298254A1 (en) * | 2013-03-07 | 2014-10-02 | Tencent Technology (Shenzhen) Company Limited | View mode switch of graphical user interface |
| CN108334393A (zh) * | 2018-01-10 | 2018-07-27 | 武汉斗鱼网络科技有限公司 | 一种iOS端视图资源复用方法、存储介质、设备及*** |
| CN108419116A (zh) * | 2018-04-16 | 2018-08-17 | 北京酷我科技有限公司 | 一种竖版视频与滚动区联动的方法 |
| CN109542304A (zh) * | 2018-11-22 | 2019-03-29 | 北京字节跳动网络技术有限公司 | 显示内容的加载方法、装置、设备及存储介质 |
| CN110175023A (zh) * | 2019-05-28 | 2019-08-27 | 四川长虹电器股份有限公司 | 基于iOS***中的UIScrollView多级嵌套联动的方法及*** |
| CN110568974A (zh) * | 2019-09-11 | 2019-12-13 | 北京齐尔布莱特科技有限公司 | 一种滑动视图显示方法、装置和移动终端 |
| CN111506242A (zh) * | 2020-05-28 | 2020-08-07 | 支付宝(杭州)信息技术有限公司 | 实现页面视图的弹性滚动效果的方法及装置和电子设备 |
| CN112445566A (zh) * | 2020-11-30 | 2021-03-05 | 北京达佳互联信息技术有限公司 | 页面展示方法、装置、电子设备及存储介质 |
| CN114756155A (zh) * | 2022-04-24 | 2022-07-15 | 康键信息技术（深圳）有限公司 | 一种应用于页面展示的滑动控制方法及装置 |
| CN115048020A (zh) * | 2022-05-06 | 2022-09-13 | 全芯(佛山)科技有限公司 | 一种增加滚动视图交互感知的方法及终端 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115708345B (zh) | 2023-04-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9772769B2 (en) | Mobile terminal device and display control method thereof | |
| CN107835461B (zh) | 焦点移动控制方法、智能电视及计算机可读存储介质 | |
| CN104503655B (zh) | 应用程序界面显示控制方法及装置 | |
| CN101930337B (zh) | 屏幕显示设定的处理方法与嵌入式*** | |
| CN108304132B (zh) | 图形显示方法、装置、设备及存储介质 | |
| US9201565B2 (en) | Value specification in a responsive interface control | |
| KR20200142065A (ko) | 글로벌 특수 효과의 전환 방법, 전환 장치, 단말 설비 및 저장 매체 | |
| CN104536650B (zh) | 一种基于ios***的视差翻页人机交互方法 | |
| CN105183338A (zh) | 对象处理方法 | |
| CN106648375A (zh) | 一种移动终端横向视频播放页面操作方法及*** | |
| WO2023155811A1 (zh) | 页面布局调整方法、装置 | |
| WO2018068364A1 (zh) | 用于页面显示的方法、装置、图形用户界面及移动终端 | |
| CN115708345B (zh) | 数字孪生场景下基于UIScrollView的下拉界面动态展示方法 | |
| CN106155453B (zh) | 一种目标对象的属性调整方法及装置 | |
| CN215436217U (zh) | 一种车辆信息控制***及车辆 | |
| CN106325490A (zh) | 控制电子设备的方法及电子设备 | |
| CN109858000A (zh) | 表格处理方法、装置、***、存储介质及交互智能平板 | |
| EP2662751A1 (en) | Method and device for an electronic terminal to realize desktop switching, and electronic terminal | |
| US11123940B2 (en) | Servo press machine and setting method for servo press machine | |
| CN107015726A (zh) | 一种动态信息展示方法及装置 | |
| CN103513926A (zh) | 动态桌布显示方法及新视频信息显示方法与手持移动*** | |
| CN115421641A (zh) | 一种android卡片横移的特效动画方法及其实现装置 | |
| CN106162299A (zh) | 一种osd动画素材数据的播放方法和装置 | |
| CN114756159A (zh) | 智能交互平板及其数据处理方法、装置、计算机存储设备 | |
| CN112363666A (zh) | 一种电子白板的窗口调整方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |