控件
1. 什么是控件？
- 屏幕上所有的UI元素都叫做控件，也有人称为组件、视图
- 按钮（UIButton）、文本（UILabel）都是控件
2. 控件的属性有哪些？
- 尺寸（size）
- 位置（origin）
- 背景色（backgroundColor）
- ....
苹果将控件的共同属性都抽取到UIView父类中
父控件、子控件
1. 每一个控件都是一个容器
- 可以将其他的控件放到该控件的内部
- 比较常见的是将UIView作为容器
例：将A控件放入B控件中
- A控件是B控件的子控件
- B控件是A控件的父控件
2.每一个控制器中都有一个view（UIView）
- 控制器本身是不可见的
- 可见的是控制器中的view
- 每一个控制器都有一个UIView的属性
- 控制器中管理的所有子控件都是该view的子控件
8E59C641-EC43-432F-91E0-34309F7F4F07.png
上图中：
- 蓝色的view、第一个按钮和小房子是平级的，又都属于控制器的view的子控件
- 第二个按钮和Label是蓝色的view的子控件
- 在拖拽控件时，会发现：无法直接将按钮拖拽到Label中，只能将按钮拖拽到UIView控件里，其实，它们都是可以拥有子控件的，只是需要用代码来实现
label.addSubView(button)
UIView常见属性
open var superview: UIView? { get }
- 获得自己的父控件对象
open var subviews: [UIView] { get }
- 获得自己的子控件集合
注意：一个控件的父控件只能有一个，但是子控件会有多个
- 为了方便以后的学习，先介绍一个系统方法
/**
* 1.系统调用
* 2.控制器的view加载完成时调用
* 3.主要做控件的初始化、数据的初始化
*/
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
print(view.subviews)
}
可以在这个方法中打印控制器view的子控件，控制器view的子控件的父控件
open var tag: Int // default is 0
- 控件的标识（ID），父控件可以通过tag寻找子控件
open var transform: CGAffineTransform // default is CGAffineTransformIdentity. animatable
- 控件的形变属性。（可以设置旋转角度、比例缩放、平移等）
UIView常见方法
open func addSubview(_ view: UIView)
- 添加一个子控件
open func removeFromSuperview()
- 将自己从父控件中移除
open func viewWithTag(_ tag: Int) -> UIView? // recursive search. includes self
- 根据一个tag标识找出相对应的控件（一般都是子控件）
尽量少的使用tag：
- tag的效率非常差（是遍历subviews里面的所有子控件（包括子控件的子控件）tag来取出的）
- tag使用多了，容易乱
// 示例代码
override func viewDidLoad() {
super.viewDidLoad()
let btn = UIButton(type: .contactAdd)
btn.tag = 1
view.addSubview(btn)
let button = view.viewWithTag(1) as! UIButton
print(button)
btn.removeFromSuperview()
}
UIView的重要属性
1. frame
open var frame: CGRect
- 控件矩形框在父控件中的位置和尺寸（以父控件左上角为坐标原点）
QQ20161129-0@2x.png
上图就是iOS坐标系的简介，那么如何确定一个控件的frame
Snip20161129_4.png
在storyboard中的控件是在右侧精准的修改它的frame的。
在图中已经标明了中间view的frame的由来
// 示例代码
override func viewDidLoad() {
super.viewDidLoad()
let blueView = UIView()
blueView.backgroundColor = UIColor.blue
blueView.frame = CGRect(x: 30, y: 200, width: 300, height: 200)
view.addSubview(blueView)
}
- frame可以精准的设置控件的位置和尺寸
2. bounds和center
open var bounds: CGRect // default bounds is zero origin, frame size. animatable
- 控件矩形框的位置和尺寸（以自己左上角为坐标原点，所以bounds的x和y值都为0）
open var center: CGPoint // center is center of frame. animatable
- 控件中心点的位置（以父控件左上角为坐标原点）
Snip20161129_5.png
- 做一个上图中的界面，并连接好属性和方法
@IBOutlet weak var changeView: UIView!
@IBAction func button1Click(_ sender: UIButton) {
// 改变frame
changeView.frame = CGRect(x: 30, y: 100, width: 60, height: 20)
}
@IBAction func button2Click(_ sender: UIButton) {
// 改变bounds
// 1.改变bounds时，x，y的值并不由心意去改变，这是由于bounds是依照自身左上角为原点的原因
// 2.在iOS9以前，修改bounds的width和height是以左上角为原点，右下方进行收缩或扩张
// 3.在iOS9以后，修改bounds的width和height是以中心点为原点，向外扩张或向内收缩
changeView.bounds = CGRect(x: 70, y: 60, width: 80, height: 30);
}
@IBAction func button3Click(_ sender: UIButton) {
// 改变center
changeView.center = CGPoint(x: 80, y: 120)
}
- 分别去修改frame、bounds和center试一试吧~
网友评论