我挑战自己复制iOS Weather App的用户界面。这是一个虚拟界面,用于显示城市中的湿度:
我现在在舞台上,有一个上部容器视图(浅灰色)和一个可以从底部拖动的工作滚动内容(带有小矩形的黄色)。上部容器设置为高度约束为屏幕高度的2/3,并固定在侧面和顶部的超视图上:
其中一个子视图 - 将以图形方式显示湿度的橙色矩形 - 设置为高视图1:1.8的超视图,宽度与自身高度1:2成比例。以下是所有“图形”约束:
这个想法是,当滚动开始时,橙色矩形逐渐变得透明(它工作正常,所以我不会把代码放在这里)并且更小到它被隐藏的某个点。
我指望上部容器视图高度约束,因此为它做了一个出口:
@IBOutlet weak var upperContentHeightConstraint: NSLayoutConstraint!
在我的scrollViewDidScroll方法中,我添加了代码:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let scrollOffsetY = scrollView.contentOffset.y
let newUpperContentViewHeight = upperContentViewHeight - scrollOffsetY
upperContentHeightConstraint.constant = newUpperContentViewHeight
}
upperContentViewHeight
以viewDidLoad()
方式计算,因为它取决于屏幕高度。
我希望随着容器视图高度的缩小,橙色子视图的高度和宽度会变小,因为它们的所有约束都是相互关联的。但是当滚动开始时,上面的内容视图和橙色子视图会搞砸:
如果我在滚动时将上部视图的高度打印到控制台,则表明一切正常:
Current offsetY: 0.5
new height: 378.0
Current offsetY: 6.0
new height: 372.5
Current offsetY: 14.5
new height: 364.0
Current offsetY: 20.0
new height: 358.5
Current offsetY: 22.0
new height: 356.5
Current offsetY: 24.5
new height: 354.0
我在这里缺少什么?
更新:这是一个带有问题的GIF:
答案 0 :(得分:0)
因此,经过一些过多的控制台打印,我意识到这行代码:
upperContentHeightConstraint.constant = newUpperContentViewHeight
将newUpperContentViewHeight
添加到现有的高度约束中,而不是替换它。因此,上部容器视图几乎变为两倍。我已将行改为:
upperContentHeightConstraint.constant = scrollOffsetY * -1
,通过滚动距离减少视图高度,现在一切都按预期工作。