UIKit学习笔记3-布局、滚动视图、隐藏或显示视图

如何布局核心使用和父视图的间距frame来控制子视图的位置。这是需要写的页面按照上一部分内容的思路写。思路1.关于我们、背景色就直接写在页面里。2.下面的部分图层大小背景色圆角。小图片位置、左边文本字体大小和颜色右边文本的位置和颜色都是固定的。而且需要点击跳转所以可以弄在一个类里。3.需要变化的部分图片内容(Str)左边文本内容右边的箭头图片内容和右边的邮箱文本。采用MVC的方法将这些需要变化的部分弄成一个Model。思路确定了细节与布局方面有大问题。要让一个页面在多个型号的手机上使用不能将组件的位置和大小设定为固定值必须依照屏幕分辨率的变化而变化。那应该怎么办呢获取视图宽度与高度self.frame.width view.frame.width view.frame.height计算视图的宽度和高度一般都是通过frame也就是子视图和父视图的位置来定设置背景图通过子视图设置背景图时注意设置其位于原点尺寸与父视图一致。子视图的背景图片位置设置成.zero就是原点**lazy var bgImg: UIImageView { let bgImg UIImageView(frame: .init(origin: .zero, size: view.frame.size))**设置滚动视图的长宽以及位置let btn AboutusBtn(frame: .init(x: 16, y: y, width: Int(self.view.frame.width) - 32, height: itemSize)) //确定按钮的位置x值是固定的y值则计算出来。宽度是减去两部分的16确定目标按钮的位置确定按钮的位置x值是固定的y值则计算出来。宽度是减去两部分的16let btn AboutusBtn(frame: .init(x: 16, y: y, width: Int(self.view.frame.width) - 32, height: itemSize))设置按钮中组件的位置父视图是AboutusBtn。需要将图片居中y值则是父视图height - 子视图height再除以2。父视图的height手动设置为了56(ThirdViewController中的itemSize,所以这里是32除以2等于16lazy var logoImg: UIImageView { let logoImg UIImageView(frame: .init(origin: CGPoint(x: 16, y: 16), size: CGSize(width: 24, height: 24 ))) return logoImg //x值是距离边框的大小这个值一般是UI规定的16,24,8,4等一般就是这些值 }()父视图也是AboutsBtnlazy var rightImg: UIImageView { let rightImg UIImageView(frame: .init(origin: CGPoint(x: self.frame.width - 20 - 16, y: 18 ), size: CGSize(width: 20, height: 20))) //箭头的x需要通过屏幕总宽度确定从右边看起。屏幕宽度减去举例屏幕边框的距离:16(这个是指定的,一般来说左右两边的间距一样再减去图片的width20) //箭头的y需要用同样的方式确定同以上两个组件的方法。lazy var rightText: UILabel { let rightText: UILabel UILabel(frame: .init(x: self.frame.width - 200 - 16, y: 13, width: 200,height: 30 )) //屏幕宽度减去本身的宽度计算滚动视图的尺寸滚动视图的宽度和页面一致滚动视图的高度可以计算出来最后是留的空位scrollView.contentSize .init(width: scrollView.frame.size.width, height: CGFloat(aboutusModel.count * (itemSize gap)) 24.0)因为初始化是在闭包里所以没法调用其他页面来计算吧所以要这样写让它的长度实时变换。隐藏滚动条一般都要这么做。否则显得很低端一个是垂直滚动条一个是水平滚动条scrollView.showsVerticalScrollIndicator false scrollView.showsHorizontalScrollIndicator false隐藏/部分显示在for循环中通过索引控制显示与否rightText.isHidden true可以设置组件的默认显示情况,比如这个邮箱是只有第三行显示的。箭头是只有第三行不显示的。if idx 2 { btn.rightText.isHidden false btn.rightImg.isHidden true } else { btn.rightText.isHidden true btn.rightImg.isHidden false }