CN105843493B - 一种首页幻灯展示及操作方法及装置 - Google Patents

一种首页幻灯展示及操作方法及装置 Download PDF

Info

Publication number
CN105843493B
CN105843493B CN201610200612.4A CN201610200612A CN105843493B CN 105843493 B CN105843493 B CN 105843493B CN 201610200612 A CN201610200612 A CN 201610200612A CN 105843493 B CN105843493 B CN 105843493B
Authority
CN
China
Prior art keywords
view
sliding
display
finger
page
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.)
Active
Application number
CN201610200612.4A
Other languages
English (en)
Other versions
CN105843493A (zh
Inventor
谢东华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201610200612.4A priority Critical patent/CN105843493B/zh
Publication of CN105843493A publication Critical patent/CN105843493A/zh
Application granted granted Critical
Publication of CN105843493B publication Critical patent/CN105843493B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0483—Interaction with page-structured environments, e.g. book metaphor

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明属于互联网移动端应用开发领域，是一种外观上的用户体验。具体涉及一种首页幻灯展示及操作方法及装置。通过自定义的底部滑动视图，并所有幻灯视图都添加在滑动视图上，能够在用户手指拖拽结束后，在首页同时显示多附幻灯片，本发明能够显示多张图片并支持滑动与首尾轮换播放，以复用的方式展示给用户流畅的体验。

Description

一种首页幻灯展示及操作方法及装置
技术领域
本发明属于互联网移动端应用开发领域，是一种外观上的用户体验。具体涉及一种首页幻灯展示及操作方法及装置。
背景技术
首页幻灯模式是一种在首页上用图片轮换播放的形式给应用推荐内容。为了针对iPad屏幕尺寸较宽的特点，采用与世面幻灯不同的多图片幻灯方式，页面显示多张图片。用户能观看到更多信息与更好的体验及图片比例。
发明内容
本发明主要是解决现有技术所存在的技术问题；提供了一种能够显示多张图片并支持滑动与首尾轮换播放，以复用的方式展示给用户流畅的体验的一种首页幻灯展示及操作方法及装置。
本发明的上述技术问题主要是通过下述技术方案得以解决的：
一种首页幻灯展示及操作方法，包括：
S1、在首页展示N幅幻灯视图，其中N大于等于2，具体包括：
S1.1、初始化视图并通过http协议从网络获取json格式数据，解析成NSObject对象，所述json格式数据为JavaScript Object Notation格式数据，包括图片下载地址与标题。
S1.2、根据获取的json格式网络数据刷新幻灯视图，幻灯视图使用自定义的底部滑动视图，重载了底部滑动视图的方法，所有幻灯视图都添加在滑动视图上。
S2、当前显示视图能够被用户滑动后更新为下一组显示的N幅的幻灯视图，具体包括：
S2.1、在S1.2中根据手指拖动的位置计算底部滑动视图的ContentOffset的值，最终页面停留的位置，其中，ContentOffset为系统控件UIScrollView的属性变量。
S2.2、设置pageControl的数量，更新底部滑动视图的视图内容。
S2.3、手指拖拽结束后清空当前视图并显示滑动后停止的最终视图。
优选地，所述S1.2中，自定义底部滑动视图的具体步骤包括：
S1.21、创建一个自定义滑动视图DYScrollView继承自iOS系统的UIScrollView视图。
S1.22、实现UIScrollView的代理协议UIScrollViewDelegate，并在初始化时将系统UIScrollView的代理设为自身。
S1.23、定义变量PageWidth和PageHeight用于标识每个页面的滑动距离。
S1.24、定义一个变量DYPagingEnabled标识，该标识表示是否开启整页滑动。
S1.25、重载UIScrollView代理协议方法，使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的滑动距离。
优选地，所述S1.25中，重载UIScrollView协议方法的具体步骤包括：
S1.251、当手指将要开始拖拽时，控件scrollViewWillBeginDragging用变量dragDistance记录手指拖拽的位移。
S1.252、当手指将要结束拖拽时，控件scrollViewWillEndDragging计算手指拖拽结束时的差值偏移量。
S1.253、当手指结束拖拽时，惯性控件scrollViewDidEndDecelerating在手指结束拖拽时的移动惯性为0的时候执行计算页面的实际偏移量。
S1.254、当手指结束拖拽时的拖拽动画结束时，控件scrollViewDidEndScrollingAnimation在滑动动画停止时执行计算页面实际偏移量。
S1.255、当手指结束缩放手势时控件scrollViewDidEndZooming在视图缩放结束后执行计算页面实际偏移量。
S1.256、控件scrollViewDidEndDragging、
控件scrollViewDidEndDecelerating、
控件scrollViewDidEndScrollingAnimation、
控件scrollViewDidEndZooming系统协议方法中实现计算scrollView页面实际偏移量.使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的页面长度，具体方法是：
A、计算单个页面长度pageLength＝根据设计的变量PageWidth和PageHeight乘上缩放比例zoomScale。
B、计算需要移动的页面索引index＝当前滑动偏移量/页面长度pageLength.取绝对值并根据拖动速率判断最终的页面所索引。
C、计算页面的实际偏移量＝需要移动的页面索引index*单个页面长度pageLength.并判断是否超出显示范围。
优选地，所述S2.3中，清空当前视图并更新显示的具体方法是：
S2.31、设置定时器，用于每隔一段时间执行滑动方法使滑动视图移动到指定位置,清空之前的视图，其中，执行滑动方法使滑动视图移动到指定位置是通过设置scrollView的ContentOffset属性来实现。
S2.32、关闭定时器，准备显示的数据，并比较当前设定的显示视图数量N与视图总数量M的大小：
若当前视图总数量M大于显示视图数量N；则在临时数据中,将尾部数据插入临时数组顶部,将头部数据添加临时数组尾部，从而组成循环的结构。
若当前视图总数量M小于显示视图数量N；则将滑动视图scrollView的ContentSize属性设为CGRectZero即为0，使视图不能滑动,并将滑动视图中的元素居中显示。
S2.33、计算并设置底部滑动视图的长度，滑动视图的长度＝显示视图数量N*单个显示视图长度；滑动视图的长度用于调整整个滑动的长度与能显示在滑动视图上的显示视图的数量，滑动视图的长度小于(显示视图的数量*单个显示视图的长度)，则超出滑动视图的显示视图将不能显示。
S2.34、调整显示视图的位置：如果显示视图数量小于N，将显示视图等分在滑动视图中心位置；如果显示视图数量大于或等于N，将第一个显示视图放在滑动视图中心位置。
S2.35、当手指拖拽结束后，计算当前的索引位置，并比较当前设定的显示视图数量N与索引的大小：
当索引小于N时，说明显示视图向前移动了，跳转到尾部；
当索引大于或等于N时，说明显示视图向后移动超过最后一条数据，跳转到头部。
S2.36、滑动完毕后开启定时器，即在手指拖拽的时候关闭定时器,在拖拽结束后开启定时器,在用户不操作时由定时器执行自动滑动。
一种首页幻灯展示及操作装置，包括：
显示模块：在首页展示N幅幻灯视图，其中N大于等于2，具体包括：
初始化单元：初始化视图并通过http协议从网络获取json格式数据，解析成NSObject对象，所述json格式数据为JavaScript Object Notation格式数据，包括图片下载地址与标题；
更新显示单元：根据获取的json格式网络数据刷新幻灯视图，幻灯视图使用自定义的底部滑动视图，重载了底部滑动视图的方法，所有幻灯视图都添加在滑动视图上；
视图滚动模块：将当前显示视图根据用户滑动后更新为下一组显示的N幅的幻灯视图，具体包括：
位置计算单元：在更新显示单元显示幻灯视图时，根据手指拖动的位置计算底部滑动视图的ContentOffset的值，最终页面停留的位置，所述ContentOffset为系统控件UIScrollView的属性变量，ContentOffset值的改变在自定义视图中实现计算方法；
主题更新单元：设置OS系统控件pageControl的数量，新底部滑动视图的系统控件item；
清空更新视图单元：在手指拖拽结束后清空当前视图并显示滑动后停止的最终视图。
优选地，更新显示单元进行自定义底部滑动视图包括：
S1.21、创建一个自定义滑动视图DYScrollView继承自iOS系统的UIScrollView视图。
S1.22、实现UIScrollView的代理协议UIScrollViewDelegate，并在初始化时将系统UIScrollView的代理设为自身。
S1.23、定义变量PageWidth和PageHeight用于标识每个页面的滑动距离。
S1.24、定义一个变量DYPagingEnabled标识，该标识表示是否开启整页滑动。
S1.25、重载UIScrollView代理协议，使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的滑动距离。
优选地，所述S1.25中，重载UIScrollView协议包括：
S1.251、当手指将要开始拖拽时，控件scrollViewWillBeginDragging用变量dragDistance记录手指拖拽的位移。
S1.252、当手指将要结束拖拽时，控件scrollViewWillEndDragging计算手指拖拽结束时的差值偏移量。
S1.253、当手指结束拖拽时，惯性控件scrollViewDidEndDecelerating在手指结束拖拽时的移动惯性为0的时候执行计算页面的实际偏移量。
S1.254、当手指结束拖拽时的拖拽动画结束时，控件scrollViewDidEndScrollingAnimation在滑动动画停止时执行计算页面实际偏移量。
S1.255、当手指结束缩放手势时控件scrollViewDidEndZooming在视图缩放结束后执行计算页面实际偏移量。
S1.256、控件scrollViewDidEndDragging、
控件scrollViewDidEndDecelerating、
控件scrollViewDidEndScrollingAnimation、
控件scrollViewDidEndZooming系统协议方法中实现计算scrollView页面实际偏移量.使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的页面长度，具体方法是：
A、计算单个页面长度pageLength＝根据设计的变量PageWidth和PageHeight乘上缩放比例zoomScale。
B、计算需要移动的页面索引index＝当前滑动偏移量/页面长度pageLength.取绝对值并根据拖动速率判断最终的页面所索引。
C、计算页面的实际偏移量＝需要移动的页面索引index*单个页面长度pageLength.并判断是否超出显示范围。
优选地，清空更新视图单元在清空当前视图并更新显示具体包括：
S2.31、设置定时器,清空之前的视图。
S2.32、关闭定时器，准备显示的数据，并比较当前设定的显示视图数量N与视图总数量M的大小。
若当前视图总数量M大于显示视图数量N；则在临时数据中,将尾部数据插入临时数组顶部,将头部数据添加临时数组尾部，从而组成循环的结构。
若当前视图总数量M小于显示视图数量N；则将滑动视图scrollView的ContentSize属性设为CGRectZero即为0，使视图不能滑动,并将滑动视图中的元素居中显示。
S2.33、计算并设置底部滑动视图的长度，滑动视图的长度＝显示视图数量N*单个显示视图长度；滑动视图的长度用于调整整个滑动的长度与能显示在滑动视图上的显示视图的数量，如果滑动视图的长度小于(显示视图的数量*单个显示视图的长度)则超出滑动视图的显示视图将不能显示。
S2.34、调整显示视图的位置：如果显示视图数量小于N，将显示视图等分在滑动视图中心位置；如果显示视图数量大于或等于N，将第一个显示视图放在滑动视图中心位置。
S2.35、当手指拖拽结束后，索引跳转单元计算当前的索引位置，并比较当前设定的显示视图数量N与索引的大小：
当索引小于N时，说明显示视图向前移动了，跳转到尾部。
当索引大于或等于N时，说明显示视图向后移动超过最后一条数据，跳转到头部。
S2.36、滑动完毕后开启定时器，即手指拖拽的时候关闭定时器,在拖拽结束后开启定时器,在用户不操作时由定时器执行自动滑动。
因此，本发明具有如下优点：能够指定滑动的距离即每页视图的长度,显示多张图片并支持滑动与首尾轮换播放，以复用的方式展示给用户流畅的体验。
附图说明
图1为本发明的方法流程示意图。
图2是本发明的硬件连接结构示意图。
图3是图2中的清空更新视图单元的硬件连接结构示意图。
具体实施方式
下面通过实施例，并结合附图，对本发明的技术方案作进一步具体的说明。
一种首页幻灯展示及操作方法，包括：
S1、在首页展示N幅幻灯视图，其中N大于等于2，具体包括：
S1.1、初始化视图并通过http协议从网络获取json格式数据，解析成NSObject对象，所述json格式数据为JavaScript Object Notation格式数据，包括图片下载地址与标题。
S1.2、根据获取的json格式网络数据刷新幻灯视图，幻灯视图使用自定义的底部滑动视图，重载了底部滑动视图的方法，所有幻灯视图都添加在滑动视图上，自定义底部滑动视图的具体步骤包括：
S1.21、创建一个自定义滑动视图DYScrollView继承自iOS系统的UIScrollView视图。
S1.22、实现UIScrollView的代理协议UIScrollViewDelegate，并在初始化时将系统UIScrollView的代理设为自身。
S1.23、定义变量PageWidth和PageHeight用于标识每个页面的滑动距离。
S1.24、定义一个变量DYPagingEnabled标识，该标识表示是否开启整页滑动。
S1.25、重载UIScrollView代理协议方法，使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的滑动距离，在本步骤中，重载UIScrollView协议方法的具体步骤包括：
S1.251、当手指将要开始拖拽时，控件scrollViewWillBeginDragging用变量dragDistance记录手指拖拽的位移。
S1.252、当手指将要结束拖拽时，控件scrollViewWillEndDragging计算手指拖拽结束时的差值偏移量。
S1.253、当手指结束拖拽时，惯性控件scrollViewDidEndDecelerating在手指结束拖拽时的移动惯性为0的时候执行计算页面的实际偏移量。
S1.254、当手指结束拖拽时的拖拽动画结束时控件scrollViewDidEndScrollingAnimation在滑动动画停止时执行计算页面实际偏移量。
S1.255、当手指结束缩放手势时控件scrollViewDidEndZooming在视图缩放结束后执行计算页面实际偏移量。
S1.256、控件scrollViewDidEndDragging、
控件scrollViewDidEndDecelerating、
控件scrollViewDidEndScrollingAnimation、
控件scrollViewDidEndZooming系统协议方法中实现计算scrollView页面实际偏移量.使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的页面长度，具体方法是：
A、计算单个页面长度pageLength＝根据设计的变量PageWidth和PageHeight乘上缩放比例zoomScale。
B、计算需要移动的页面索引index＝当前滑动偏移量/页面长度pageLength.取绝对值并根据拖动速率判断最终的页面所索引。
C、计算页面的实际偏移量＝需要移动的页面索引index*单个页面长度pageLength.并判断是否超出显示范围。
S2、当前显示视图能够被用户滑动后更新为下一组显示的N幅的幻灯视图，具体包括：
S2.1、在S1.2中的系统方法中根据手指拖动的位置计算底部滑动视图的ContentOffset的值，最终页面停留的位置，其中，ContentOffset为系统控件UIScrollView的属性变量。
S2.2、设置pageControl的数量number，更新底部滑动视图的视图内容。
S2.3、手指拖拽结束后清空当前视图并显示滑动后停止的最终视图，清空当前视图并更新显示的具体方法是：
S2.31、设置定时器，用于每隔一段时间执行滑动方法使滑动视图移动到指定位置,清空之前的视图，其中，执行滑动方法使滑动视图移动到指定位置是通过设置scrollView的ContentOffset属性来实现。
S2.32、关闭定时器，准备显示的数据，并比较当前设定的显示视图数量N与视图总数量M的大小：
若当前视图总数量M大于显示视图数量N；则在临时数据中,将尾部数据插入临时数组顶部,将头部数据添加临时数组尾部，从而组成循环的结构。
若当前视图总数量M小于显示视图数量N；则将滑动视图scrollView的ContentSize属性设为CGRectZero即为0，使视图不能滑动,并将滑动视图中的元素居中显示。
S2.33、计算并设置底部滑动视图的长度。滑动视图的长度＝显示视图数量N*(单个显示视图长度)；滑动视图的长度用于调整整个滑动的长度与能显示在滑动视图上的显示视图的数量。如果滑动视图的长度小于(显示视图的数量*单个显示视图的长度)则超出滑动视图的显示视图将不能显示。
S2.34、调整显示视图的位置。如果显示视图数量小于N，将显示视图等分在滑动视图中心位置；如果显示视图数量大于或等于N，将第一个显示视图放在滑动视图中心位置。
S2.35、当手指拖拽结束后，计算当前的索引位置，并比较当前设定的显示视图数量N与索引的大小：
当索引小于N时，说明向前移动了，跳转到尾部。
当索引大于或等于N时，说明向后移动超过最后一条数据，跳转到头部。
S2.36、滑动完毕后开启定时器，即在手指拖拽的时候关闭定时器,在拖拽结束后开启定时器,在用户不操作时由定时器执行自动滑动。
一种首页幻灯展示及操作装置，包括：
显示模块：在首页展示N幅幻灯视图，其中N大于等于2，具体包括：
初始化单元：初始化视图并通过http协议从网络获取json格式数据，解析成NSObject对象，所述json格式数据为JavaScript Object Notation格式数据，包括图片下载地址与标题；
更新显示单元：根据获取的json格式网络数据刷新幻灯视图，幻灯视图使用自定义的底部滑动视图，重载了底部滑动视图的方法，所有幻灯视图都添加在滑动视图上，更新显示单元进行自定义底部滑动视图包括：
S1.21、创建一个自定义滑动视图DYScrollView继承自iOS系统的UIScrollView视图。
S1.22、实现UIScrollView的代理协议UIScrollViewDelegate，并在初始化时将系统UIScrollView的代理设为自身。
S1.23、定义变量PageWidth和PageHeight用于标识每个页面的滑动距离。
S1.24、定义一个变量DYPagingEnabled标识，该标识表示是否开启整页滑动。
S1.25、重载UIScrollView代理协议，使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的滑动距离，在本步骤中，重载UIScrollView协议方法包括：
S1.251、当手指将要开始拖拽时，控件scrollViewWillBeginDragging用变量dragDistance记录手指拖拽的位移。
S1.252、当手指将要结束拖拽时，控件scrollViewWillEndDragging计算手指拖拽结束时的差值偏移量。
S1.253、当手指结束拖拽时，惯性控件scrollViewDidEndDecelerating在手指结束拖拽时的移动惯性为0的时候执行计算页面的实际偏移量。
S1.254、当手指结束拖拽时的拖拽动画结束时控件scrollViewDidEndScrollingAnimation在滑动动画停止时执行计算页面实际偏移量。
S1.255、当手指结束缩放手势时，控件scrollViewDidEndZooming在视图缩放结束后执行计算页面实际偏移量。
S1.256、控件scrollViewDidEndDragging、
控件scrollViewDidEndDecelerating、
控件scrollViewDidEndScrollingAnimation、
控件scrollViewDidEndZooming系统协议方法中实现计算scrollView页面实际偏移量.使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的页面长度，具体方法是：
A、计算单个页面长度pageLength＝根据设计的变量PageWidth和PageHeight乘上缩放比例zoomScale。
B、计算需要移动的页面索引index＝当前滑动偏移量/页面长度pageLength.取绝对值并根据拖动速率判断最终的页面所索引。
C、计算页面的实际偏移量＝需要移动的页面索引index*单个页面长度pageLength.并判断是否超出显示范围。
视图滚动模块：将当前显示视图根据用户滑动后更新为下一组显示的N幅的幻灯视图，具体包括：
位置计算单元：在更新显示单元显示幻灯视图时，根据手指拖动的位置计算底部滑动视图的ContentOffset的值，最终页面停留的位置，所述ContentOffset为系统控件UIScrollView的属性变量，ContentOffset值的改变在自定义视图中实现计算方法；
主题更新单元：设置OS系统控件pageControl的数量，新底部滑动视图的系统控件item；
清空更新视图单元：在手指拖拽结束后清空当前视图并显示滑动后停止的最终视图，具体包括：
S2.41、设置定时器,清空之前的视图。
S2.42、关闭定时器，准备显示的数据，并比较当前设定的显示视图数量N与视图总数量M的大小：
若当前视图总数量M大于显示视图数量N；则在临时数据中,将尾部数据插入临时数组顶部,将头部数据添加临时数组尾部，从而组成循环的结构。
若当前视图总数量M小于显示视图数量N；则将滑动视图scrollView的ContentSize属性设为CGRectZero即为0，使视图不能滑动,并将滑动视图中的元素居中显示。
S2.43、计算并设置底部滑动视图的长度。滑动视图的长度＝显示视图数量N*(单个显示视图长度)；滑动视图的长度用于调整整个滑动的长度与能显示在滑动视图上的显示视图的数量。如果滑动视图的长度小于(显示视图的数量*单个显示视图的长度)则超出滑动视图的显示视图将不能显示。
S2.44、调整显示视图的位置。如果显示视图数量小于N，将显示视图等分在滑动视图中心位置；如果显示视图数量大于或等于N，将第一个显示视图放在滑动视图中心位置。
S2.45、当手指拖拽结束后，索引跳转单元计算当前的索引位置，并比较当前设定的显示视图数量N与索引的大小：
当索引小于N时，说明向前移动了，跳转到尾部。
当索引大于或等于N时，说明向后移动超过最后一条数据，跳转到头部。
S2.46、滑动完毕后开启定时器，即手指拖拽的时候关闭定时器,在拖拽结束后开启定时器,在用户不操作时由定时器执行自动滑动。
实施例1
本实施例涉及的英文解释如下：
1.currentIndex:为当前的索引。
2.scrollview为底部的滑动视图.所有视图都添加在滑动视图上。
3.imgArray为所有包括额外添加的用于循环的数据的图片数组。
4.slideSize为每次滑动的大小。
5.kIgvPadding为图片之间的外边距。
在本实施例中，以每个首页显示3附图为例进行说明。
本发明提供一种首页幻灯展示及操作方法，包括：
1)、初始化视图并通过http协议从网络获取json数据，解析成object对象。
2)、根据获取的数据刷新幻灯视图，视图使用自定义底部滑动视图scrollview，重载了scrollview的方法。在重载的系统方法中根据手指拖动的位置计算scrollview的ContentOffset的值，最终页面停留的位置，自定义底部滑动视图的具体步骤包括：
S2.2、创建一个自定义滑动视图DYScrollView继承自iOS系统的UIScrollView视图。
S2.2、实现UIScrollView的代理协议UIScrollViewDelegate，并在初始化时将系统UIScrollView的代理设为自身。
S2.3、定义变量PageWidth和PageHeight用于标识每个页面的滑动距离。
S2.4、定义一个变量DYPagingEnabled标识是否开启整页滑动。
S2.5、重载UIScrollView代理协议方法，使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的滑动距离，重载UIScrollView协议方法的具体步骤包括：
S1.251、当手指将要开始拖拽时，控件scrollViewWillBeginDragging用变量dragDistance记录手指拖拽的位移。
S1.252、当手指将要结束拖拽时，控件scrollViewWillEndDragging计算手指拖拽结束时的差值偏移量。
S1.253、当手指结束拖拽时，惯性控件scrollViewDidEndDecelerating在手指结束拖拽时的移动惯性为0的时候执行计算页面的实际偏移量。
S1.254、当手指结束拖拽时的拖拽动画结束时，控件scrollViewDidEndScrollingAnimation在滑动动画停止时执行计算页面实际偏移量；
S1.255、当手指结束缩放手势时控件scrollViewDidEndZooming在视图缩放结束后执行计算页面实际偏移量。
S1.256、控件scrollViewDidEndDragging、
控件scrollViewDidEndDecelerating、
控件scrollViewDidEndScrollingAnimation、
控件scrollViewDidEndZooming系统协议方法中实现计算scrollView页面实际偏移量.使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的页面长度，具体方法是：
A、计算单个页面长度pageLength＝根据设计的变量PageWidth和PageHeight乘上缩放比例zoomScale。
B、计算需要移动的页面索引index＝当前滑动偏移量/页面长度pageLength.取绝对值并根据拖动速率判断最终的页面所索引。
C、计算页面的实际偏移量＝需要移动的页面索引index*单个页面长度pageLength.并判断是否超出显示范围。
3)、设置pageControl的number.更新scrollview的item，具体包括：
S3.1、在重载S1.2中的系统方法中根据手指拖动的位置计算底部滑动视图的ContentOffset的值，最终页面停留的位置，其中，ContentOffset为系统控件UIScrollView的属性变量。
S2.2、设置pageControl的number，更新底部滑动视图的视图内容。
S2.3、手指拖拽结束后清空当前视图并显示滑动后停止的最终视图。
4)、设置定时器,清空之前的视图，具体方法是：设置定时器，用于每隔一段时间执行滑动方法使滑动视图移动到指定位置,清空之前的视图，其中，执行滑动方法使滑动视图移动到指定位置是通过设置scrollView的ContentOffset属性来实现。
5)、关闭定时器，准备显示的数据。当视图数量大于3个时,在临时数据中,将尾部数据插入临时数组顶部,将头部数据添加临时数组尾部，从而组成循环的结构。
6)、计算并设置scrollview的内容大小contentSize,滑动视图的长度＝显示视图数量N*(单个显示视图长度)；滑动视图的长度用于调整整个滑动的长度与能显示在滑动视图上的显示视图的数量。如果滑动视图的长度小于(显示视图的数量*单个显示视图的长度)则超出滑动视图的显示视图将不能显示。
调整显示视图的位置。如果显示视图数量小于3，将显示视图等分在滑动视图中心位置；如果显示视图数量大于或等于3，将第一个显示视图放在滑动视图中心位置。
7)、当手指拖拽结束后，计算当前的索引位置，当索引小于3时，说明向前移动了，跳转到尾部。当索引大于或等于(全部数量-3)时，说明向后移动超过最后一条数据，跳转到头部。
8)滑动完毕后开启自动滚动定时器。
实施例2
本发明提供一种首页幻灯展示及操作装置，包括：
1)、显示模块中的初始化单元初始化视图并通过http协议从网络获取json数据，解析成object对象，然后根据获取的数据刷新幻灯视图，视图使用自定义底部滑动视图scrollview，重载了scrollview的方法。在重载的系统方法中根据手指拖动的位置计算scrollview的ContentOffset的值，最终页面停留的位置，其中，自定义底部滑动视图的包括：
S2.2、创建一个自定义滑动视图DYScrollView继承自iOS系统的UIScrollView视图。
S2.2、实现UIScrollView的代理协议UIScrollViewDelegate，并在初始化时将系统UIScrollView的代理设为自身。
S2.3、定义变量PageWidth和PageHeight用于标识每个页面的滑动距离。
S2.4、定义一个变量DYPagingEnabled标识是否开启整页滑动。
S2.5、重载UIScrollView协议，使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的页面长度，重载UIScrollView协议方法包括：
S1.251、当手指将要开始拖拽时，控件scrollViewWillBeginDragging用变量dragDistance记录手指拖拽的位移。
S1.252、当手指将要结束拖拽时，控件scrollViewWillEndDragging计算手指拖拽结束时的差值偏移量。
S1.253、当手指结束拖拽时，惯性控件scrollViewDidEndDecelerating在手指结束拖拽时的移动惯性为0的时候执行计算页面的实际偏移量。
S1.254、当手指结束拖拽时的拖拽动画结束时，控件scrollViewDidEndScrollingAnimation在滑动动画停止时执行计算页面实际偏移量。
S1.255、当手指结束缩放手势时控件scrollViewDidEndZooming在视图缩放结束后执行计算页面实际偏移量。
S1.256、控件scrollViewDidEndDragging、
控件scrollViewDidEndDecelerating、
控件scrollViewDidEndScrollingAnimation、
控件scrollViewDidEndZooming系统协议方法中实现计算scrollView页面实际偏移量.使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的页面长度，具体方法是：
A、计算单个页面长度pageLength＝根据设计的变量PageWidth和PageHeight乘上缩放比例zoomScale。
B、计算需要移动的页面索引index＝当前滑动偏移量/页面长度pageLength.取绝对值并根据拖动速率判断最终的页面所索引。
C、计算页面的实际偏移量＝需要移动的页面索引index*单个页面长度pageLength.并判断是否超出显示范围。
3)、设置pageControl的number.更新scrollview的item，具体包括：
S3.1、在重载S1.2中的系统方法中根据手指拖动的位置计算底部滑动视图的ContentOffset的值，最终页面停留的位置，其中，ContentOffset为系统控件UIScrollView的属性变量。
S2.2、设置pageControl的number，更新底部滑动视图的视图内容。
S2.3、手指拖拽结束后清空当前视图并显示滑动后停止的最终视图。
2)、视图滚动模块设置pageControl的number.更新scrollview的item。
S2.1、位置计算单元在重载S1.2中的系统方法中根据手指拖动的位置计算底部滑动视图的ContentOffset的值，最终页面停留的位置，所述ContentOffset为系统控件UIScrollView的属性变量，ContentOffset值的改变在自定义视图中实现计算方法。
S2.2、主题更新单元设置iOS系统控件pageControl的number，新底部滑动视图的系统控件item。
S2.4、清空更新视图单元在手指拖拽结束后清空当前视图并显示滑动后停止的最终视图。
3)、设置定时器,清空之前的视图，具体方法是：设置定时器，用于每隔一段时间执行滑动方法使滑动视图移动到指定位置,清空之前的视图，其中，执行滑动方法使滑动视图移动到指定位置是通过设置scrollView的ContentOffset属性来实现。
4)、关闭定时器，准备显示的数据。当视图数量大于3个时,在临时数据中,将尾部数据插入临时数组顶部,将头部数据添加临时数组尾部，从而组成循环的结构。
5)计算并设置scrollview的内容大小contentSize,滑动视图的长度＝显示视图数量N*(单个显示视图长度)；滑动视图的长度用于调整整个滑动的长度与能显示在滑动视图上的显示视图的数量。如果滑动视图的长度小于(显示视图的数量*单个显示视图的长度)则超出滑动视图的显示视图将不能显示。
调整显示视图的位置。如果显示视图数量小于3，将显示视图等分在滑动视图中心位置；如果显示视图数量大于或等于3，将第一个显示视图放在滑动视图中心位置。
6)、当手指拖拽结束后，计算当前的索引位置，当索引小于3时，说明向前移动了，跳转到尾部。当索引大于或等于(全部数量-3)时，说明向后移动超过最后一条数据，跳转到头部。
7)、滑动完毕后开启自动滚动定时器。
应当注意的是，本申请中，涉及的英文语句描述，如：控件scrollViewDidEndDragging、底部滑动视图的ContentOffset等，均为IOS系统中的描述语句，为公知技术。
本文中所描述的具体实施例仅仅是对本发明精神作举例说明。本发明所属技术领域的技术人员可以对所描述的具体实施例做各种各样的修改或补充或采用类似的方式替代，但并不会偏离本发明的精神或者超越所附权利要求书所定义的范围。

Claims (4)

1.一种首页幻灯展示及操作方法，其特征在于，包括：
S1、在首页展示N幅幻灯视图，其中N大于等于2，具体包括：
S1.1、初始化视图并通过http协议从网络获取json格式数据，解析成NSObject对象，所述json格式数据为JavaScript Object Notation格式数据，包括图片下载地址与标题；
S1.2、根据获取的json格式网络数据刷新幻灯视图，幻灯视图使用自定义的底部滑动视图，重载了底部滑动视图的方法，所有幻灯视图都添加在滑动视图上；
S2、当前显示视图能够被用户滑动后更新为下一组显示的N幅的幻灯视图，具体包括：
S2.1、在S1.2中根据手指拖动的位置计算底部滑动视图的ContentOffset的值，最终页面停留的位置，其中，ContentOffset为系统控件UIScrollView的属性变量；
S2.2、设置pageControl的数量，更新底部滑动视图的视图内容；
S2.3、手指拖拽结束后清空当前视图并显示滑动后停止的最终视图；
所述S1.2中，自定义底部滑动视图的具体步骤包括：
S1.21、创建一个自定义滑动视图DYScrollView继承自iOS系统的UIScrollView视图；
S1.22、实现UIScrollView的代理协议UIScrollViewDelegate，并在初始化时将系统UIScrollView的代理设为自身；
S1.23、定义变量PageWidth和PageHeight用于标识每个页面的滑动距离；
S1.24、定义一个变量DYPagingEnabled标识，该标识表示是否开启整页滑动；
S1.25、重载UIScrollView代理协议方法，使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的滑动距离；
所述S1.25中，重载UIScrollView协议方法的具体步骤包括：
S1.251、当手指将要开始拖拽时，控件scrollViewWillBeginDragging用变量dragDistance记录手指拖拽的位移；
S1.252、当手指将要结束拖拽时，控件scrollViewWillEndDragging计算手指拖拽结束时的差值偏移量；
S1.253、当手指结束拖拽时，惯性控件scrollViewDidEndDecelerating在手指结束拖拽时的移动惯性为0的时候执行计算页面的实际偏移量；
S1.254、当手指结束拖拽时的拖拽动画结束时控件scrollViewDidEndScrollingAnimation在滑动动画停止时执行计算页面实际偏移量；
S1.255、当手指结束缩放手势时控件scrollViewDidEndZooming在视图缩放结束后执行计算页面实际偏移量；
S1.256、控件scrollViewDidEndDragging、
控件scrollViewDidEndDecelerating、
控件scrollViewDidEndScrollingAnimation、
控件scrollViewDidEndZooming系统协议方法中实现计算scrollView页面实际偏移量.使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的页面长度，具体方法是：
A、计算单个页面长度pageLength＝根据设计的变量PageWidth/PageHeight乘上缩放比例zoomScale；
B、计算需要移动的页面索引index＝当前滑动偏移量/页面长度pageLength.取绝对值并根据拖动速率判断最终的页面所索引；
C、计算页面的实际偏移量＝需要移动的页面索引index*单个页面长度pageLength.并判断是否超出显示范围。
2.根据权利要求1所述的一种首页幻灯展示及操作方法，其特征在于，所述S2.3中，清空当前视图并更新显示的具体方法是：
S2.31、设置定时器，用于每隔一段时间执行滑动方法使滑动视图移动到指定位置,清空之前的视图，其中，执行滑动方法使滑动视图移动到指定位置是通过设置scrollView的ContentOffset属性来实现；
S2.32、关闭定时器，准备显示的数据，并比较当前设定的显示视图数量N与视图总数量M的大小：
若当前视图总数量M大于显示视图数量N；则在临时数据中,将尾部数据插入临时数组顶部,将头部数据添加临时数组尾部，从而组成循环的结构；
若当前视图总数量M小于显示视图数量N；则将滑动视图scrollView的ContentSize属性设为CGRectZero即为0，使视图不能滑动,并将滑动视图中的元素居中显示；
S2.33、计算并设置底部滑动视图的长度，滑动视图的长度＝显示视图数量N*单个显示视图长度；滑动视图的长度用于调整整个滑动的长度与能显示在滑动视图上的显示视图的数量，滑动视图的长度小于(显示视图的数量*单个显示视图的长度)，则超出滑动视图的显示视图将不能显示；
S2.34、调整显示视图的位置：如果显示视图数量小于N，将显示视图等分在滑动视图中心位置；如果显示视图数量大于或等于N，将第一个显示视图放在滑动视图中心位置；
S2.35、当手指拖拽结束后，计算当前的索引位置，并比较当前设定的显示视图数量N与索引的大小：
当索引小于N时，说明显示视图向前移动了，跳转到尾部；
当索引大于或等于N时，说明显示视图向后移动超过最后一条数据，跳转到头部；
S2.36、滑动完毕后开启定时器，即在手指拖拽的时候关闭定时器,在拖拽结束后开启定时器,在用户不操作时由定时器执行自动滑动。
3.一种首页幻灯展示及操作装置，其特征在于，包括：
显示模块：在首页展示N幅幻灯视图，其中N大于等于2，具体包括：
初始化单元：初始化视图并通过http协议从网络获取json格式数据，解析成NSObject对象，所述json格式数据为JavaScript Object Notation格式数据，包括图片下载地址与标题；
更新显示单元：根据获取的json格式网络数据刷新幻灯视图，幻灯视图使用自定义的底部滑动视图，重载了底部滑动视图的方法，所有幻灯视图都添加在滑动视图上；
视图滚动模块：将当前显示视图根据用户滑动后更新为下一组显示的N幅的幻灯视图，具体包括：
位置计算单元：在更新显示单元显示幻灯视图时，根据手指拖动的位置计算底部滑动视图的ContentOffset的值，最终页面停留的位置，所述ContentOffset为系统控件UIScrollView的属性变量，ContentOffset值的改变在自定义视图中实现计算方法；
主题更新单元：设置OS系统控件pageControl的数量，新底部滑动视图的系统控件item；
清空更新视图单元：在手指拖拽结束后清空当前视图并显示滑动后停止的最终视图；
更新显示单元进行自定义底部滑动视图包括：
S1.21、创建一个自定义滑动视图DYScrollView继承自iOS系统的UIScrollView视图；
S1.22、实现UIScrollView的代理协议UIScrollViewDelegate，并在初始化时将系统UIScrollView的代理设为自身；
S1.23、定义变量PageWidth和PageHeight用于标识每个页面的滑动距离；
S1.24、定义一个变量DYPagingEnabled标识，该标识表示是否开启整页滑动；
S1.25、重载UIScrollView代理协议，使手指拖拽的距离刚好为变量PageWidth和PageHeight设定的滑动距离；
所述S1.25中，重载UIScrollView协议包括：
S1.251、当手指将要开始拖拽时，控件scrollViewWillBeginDragging用变量dragDistance记录手指拖拽的位移；
S1.252、当手指将要结束拖拽时，控件scrollViewWillEndDragging计算手指拖拽结束时的差值偏移量；
S1.253、当手指结束拖拽时，惯性控件scrollViewDidEndDecelerating在手指结束拖拽时的移动惯性为0的时候执行计算页面的实际偏移量；
S1.254、当手指结束拖拽时的拖拽动画结束时控件scrollViewDidEndScrollingAnimation在滑动动画停止时执行计算页面实际偏移量；
S1.255、当手指结束缩放手势时控件scrollViewDidEndZooming在视图缩放结束后执行计算页面实际偏移量；
S1.256、控件scrollViewDidEndDragging、
控件scrollViewDidEndDecelerating、
控件scrollViewDidEndScrollingAnimation、
控件scrollViewDidEndZooming系统协议中实现计算scrollView页面实际偏移量.使手指拖拽的距离刚好为变量PageWidth/PageHeight设定的页面长度，具体方法是：
A、计算单个页面长度pageLength＝根据设计的变量PageWidth和PageHeight乘上缩放比例zoomScale；
B、计算需要移动的页面索引index＝当前滑动偏移量/页面长度pageLength.取绝对值并根据拖动速率判断最终的页面所索引；
C、计算页面的实际偏移量＝需要移动的页面索引index*单个页面长度pageLength.并判断是否超出显示范围。
4.根据权利要求3所述的一种首页幻灯展示及操作装置，其特征在于，清空更新视图单元在清空当前视图并更新显示具体包括：
S2.31、设置定时器,清空之前的视图；
S2.32、关闭定时器，准备显示的数据，并比较当前设定的显示视图数量N与视图总数量M的大小：
若当前视图总数量M大于显示视图数量N；则在临时数据中,讲尾部数据插入临时数组顶部,将头部数据添加临时数组尾部，从而组成循环的结构；
若当前视图总数量M小于显示视图数量N；则将滑动视图scrollView的ContentSize属性设为CGRectZero即为0，使视图不能滑动,并将滑动视图中的元素居中显示；
S2.33、计算并设置底部滑动视图的长度，滑动视图的长度＝显示视图数量N*单个显示视图长度；滑动视图的长度用于调整整个滑动的长度与能显示在滑动视图上的显示视图的数量，如果滑动视图的长度小于(显示视图的数量*单个显示视图的长度)则超出滑动视图的显示视图将不能显示；
S2.34、调整显示视图的位置：如果显示视图数量小于N，将显示视图等分在滑动视图中心位置；如果显示视图数量大于或等于N，将第一个显示视图放在滑动视图中心位置；
S2.35、当手指拖拽结束后，索引跳转单元计算当前的索引位置，并比较当前设定的显示视图数量N与索引的大小：
当索引小于N时，说明显示视图向前移动了，跳转到尾部；
当索引大于或等于N时，说明显示视图向后移动超过最后一条数据，跳转到头部；
S2.36、滑动完毕后开启定时器，即手指拖拽的时候关闭定时器,在拖拽结束后开启定时器,在用户不操作时由定时器执行自动滑动。
CN201610200612.4A 2016-03-31 2016-03-31 一种首页幻灯展示及操作方法及装置 Active CN105843493B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610200612.4A CN105843493B (zh) 2016-03-31 2016-03-31 一种首页幻灯展示及操作方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610200612.4A CN105843493B (zh) 2016-03-31 2016-03-31 一种首页幻灯展示及操作方法及装置

Publications (2)

Publication Number Publication Date
CN105843493A CN105843493A (zh) 2016-08-10
CN105843493B true CN105843493B (zh) 2019-03-05

Family

ID=56596846

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610200612.4A Active CN105843493B (zh) 2016-03-31 2016-03-31 一种首页幻灯展示及操作方法及装置

Country Status (1)

Country Link
CN (1) CN105843493B (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2018032075A (ja) * 2016-08-22 2018-03-01 キヤノン株式会社 表示制御装置およびその制御方法
CN107085598B (zh) * 2017-03-31 2020-05-12 武汉斗鱼网络科技有限公司 一种网站首页幻灯更换方法及系统
CN107632809A (zh) * 2017-09-28 2018-01-26 四川长虹电器股份有限公司 图片滚轮式移位播放的方法
CN109542304B (zh) * 2018-11-22 2021-03-02 北京字节跳动网络技术有限公司 显示内容的加载方法、装置、设备及存储介质
CN110333816B (zh) * 2019-07-03 2021-08-24 腾讯科技（深圳）有限公司 一种轮播处理方法及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101030202A (zh) * 2006-03-01 2007-09-05 腾讯科技（深圳）有限公司 对像册中显示图片进行切换的系统及方法
CN101714250A (zh) * 2008-10-06 2010-05-26 北京福爱基业科技有限公司 一种多张图片的组合排列显示方法
CN102568024A (zh) * 2011-12-28 2012-07-11 深圳市万兴软件有限公司 一种图片动画显示方法和装置
CN103412732A (zh) * 2013-07-22 2013-11-27 天脉聚源(北京)传媒科技有限公司 一种基于三维弧线的资源展示方法及客户端

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7193609B2 (en) * 2002-03-19 2007-03-20 America Online, Inc. Constraining display motion in display navigation

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101030202A (zh) * 2006-03-01 2007-09-05 腾讯科技（深圳）有限公司 对像册中显示图片进行切换的系统及方法
CN101714250A (zh) * 2008-10-06 2010-05-26 北京福爱基业科技有限公司 一种多张图片的组合排列显示方法
CN102568024A (zh) * 2011-12-28 2012-07-11 深圳市万兴软件有限公司 一种图片动画显示方法和装置
CN103412732A (zh) * 2013-07-22 2013-11-27 天脉聚源(北京)传媒科技有限公司 一种基于三维弧线的资源展示方法及客户端

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
IOS开发之多图片无缝滚动组件封装与使用;青玉伏案;《http://www.cnblogs.com/ludashi/p/4741384》;20150825;第1-9页

Also Published As

Publication number Publication date
CN105843493A (zh) 2016-08-10

Similar Documents

Publication Publication Date Title
CN105843493B (zh) 一种首页幻灯展示及操作方法及装置
US11354702B2 (en) Generating interactive advertising with content collections
US10593084B2 (en) Systems and methods for content interaction
US11167172B1 (en) Video rebroadcasting with multiplexed communications and display via smart mirrors
US9881396B2 (en) Displaying temporal information in a spreadsheet application
US20190260855A1 (en) Tiered framework for proving remote access to an application accessible at a uniform resource locator (url)
US20220374936A1 (en) Interactive advertising with media collections
CN104808984B (zh) 显示界面刷新方法及装置
US20170099253A1 (en) Social media messaging platform for creating and sharing moments
US20220245194A1 (en) Systems and methods for generating and sharing content
JP5538619B2 (ja) 転送メッセージを提示するための方法およびシステム
CN103513856A (zh) 刷新页面的方法和装置
US20150193390A1 (en) Visited hyperlink appearance based on user activity
CN107018408A (zh) 移动端http视频流的体验质量评估方法
KR102157322B1 (ko) 피트니스 컨텐츠의 재생 방법
US9870403B1 (en) Estimating social content interactions
US20150205561A1 (en) Multiple display alignment
CN109064528A (zh) 一种mg动画在手绘短视频中的快速应用方法
CN110110000A (zh) 展示方法及装置
CN108038160A (zh) 动态动画保存方法、动态动画调用方法及装置
Khacharem et al. Developing tactical skills through the use of static and dynamic soccer visualizations: An expert–nonexpert differences investigation
US20220337918A1 (en) System, method, and computer-readable medium including program for generating content
EP2882173A1 (en) Computing device for displaying a set of application icons
CN109256202A (zh) 床头卡数据的显示方法、系统及病床设备
JP6186964B2 (ja) 表示制御装置およびコンテンツ制御装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant