当前位置: 永利棋牌 > 儿童文学 > 正文

动态设置ScrollView的换算坑,iOS资讯详情页实现

时间:2019-10-01 13:19来源:儿童文学
棋牌游戏的结算界面由于局数不固定,需要动态设置ScrollView,并且在局数过多时默认播放一个滚动到底部的动画,达到比较好的显示和交互效果 Demo 地址https://github.com/gityuency/DemoCode

棋牌游戏的结算界面由于局数不固定,需要动态设置ScrollView,并且在局数过多时默认播放一个滚动到底部的动画,达到比较好的显示和交互效果

Demo 地址 https://github.com/gityuency/DemoCode

Demo源码地址:

cocos2d-lua引擎继承自Node的对象,如果使用了ignoreAnchorPointForPosition方法忽略锚点,那么默认锚点在控件左下角(0,0)位置,有点像directx的坐标体系
(这个就比较坑了)

前言:

去年有个项目需求,就是在App启动的时候,弹出一个提示框。这个提示框在不同的屏幕上和四周的间距要差不多相同,里面有提示内容,分为图片和文字两种。当文字过多的时候,就滚动显示。 当时我用frame算的大小和坐标。写了3段基本重复的代码来适应不同的手机屏幕。很菜的设计。需求改动了好几次,我也做的很狗血。以前有小伙伴 问我,怎么在XIB上拖一个ScrollView. 我也没有弄出来. 今天看别人文章的时候,有所发现,于是就试验了一下。这里只是记录这种方案,或许不能满足观众们的需求。

代码更新:

Paste_Image.png

第一步:

新建工程,这里我选择 Swift 工程.

  • 在updateContainerScrollViewContentSize调用scrollViewDidScroll更新各个控件的位置

局数较多的情况下,ScrollView的contentSize大于WidgetSize的大小,在弹账单界面的时候需要动态生成ContentView的值。
但是由于这个不太方便的锚点设置,所以如果在UI编辑器(Cocos Studio等)中设计好了显示界面(16局的结算界面),此时去裁剪ScrollView的大小,自然是裁去Y值较大的地方,也就是裁去ContentView的上半部分。。嗯。。很合理。。

第二步:

我把 ViewController 的 View 颜色设置为黄色.

图片 1

第二步,设置 View 的背景颜色.png

如果要实现一个底部带有相关推荐和评论的资讯详情页,很自然会想到WebView和TableView嵌套使用的方案。

所以如果在不使用纯代码构建UI界面的情况下,解决办法就是每次在裁剪ContentSize的值之后,重新设置ScrollView里每一个子控件的坐标。

第三步:

拖拽一个 ScrollView 到 View 上,设置 ScrollView 的背景色为蓝色,并添加约束, 这四个约束很普通的, 就是距离父视图上,下,左,右,的边距,但是在距离父视图 下 边距的选项里, 我选择了参照 View, 而不是 Bottom Layout Guide,这是因为之前看到的一篇文章里说这样选, 我不是很懂. [http://ios.jobbole.com/82815/]

图片 2

第三步,设置 ScrolView 的约束.png

这个方案是WebView作为TableView的TableHeaderView或者TableView的一个Cell,然后根据网页的高度动态的更新TableHeaderView和Cell的高度,这个方案逻辑上最简单,也最容易实现,而且滑动效果也比较好。

WidgetSize大小可以显示8局的对战内容,而ContentView中有16局的对战信息。所以在局数大于8局的情况下setTouchEnabled(true).
如果在结算界面有9局的时候开启滚动并且裁剪ContentView,将会剪去ContentView中前8局的结算信息,于是界面上就只有一个第9局。。。

第四步:

我们需要放一个 ContentView 到这个 ScrollView 上面, ScrollView 的滚动是需要 ContentSize 的, 没有 Size, 也就无法滚动. 之前看到网上说的拖拽 ScrollView 需要放一个 ContentView 基本都是这样的套路,可惜他们约束添加的套路我没看懂.这里我就选择使用一个 View 当做 ContentView.把这个 View 的颜色设置成为粉色.然后给这个 View 取个名字, 添加进去了之后就能看到XIB 开始报错了,说是 "有模糊的可以滚动的高度", 放着不用管, 我们来添加约束.

图片 3

第四步,添加内容视图.png

图片 4

第四步, 查看报错.png

然而在实际应用中发现如果资讯内容很长而且带有大量图片和GIf图片的时候,APP内存占用会暴增,有被系统杀掉的风险。但是在单纯的使用WebView的时候内存占用不会那么大,WebView会根据自身视口的大小动态渲染HTML内容,不会一次性的渲染素有的HTML内容。这个方案只是简单的将WebView的大小更新为HTML的实际大小,WebView将会一次性的渲染所有的HTML内容,因此直接使用这种方案会有内存占用暴增的风险。

解决办法:

Init.将所有子控件,向下移动8个Cell的高度,因为前面8个Cell被裁了
child:setPosition(currentY - 8 * cellY) //没错是减号。。

Update.当局数大于8局时,每增加一局,向上移动一个Cell的高度
1.ScrollView:setInnerContentSize(cc.size(InnerContainerX, cellY * (roundIndex))) //增加ContentSize(裁剪区域减少);
2.child:setPosition(currentY + cellY)

最后ScrollToBottom(1,true)
完成

第五步:

给这个 ContentView 添加约束这里先添加四个约束:这里我添加的约束是距离父视图(ScrollView)左,上,右边的间距都是0,然后在添加一个高度约束,这个约束值就先取默认的值.添加完了之后是有报错的.

图片 5

第五步,给 ContentView 添加4个约束.png

1、网易新闻:

通过Reveal查看网易新闻的视图结构,发现整个新闻详情页都是通过H5实现,包括评论、广告和相关推荐。

图片 6image.png

第六步:

在添加完了第五步的4个约束之后,仍然会有报错,使用 XIB 给出的提示修复这个错误. 修复完错误之后,可以看到新增加了2个约束, 一个是在父视图中水平居中(Horizontally in container),一个是添加了底部约束(Bottom space to), 如果不使用提示来修复这个错误, 直接自己添加也是可以的. 但是在我自己试验的时候, 是不知道需要这么做的, 只能是自己先加点约束, 等报错, 然后按照提示来修复这些错误, 这里我只做了垂直滚动的视图.

或者一步完成,直接添加6个约束:
上 / 下 / 左 / 右 / 高度 / 水平居中

图片 7

约束.png

图片 8

第六步,使用 XIB 提示修复这个错误.png

图片 9

第六步,修复完成错误.png

2、今日头条

今日头条新闻详情页最外层是ScrollView,WebView和ThemedView(里面包含TableView)是ScrollView同级SubView。

图片 10image.png

查看WebView的布局属性,发现WebView并没有被撑开,但是Y的坐标是发生变化的。

图片 11image.png

查看ThemedView的布局属性,发现其Y坐标是也是发生变化的,ThemedView正好位于WebView的下方。

图片 12image.png

通过以上分析基本可以推测出头条的解决方案:

  • ScrollView是作为ContainerView,WebView和TableView是ScrollView的SubView。
  • WebView和TableView无法滚动,WebView和TableView的是由ScrollView滚动驱动的,也就是WebView和TableView无法通过手指直接改变其contentOffset,他们的contentOffset是由ScrollView滚动时的contentOffset计算得出。
  • ScrollView在滚动过程中,WebView和TableView的位置也是跟着改变的,这样就能保证WebView和TableView一直保持在视口的位置。

编辑:儿童文学 本文来源:动态设置ScrollView的换算坑,iOS资讯详情页实现

关键词: