[Swift通天遁地]六、智能布局-(8)布局框架的使用：多分辨率适配和横竖屏布局

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https://www.cnblogs.com/strengthen/p/10285877.html 
➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

热烈欢迎，请直接点击！！！

进入博主App Store主页，下载使用各个作品！！！

注：博主将坚持每月上线一个新app！！！

目录：[Swift]通天遁地Swift

本文将演示布局框架的使用：多分辨率的适配和横竖屏布局。

首先确保在项目中已经安装了所需的第三方库。

点击【Podfile】,查看安装配置文件。

platform :ios, ‘12.0’
use_frameworks!

target 'DemoApp' do
    source 'https://github.com/CocoaPods/Specs.git'
    pod 'Neon'
end

根据配置文件中的相关配置，安装第三方库。

然后点击打开【DemoApp.xcworkspace】项目文件。

在项目导航区，打开视图控制器的代码文件【ViewController.swift】

import UIKit
//在当前的类文件中，引入已经安装的第三方类库
import Neon

class ViewController: UIViewController {
    
    //添加一个视图变量，作为界面上的搜索栏
    var searchBar : UIView!
    //添加一个文本框，放在搜索栏视图中
    var filterTextField: UITextField!
    //添加一个图像视图变量，用来创建背景横条
    var bannerImageView : UIImageView!
    //添加一个视图变量，用来创建背景横条
    var bannerMaskView : UIView!
    //添加一个图像视图变量，用来显示用户的头像
    var avatarImageView : UIImageView!
    //标签控件，用来显示用户的名称
    var nameLabel : UILabel!
    //添加一个图像视图变量，作为摄像机按钮，
    //当点击该按钮时，使用手机中的相机功能。
    var cameraIcon : UIImageView!
    //添加三个视图变量
    //作为栏目缩略图的容器
    var containerView : UIView!
    var containerView2 : UIView!
    var containerView3 : UIView!
    //依次添加四个按钮变量，
    //作为背景横条下方的四个功能按钮。
    var btPost : UIButton!
    var btUpdate : UIButton!
    var btActivity : UIButton!
    var btMore : UIButton!
    
    //依次添加四个视图变量，
    //作为四个功能按钮的容器
    var viewPost : UIView!
    var viewUpdate : UIView!
    var viewActivity : UIView!
    var viewMore : UIView!
    
    //继续添加三个视图变量，
    //作为三个缩略图的容器
    var thumbContainer1 : UIView!
    var thumbContainer2 : UIView!
    var thumbContainer3 : UIView!

    //添加三个图像视图变量，作为三个栏目的缩略图
    var thumbView1 : UIImageView!
    var thumbView2 : UIImageView!
    var thumbView3 : UIImageView!

    //添加三个表情变量，用来显示三个标签的名称
    var thumbLabel1 : UILabel!
    var thumbLabel2 : UILabel!
    var thumbLabel3 : UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        //设置根视图的背景颜色
        self.view.backgroundColor = UIColor(red: 210.0/255, green: 210.0/255, blue: 210.0/255, alpha: 1.0)
        
        //从项目中读取一张图片素材
        let image = UIImage(named: "background2")
        //初始化一个图像视图，
        //用来显示加载的图片
        bannerImageView = UIImageView(image: image)
        //设置图像视图的内容模式为居中，        
        bannerImageView.contentMode = .center
        //当图片尺寸超过图像视图时，
        //图像将居中显示在图像视图的显示区域。
        bannerImageView.layer.masksToBounds = true
        //将图像视图添加到根视图
        self.view.addSubview(bannerImageView)
        
        //初始化一个视图对象，作为搜索框视图。
        searchBar = UIView()
        //设置搜索框视图的背景颜色
        searchBar.backgroundColor = UIColor(red: 79.0/255, green: 107.0/255, blue: 165.0/255, alpha: 1.0)
        //将视图添加到根视图
        self.view.addSubview(searchBar)
        
        //初始化一个文本框，作为搜索输入框
        filterTextField = UITextField()
        //设置输入框的背景颜色
        filterTextField.backgroundColor = UIColor(red: 56.0/255, green: 71.0/255, blue: 120.0/255, alpha: 1.0)
        ///设置输入框的边框样式
        filterTextField.borderStyle = .roundedRect
        //设置输入框的文字对齐方式
        filterTextField.textAlignment = .center
        //设置输入框的字体属性
        filterTextField.font = UIFont(name: "Arial", size: 12)
        //初始化一个样式字典对象，
        //用来设置输入框的占位符的文字颜色。
        let attributes = [NSAttributedString.Key.foregroundColor : UIColor.lightGray]
        //初始化一个属性字符串常量
        let attributedString = NSAttributedString(string: "User Name", attributes: attributes)
        //设置输入框的占位符属性
        filterTextField.attributedPlaceholder =  attributedString
        //设置输入框的文字颜色
        filterTextField.textColor = UIColor.white
        //将输入框添加到搜索栏视图中
        searchBar.addSubview(filterTextField)
        
        //从项目中读取一张图片素材，
        let avarta = UIImage(named: "Avarta")
        //初始化图像视图显示该图片
        avatarImageView = UIImageView(image: avarta)
        //设置图像视图的边框
        avatarImageView.layer.borderWidth = 2
        //设置图像视图边框颜色为白色
        avatarImageView.layer.borderColor = UIColor.white.cgColor
        //将头像添加到图像视图中
        bannerImageView.addSubview(avatarImageView)
        
        //初始化一个标签控件
        nameLabel = UILabel()
        //设置标签控件的文字内容
        nameLabel.text = "Jane\nAmaral"
        //设置标签控件的字体颜色
        nameLabel.textColor = UIColor.white
        //设置标签的字体属性
        nameLabel.font = UIFont(name: "Arial", size: 26)
        //设置标签控件可以显示两行文字
        nameLabel.numberOfLines = 2
        //将标签控件也添加到横条视图中
        bannerImageView.addSubview(nameLabel)
        
        //从项目中读取一张图片素材，
        let camera = UIImage(named: "Camera")
        //初始化图像视图显示该图片
        cameraIcon = UIImageView(image: camera)
        //将图像视图也添加到横条视图中
        bannerImageView.addSubview(cameraIcon)
        
        //初始化一个视图对象，该视图对象将作为四个功能按钮的容器
        containerView = UIView()
        //设置视图对象的背景颜色为白色
        containerView.backgroundColor = UIColor.white
        //给视图对象的层添加阴影效果，并设置阴影的颜色和偏移距离
        containerView.layer.shadowColor = UIColor.black.cgColor
        //给视图对象的层添加一个投影效果，并设置阴影的颜色和偏移距离。
        containerView.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
        //设置阴影的不透明度
        containerView.layer.shadowOpacity = 0.15
        //设置阴影的半径
        containerView.layer.shadowRadius = 2
        //将视图对象添加到根视图
        self.view.addSubview(containerView)
        
        //初始化一个视图对象，该视图对象将作为第一个功能按钮的容器
        viewPost = UIView()
        //从项目中读取一张图片素材，
        let post = UIImage(named: "post")
        //初始化按钮控件
        btPost = UIButton()
        //设置按钮在正常状态下的图像属性
        btPost.setImage(post, for: .normal)
        //将按钮添加到控制器中
        viewPost.addSubview(btPost)
        
        //初始化一个视图对象，该视图对象将作为第二个功能按钮的容器
        viewUpdate = UIView()
        //从项目中读取一张图片素材，
        let update = UIImage(named: "update")
        //初始化按钮控件
        btUpdate = UIButton()
        //设置按钮在正常状态下的图像属性
        btUpdate.setImage(update, for: .normal)
        //将按钮添加到控制器中
        viewUpdate.addSubview(btUpdate)
        
        //初始化一个视图对象，该视图对象将作为第三个功能按钮的容器
        viewActivity = UIView()
        //从项目中读取一张图片素材，
        let activity = UIImage(named: "activity")
        //初始化按钮控件
        btActivity = UIButton()
        //设置按钮在正常状态下的图像属性
        btActivity.setImage(activity, for: .normal)
        //设置该控件内容的显示区域
        btActivity.contentRect(forBounds: CGRect(x: 0, y: 0, width: 10, height: 50))
        //将按钮添加到控制器中
        viewActivity.addSubview(btActivity)
        
        //初始化一个视图对象，该视图对象将作为第四个功能按钮的容器
        viewMore = UIView()
        //从项目中读取一张图片素材，
        let more = UIImage(named: "more")
        //初始化按钮控件
        btMore = UIButton()
        //设置按钮在正常状态下的图像属性
        btMore.setImage(more, for: .normal)
        //将按钮添加到控制器中
        viewMore.addSubview(btMore)
        
        //将四个功能按钮的容器视图，添加到白色背景的视图中
        containerView.addSubview(viewPost)
        containerView.addSubview(viewUpdate)
        containerView.addSubview(viewActivity)
        containerView.addSubview(viewMore)
        
        //初始化第二个内容视图对象
        containerView2 = UIView()
        //并将视图对象添加到根视图
        self.view.addSubview(containerView2)
        
        //依次初始化三个缩略图的容器视图，
        thumbContainer1 = UIView()
        thumbContainer2 = UIView()
        thumbContainer3 = UIView()
        
        //作为三个栏目的缩略图的容器
        let sheep = UIImage(named: "Sheep")
        let balls = UIImage(named: "balls")
        let driver = UIImage(named: "driver")
        
        //初始化三个图像视图，用来显示三个缩略图
        thumbView1 = UIImageView(image: sheep)
        thumbView2 = UIImageView(image: balls)
        thumbView3 = UIImageView(image: driver)
        
        //设置三个图像视图，拥有相同的内容模式
        thumbView1.contentMode = .center
        thumbView2.contentMode = .center
        thumbView3.contentMode = .center
        
        //设置图像视图的层的裁切属性，
        //对边缘进行裁切，只显示图像中间的内容。
        thumbView1.layer.masksToBounds = true
        thumbView2.layer.masksToBounds = true
        thumbView3.layer.masksToBounds = true
        
        //将三个图像视图，添加到缩略图视图容器中
        thumbContainer1.addSubview(thumbView1)
        thumbContainer2.addSubview(thumbView2)
        thumbContainer3.addSubview(thumbView3)
        
        //将三个缩略图容器，添加到第二个内容视图
        containerView2.addSubview(thumbContainer1)
        containerView2.addSubview(thumbContainer2)
        containerView2.addSubview(thumbContainer3)
        
        //初始化三个标签控件，用来显示栏目的名称
        thumbLabel1 = UILabel()
        thumbLabel2 = UILabel()
        thumbLabel3 = UILabel()
        
        //设置三个标签控件的背景颜色为白色
        thumbLabel1.backgroundColor = UIColor.white
        thumbLabel2.backgroundColor = UIColor.white
        thumbLabel3.backgroundColor = UIColor.white
        
        //给三个标签控件设置文字内容
        thumbLabel1.text = "About"
        thumbLabel2.text = "Photos"
        thumbLabel3.text = "Friends"
        
        //设置标签控件的文字对齐方式
        thumbLabel1.textAlignment = .center
        thumbLabel2.textAlignment = .center
        thumbLabel3.textAlignment = .center
        
        //设置标签的字体属性
        thumbLabel1.font = UIFont(name: "Arial", size: 14)
        thumbLabel2.font = UIFont(name: "Arial", size: 14)
        thumbLabel3.font = UIFont(name: "Arial", size: 14)
        
        //将三个标签控件，添加到缩略图容器中
        thumbContainer1.addSubview(thumbLabel1)
        thumbContainer2.addSubview(thumbLabel2)
        thumbContainer3.addSubview(thumbLabel3)
    }
    
    //添加一个方法，用来处理对子视图进行重新布局的事件
    override func viewWillLayoutSubviews()
    {
        //获得当前设备的朝向是否为横向
        let isLandscape : Bool = UIDevice.current.orientation.isLandscape
        //设置横条视图的高度，为根视图高度的0.43倍
        let bannerHeight : CGFloat = view.height * 0.43
        //根据屏幕的朝向，设置不同的用户头像视图区域的高度
        let avatarHeightMultipler : CGFloat = isLandscape ? 0.5 : 0.43
        //根据屏幕的朝向，设置不同的搜索条的高度
        let searchBarHeightMultipler : CGFloat = isLandscape ? 0.43 : 0.75
        //计算获得头像的尺寸
        let avatarSize = bannerHeight * avatarHeightMultipler
        
        //将横条视图约束在屏幕的顶部位置，并设置视图的间距和高度属性。        
        bannerImageView.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: bannerHeight)
         //将搜索条同样约束在屏幕的顶部位置，并设置搜索条的间距和高度属性。
        searchBar.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: 80*searchBarHeightMultipler)
        //将搜索输入框约束在搜索条的顶部，
        //和父视图在水平方向上保持15点的距离，垂直方向上保持6点的距离。输入框的高度为24。
        filterTextField.anchorAndFillEdge(.bottom, xPad: 15, yPad: 6, otherSize: 24)
        
        //将头像视图约束在父视图的左下角，并设置头像视图和父视图的间距为15.
        avatarImageView.anchorInCorner(.bottomLeft, xPad: 15, yPad: 15, width: avatarSize, height: avatarSize)
        //将用来显示用户名称的标签控件，约束在头像视图的右侧居中的位置，
        //并设置标签和头像视图的间距，以及自身的高度。
        nameLabel.alignAndFillWidth(align: .toTheRightCentered, relativeTo: avatarImageView, padding: 15, height: 240)
        //将拍摄按钮，约束在父视图的右下角，并设置和父视图之间的间距，以及自身的尺寸。
        cameraIcon.anchorInCorner(.bottomRight, xPad: 10, yPad: 15, width: 28, height: 26)
        
        //将四个功能按钮所在的容器视图，约束在横条视图的下方并居中对齐。
        //同时设置容器视图的高度为62。
        containerView.alignAndFillWidth(align: .underCentered, relativeTo: bannerImageView, padding: 0, height: 62)
        //通过组约束的方式，将容器视图的四个功能按钮，在水平方向上进行等距排序，并设置间距为10。
        containerView.groupAndFill(group: .horizontal, views: [viewPost, viewUpdate, viewActivity, viewMore], padding: 10)        
        
        //给四个功能按钮添加约束关系，将它们放置在父视图的中心位置，
        //同时设置它们的尺寸信息。
        btPost.anchorInCenter(width: 72, height: 48)
        btUpdate.anchorInCenter(width: 72, height: 48)
        btActivity.anchorInCenter(width: 72, height: 48)
        btMore.anchorInCenter(width: 72, height: 48)
        
        //将第二个视图，用来显示栏目缩略图的容器视图，约束在第一个容器是视图的正下方。
        //并设置高度为108
        containerView2.alignAndFillWidth(align: .underCentered, relativeTo: containerView, padding: 0, height: 108)
        //通过组约束的方式，将容器视图中的三个栏目视图，在水平方向上进行等距排列，并设置间距为10.
        containerView2.groupAndFill(group: .horizontal, views: [thumbContainer1, thumbContainer2, thumbContainer3], padding: 10)
        
        //依次设置三个栏目视图的约束关系，将它们约束在父视图的顶部，
        //并设置它们的尺寸信息。
        thumbView1.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: 84)
        thumbView2.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: 84)
        thumbView3.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: 84)
        
        //设置三个栏目标签的约束关系，将它们约束在父视图的底部，和栏目的缩略图垂直居中。
        //并设置它们的尺寸信息。
        thumbLabel1.anchorAndFillEdge(.bottom, xPad: 0, yPad: 0, otherSize: 24)
        thumbLabel2.anchorAndFillEdge(.bottom, xPad: 0, yPad: 0, otherSize: 24)
        thumbLabel3.anchorAndFillEdge(.bottom, xPad: 0, yPad: 0, otherSize: 24)
    }
    
    override var preferredStatusBarStyle: UIStatusBarStyle
    {
        //最后设置设备顶部状态栏的样式。
        return UIStatusBarStyle.lightContent
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}