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

如何布局？

核心：使用和父视图的间距frame来控制子视图的位置。

这是需要写的页面，按照上一部分内容的思路写。

思路：

1.关于我们、背景色就直接写在页面里。

2.下面的部分，图层大小，背景色，圆角。小图片位置、左边文本字体大小和颜色，右边文本的位置和颜色，都是固定的。而且需要点击跳转，所以可以弄在一个类里。

3.需要变化的部分：图片内容(Str)，左边文本内容，右边的箭头图片内容和右边的邮箱文本。采用MVC的方法，将这些需要变化的部分弄成一个Model。

思路确定了，细节与布局方面有大问题。要让一个页面在多个型号的手机上使用，不能将组件的位置和大小设定为固定值，必须依照屏幕分辨率的变化而变化。

那应该怎么办呢？

获取视图宽度与高度

Swift 复制代码

self.frame.width
view.frame.width
view.frame.height

计算视图的宽度和高度

一般都是通过frame也就是子视图和父视图的位置来定

设置背景图：通过子视图设置背景图时，注意设置其位于原点，尺寸与父视图一致。

子视图的背景图片位置，设置成.zero就是原点

Swift 复制代码

**lazy var bgImg: UIImageView = {
let bgImg = UIImageView(frame: .init(origin: .zero, size: view.frame.size))**

设置滚动视图的长宽，以及位置

Swift 复制代码

let btn = AboutusBtn(frame: .init(x: 16, y: y, width: Int(self.view.frame.width) - 32, height: itemSize))
//确定按钮的位置，x值是固定的，y值则计算出来。宽度是减去两部分的16

确定目标按钮的位置

确定按钮的位置，x值是固定的，y值则计算出来。宽度是减去两部分的16

Swift 复制代码

let 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等于16

Swift 复制代码

 lazy 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等，一般就是这些值
    }()

父视图也是AboutsBtn

Swift 复制代码

    lazy 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需要用同样的方式确定，同以上两个组件的方法。

Swift 复制代码

    lazy var rightText: UILabel = {
        let rightText: UILabel = UILabel(frame: .init(x: self.frame.width - 200 - 16, y: 13, width: 200,height: 30 ))
        //屏幕宽度减去本身的宽度

计算滚动视图的尺寸

滚动视图的宽度，和页面一致，滚动视图的高度可以计算出来，最后是留的空位

Swift 复制代码

scrollView.contentSize = .init(width: scrollView.frame.size.width, height: CGFloat(aboutusModel.count * (itemSize + gap)) + 24.0)

因为初始化是在闭包里所以没法调用其他页面来计算吧，所以要这样写？

让它的长度实时变换。

隐藏滚动条，一般都要这么做。

（否则显得很低端）

一个是垂直滚动条，一个是水平滚动条

Swift 复制代码

scrollView.showsVerticalScrollIndicator = false
scrollView.showsHorizontalScrollIndicator = false

隐藏/部分显示：在for循环中通过索引控制显示与否

Swift 复制代码

rightText.isHidden = true

可以设置组件的默认显示情况,比如这个邮箱是只有第三行显示的。箭头是只有第三行不显示的。

Swift 复制代码

            if idx == 2 {
                btn.rightText.isHidden = false
                btn.rightImg.isHidden = true
            } else {
                btn.rightText.isHidden = true
                btn.rightImg.isHidden = false
            }