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

  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         //最后设置设备顶部