[Swift通天遁地]6、智能佈局-(8)佈局框架的使用：多分辨率適配和橫豎屏佈局

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號：山青詠芝（shanqingyongzhi）
➤博客園地址：山青詠芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：http://www.javashuo.com/article/p-umpqxrqz-ma.html 
➤若是連接不是山青詠芝的博客園地址，則多是爬取做者的文章。
➤原文已修改更新！強烈建議點擊原文地址閱讀！支持做者！支持原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目錄：[Swift]通天遁地Swift

本文將演示佈局框架的使用：多分辨率的適配和橫豎屏佈局。

首先確保在項目中已經安裝了所需的第三方庫。

點擊【Podfile】,查看安裝配置文件。

1 platform :ios, ‘12.0’
2 use_frameworks!
3 
4 target 'DemoApp' do
5     source 'https://github.com/CocoaPods/Specs.git'
6     pod 'Neon'
7 end

根據配置文件中的相關配置，安裝第三方庫。

而後點擊打開【DemoApp.xcworkspace】項目文件。

在項目導航區，打開視圖控制器的代碼文件【ViewController.swift】

  1 import UIKit
  2 //在當前的類文件中，引入已經安裝的第三方類庫
  3 import Neon
  4 
  5 class ViewController: UIViewController {
  6     
  7     //添加一個視圖變量，做爲界面上的搜索欄
  8     var searchBar : UIView!
  9     //添加一個文本框，放在搜索欄視圖中
 10     var filterTextField: UITextField!
 11     //添加一個圖像視圖變量，用來建立背景橫條
 12     var bannerImageView : UIImageView!
 13     //添加一個視圖變量，用來建立背景橫條
 14     var bannerMaskView : UIView!
 15     //添加一個圖像視圖變量，用來顯示用戶的頭像
 16     var avatarImageView : UIImageView!
 17     //標籤控件，用來顯示用戶的名稱
 18     var nameLabel : UILabel!
 19     //添加一個圖像視圖變量，做爲攝像機按鈕，
 20     //當點擊該按鈕時，使用手機中的相機功能。
 21     var cameraIcon : UIImageView!
 22     //添加三個視圖變量
 23     //做爲欄目縮略圖的容器
 24     var containerView : UIView!
 25     var containerView2 : UIView!
 26     var containerView3 : UIView!
 27     //依次添加四個按鈕變量，
 28     //做爲背景橫條下方的四個功能按鈕。
 29     var btPost : UIButton!
 30     var btUpdate : UIButton!
 31     var btActivity : UIButton!
 32     var btMore : UIButton!
 33     
 34     //依次添加四個視圖變量，
 35     //做爲四個功能按鈕的容器
 36     var viewPost : UIView!
 37     var viewUpdate : UIView!
 38     var viewActivity : UIView!
 39     var viewMore : UIView!
 40     
 41     //繼續添加三個視圖變量，
 42     //做爲三個縮略圖的容器
 43     var thumbContainer1 : UIView!
 44     var thumbContainer2 : UIView!
 45     var thumbContainer3 : UIView!
 46 
 47     //添加三個圖像視圖變量，做爲三個欄目的縮略圖
 48     var thumbView1 : UIImageView!
 49     var thumbView2 : UIImageView!
 50     var thumbView3 : UIImageView!
 51 
 52     //添加三個表情變量，用來顯示三個標籤的名稱
 53     var thumbLabel1 : UILabel!
 54     var thumbLabel2 : UILabel!
 55     var thumbLabel3 : UILabel!
 56     
 57     override func viewDidLoad() {
 58         super.viewDidLoad()
 59         // Do any additional setup after loading the view, typically from a nib.
 60         
 61         //設置根視圖的背景顏色
 62         self.view.backgroundColor = UIColor(red: 210.0/255, green: 210.0/255, blue: 210.0/255, alpha: 1.0)
 63         
 64         //從項目中讀取一張圖片素材
 65         let image = UIImage(named: "background2")
 66         //初始化一個圖像視圖，
 67         //用來顯示加載的圖片
 68         bannerImageView = UIImageView(image: image)
 69         //設置圖像視圖的內容模式爲居中，        
 70         bannerImageView.contentMode = .center
 71         //當圖片尺寸超過圖像視圖時，
 72         //圖像將居中顯示在圖像視圖的顯示區域。
 73         bannerImageView.layer.masksToBounds = true
 74         //將圖像視圖添加到根視圖
 75         self.view.addSubview(bannerImageView)
 76         
 77         //初始化一個視圖對象，做爲搜索框視圖。
 78         searchBar = UIView()
 79         //設置搜索框視圖的背景顏色
 80         searchBar.backgroundColor = UIColor(red: 79.0/255, green: 107.0/255, blue: 165.0/255, alpha: 1.0)
 81         //將視圖添加到根視圖
 82         self.view.addSubview(searchBar)
 83         
 84         //初始化一個文本框，做爲搜索輸入框
 85         filterTextField = UITextField()
 86         //設置輸入框的背景顏色
 87         filterTextField.backgroundColor = UIColor(red: 56.0/255, green: 71.0/255, blue: 120.0/255, alpha: 1.0)
 88         ///設置輸入框的邊框樣式
 89         filterTextField.borderStyle = .roundedRect
 90         //設置輸入框的文字對齊方式
 91         filterTextField.textAlignment = .center
 92         //設置輸入框的字體屬性
 93         filterTextField.font = UIFont(name: "Arial", size: 12)
 94         //初始化一個樣式字典對象，
 95         //用來設置輸入框的佔位符的文字顏色。
 96         let attributes = [NSAttributedString.Key.foregroundColor : UIColor.lightGray]
 97         //初始化一個屬性字符串常量
 98         let attributedString = NSAttributedString(string: "User Name", attributes: attributes)
 99         //設置輸入框的佔位符屬性
100         filterTextField.attributedPlaceholder =  attributedString
101         //設置輸入框的文字顏色
102         filterTextField.textColor = UIColor.white
103         //將輸入框添加到搜索欄視圖中
104         searchBar.addSubview(filterTextField)
105         
106         //從項目中讀取一張圖片素材，
107         let avarta = UIImage(named: "Avarta")
108         //初始化圖像視圖顯示該圖片
109         avatarImageView = UIImageView(image: avarta)
110         //設置圖像視圖的邊框
111         avatarImageView.layer.borderWidth = 2
112         //設置圖像視圖邊框顏色爲白色
113         avatarImageView.layer.borderColor = UIColor.white.cgColor
114         //將頭像添加到圖像視圖中
115         bannerImageView.addSubview(avatarImageView)
116         
117         //初始化一個標籤控件
118         nameLabel = UILabel()
119         //設置標籤控件的文字內容
120         nameLabel.text = "Jane\nAmaral"
121         //設置標籤控件的字體顏色
122         nameLabel.textColor = UIColor.white
123         //設置標籤的字體屬性
124         nameLabel.font = UIFont(name: "Arial", size: 26)
125         //設置標籤控件能夠顯示兩行文字
126         nameLabel.numberOfLines = 2
127         //將標籤控件也添加到橫條視圖中
128         bannerImageView.addSubview(nameLabel)
129         
130         //從項目中讀取一張圖片素材，
131         let camera = UIImage(named: "Camera")
132         //初始化圖像視圖顯示該圖片
133         cameraIcon = UIImageView(image: camera)
134         //將圖像視圖也添加到橫條視圖中
135         bannerImageView.addSubview(cameraIcon)
136         
137         //初始化一個視圖對象，該視圖對象將做爲四個功能按鈕的容器
138         containerView = UIView()
139         //設置視圖對象的背景顏色爲白色
140         containerView.backgroundColor = UIColor.white
141         //給視圖對象的層添加陰影效果，並設置陰影的顏色和偏移距離
142         containerView.layer.shadowColor = UIColor.black.cgColor
143         //給視圖對象的層添加一個投影效果，並設置陰影的顏色和偏移距離。
144         containerView.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
145         //設置陰影的不透明度
146         containerView.layer.shadowOpacity = 0.15
147         //設置陰影的半徑
148         containerView.layer.shadowRadius = 2
149         //將視圖對象添加到根視圖
150         self.view.addSubview(containerView)
151         
152         //初始化一個視圖對象，該視圖對象將做爲第一個功能按鈕的容器
153         viewPost = UIView()
154         //從項目中讀取一張圖片素材，
155         let post = UIImage(named: "post")
156         //初始化按鈕控件
157         btPost = UIButton()
158         //設置按鈕在正常狀態下的圖像屬性
159         btPost.setImage(post, for: .normal)
160         //將按鈕添加到控制器中
161         viewPost.addSubview(btPost)
162         
163         //初始化一個視圖對象，該視圖對象將做爲第二個功能按鈕的容器
164         viewUpdate = UIView()
165         //從項目中讀取一張圖片素材，
166         let update = UIImage(named: "update")
167         //初始化按鈕控件
168         btUpdate = UIButton()
169         //設置按鈕在正常狀態下的圖像屬性
170         btUpdate.setImage(update, for: .normal)
171         //將按鈕添加到控制器中
172         viewUpdate.addSubview(btUpdate)
173         
174         //初始化一個視圖對象，該視圖對象將做爲第三個功能按鈕的容器
175         viewActivity = UIView()
176         //從項目中讀取一張圖片素材，
177         let activity = UIImage(named: "activity")
178         //初始化按鈕控件
179         btActivity = UIButton()
180         //設置按鈕在正常狀態下的圖像屬性
181         btActivity.setImage(activity, for: .normal)
182         //設置該控件內容的顯示區域
183         btActivity.contentRect(forBounds: CGRect(x: 0, y: 0, width: 10, height: 50))
184         //將按鈕添加到控制器中
185         viewActivity.addSubview(btActivity)
186         
187         //初始化一個視圖對象，該視圖對象將做爲第四個功能按鈕的容器
188         viewMore = UIView()
189         //從項目中讀取一張圖片素材，
190         let more = UIImage(named: "more")
191         //初始化按鈕控件
192         btMore = UIButton()
193         //設置按鈕在正常狀態下的圖像屬性
194         btMore.setImage(more, for: .normal)
195         //將按鈕添加到控制器中
196         viewMore.addSubview(btMore)
197         
198         //將四個功能按鈕的容器視圖，添加到白色背景的視圖中
199         containerView.addSubview(viewPost)
200         containerView.addSubview(viewUpdate)
201         containerView.addSubview(viewActivity)
202         containerView.addSubview(viewMore)
203         
204         //初始化第二個內容視圖對象
205         containerView2 = UIView()
206         //並將視圖對象添加到根視圖
207         self.view.addSubview(containerView2)
208         
209         //依次初始化三個縮略圖的容器視圖，
210         thumbContainer1 = UIView()
211         thumbContainer2 = UIView()
212         thumbContainer3 = UIView()
213         
214         //做爲三個欄目的縮略圖的容器
215         let sheep = UIImage(named: "Sheep")
216         let balls = UIImage(named: "balls")
217         let driver = UIImage(named: "driver")
218         
219         //初始化三個圖像視圖，用來顯示三個縮略圖
220         thumbView1 = UIImageView(image: sheep)
221         thumbView2 = UIImageView(image: balls)
222         thumbView3 = UIImageView(image: driver)
223         
224         //設置三個圖像視圖，擁有相同的內容模式
225         thumbView1.contentMode = .center
226         thumbView2.contentMode = .center
227         thumbView3.contentMode = .center
228         
229         //設置圖像視圖的層的裁切屬性，
230         //對邊緣進行裁切，只顯示圖像中間的內容。
231         thumbView1.layer.masksToBounds = true
232         thumbView2.layer.masksToBounds = true
233         thumbView3.layer.masksToBounds = true
234         
235         //將三個圖像視圖，添加到縮略圖視圖容器中
236         thumbContainer1.addSubview(thumbView1)
237         thumbContainer2.addSubview(thumbView2)
238         thumbContainer3.addSubview(thumbView3)
239         
240         //將三個縮略圖容器，添加到第二個內容視圖
241         containerView2.addSubview(thumbContainer1)
242         containerView2.addSubview(thumbContainer2)
243         containerView2.addSubview(thumbContainer3)
244         
245         //初始化三個標籤控件，用來顯示欄目的名稱
246         thumbLabel1 = UILabel()
247         thumbLabel2 = UILabel()
248         thumbLabel3 = UILabel()
249         
250         //設置三個標籤控件的背景顏色爲白色
251         thumbLabel1.backgroundColor = UIColor.white
252         thumbLabel2.backgroundColor = UIColor.white
253         thumbLabel3.backgroundColor = UIColor.white
254         
255         //給三個標籤控件設置文字內容
256         thumbLabel1.text = "About"
257         thumbLabel2.text = "Photos"
258         thumbLabel3.text = "Friends"
259         
260         //設置標籤控件的文字對齊方式
261         thumbLabel1.textAlignment = .center
262         thumbLabel2.textAlignment = .center
263         thumbLabel3.textAlignment = .center
264         
265         //設置標籤的字體屬性
266         thumbLabel1.font = UIFont(name: "Arial", size: 14)
267         thumbLabel2.font = UIFont(name: "Arial", size: 14)
268         thumbLabel3.font = UIFont(name: "Arial", size: 14)
269         
270         //將三個標籤控件，添加到縮略圖容器中
271         thumbContainer1.addSubview(thumbLabel1)
272         thumbContainer2.addSubview(thumbLabel2)
273         thumbContainer3.addSubview(thumbLabel3)
274     }
275     
276     //添加一個方法，用來處理對子視圖進行從新佈局的事件
277     override func viewWillLayoutSubviews()
278     {
279         //得到當前設備的朝向是否爲橫向
280         let isLandscape : Bool = UIDevice.current.orientation.isLandscape
281         //設置橫條視圖的高度，爲根視圖高度的0.43倍
282         let bannerHeight : CGFloat = view.height * 0.43
283         //根據屏幕的朝向，設置不一樣的用戶頭像視圖區域的高度
284         let avatarHeightMultipler : CGFloat = isLandscape ? 0.5 : 0.43
285         //根據屏幕的朝向，設置不一樣的搜索條的高度
286         let searchBarHeightMultipler : CGFloat = isLandscape ? 0.43 : 0.75
287         //計算得到頭像的尺寸
288         let avatarSize = bannerHeight * avatarHeightMultipler
289         
290         //將橫條視圖約束在屏幕的頂部位置，並設置視圖的間距和高度屬性。        
291         bannerImageView.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: bannerHeight)
292          //將搜索條一樣約束在屏幕的頂部位置，並設置搜索條的間距和高度屬性。
293         searchBar.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: 80*searchBarHeightMultipler)
294         //將搜索輸入框約束在搜索條的頂部，
295         //和父視圖在水平方向上保持15點的距離，垂直方向上保持6點的距離。輸入框的高度爲24。
296         filterTextField.anchorAndFillEdge(.bottom, xPad: 15, yPad: 6, otherSize: 24)
297         
298         //將頭像視圖約束在父視圖的左下角，並設置頭像視圖和父視圖的間距爲15.
299         avatarImageView.anchorInCorner(.bottomLeft, xPad: 15, yPad: 15, width: avatarSize, height: avatarSize)
300         //將用來顯示用戶名稱的標籤控件，約束在頭像視圖的右側居中的位置，
301         //並設置標籤和頭像視圖的間距，以及自身的高度。
302         nameLabel.alignAndFillWidth(align: .toTheRightCentered, relativeTo: avatarImageView, padding: 15, height: 240)
303         //將拍攝按鈕，約束在父視圖的右下角，並設置和父視圖之間的間距，以及自身的尺寸。
304         cameraIcon.anchorInCorner(.bottomRight, xPad: 10, yPad: 15, width: 28, height: 26)
305         
306         //將四個功能按鈕所在的容器視圖，約束在橫條視圖的下方並居中對齊。
307         //同時設置容器視圖的高度爲62。
308         containerView.alignAndFillWidth(align: .underCentered, relativeTo: bannerImageView, padding: 0, height: 62)
309         //經過組約束的方式，將容器視圖的四個功能按鈕，在水平方向上進行等距排序，並設置間距爲10。
310         containerView.groupAndFill(group: .horizontal, views: [viewPost, viewUpdate, viewActivity, viewMore], padding: 10)        
311         
312         //給四個功能按鈕添加約束關係，將它們放置在父視圖的中心位置，
313         //同時設置它們的尺寸信息。
314         btPost.anchorInCenter(width: 72, height: 48)
315         btUpdate.anchorInCenter(width: 72, height: 48)
316         btActivity.anchorInCenter(width: 72, height: 48)
317         btMore.anchorInCenter(width: 72, height: 48)
318         
319         //將第二個視圖，用來顯示欄目縮略圖的容器視圖，約束在第一個容器是視圖的正下方。
320         //並設置高度爲108
321         containerView2.alignAndFillWidth(align: .underCentered, relativeTo: containerView, padding: 0, height: 108)
322         //經過組約束的方式，將容器視圖中的三個欄目視圖，在水平方向上進行等距排列，並設置間距爲10.
323         containerView2.groupAndFill(group: .horizontal, views: [thumbContainer1, thumbContainer2, thumbContainer3], padding: 10)
324         
325         //依次設置三個欄目視圖的約束關係，將它們約束在父視圖的頂部，
326         //並設置它們的尺寸信息。
327         thumbView1.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: 84)
328         thumbView2.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: 84)
329         thumbView3.anchorAndFillEdge(.top, xPad: 0, yPad: 0, otherSize: 84)
330         
331         //設置三個欄目標籤的約束關係，將它們約束在父視圖的底部，和欄目的縮略圖垂直居中。
332         //並設置它們的尺寸信息。
333         thumbLabel1.anchorAndFillEdge(.bottom, xPad: 0, yPad: 0, otherSize: 24)
334         thumbLabel2.anchorAndFillEdge(.bottom, xPad: 0, yPad: 0, otherSize: 24)
335         thumbLabel3.anchorAndFillEdge(.bottom, xPad: 0, yPad: 0, otherSize: 24)
336     }
337     
338     override var preferredStatusBarStyle: UIStatusBarStyle
339     {
340         //最後設置設備頂部狀態欄的樣式。
341         return UIStatusBarStyle.lightContent
342     }
343     
344     override func didReceiveMemoryWarning() {
345         super.didReceiveMemoryWarning()
346         // Dispose of any resources that can be recreated.
347     }
348 }