控件
1. 什么是控件?
- 屏幕上所有的UI元素都叫做控件,也有人称为组件、视图
- 按钮(UIButton)、文本(UILabel)都是控件
2. 控件的属性有哪些?
- 尺寸(size)
- 位置(origin)
- 背景色(backgroundColor)
- ....
苹果将控件的共同属性都抽取到UIView父类中
父控件、子控件
1. 每一个控件都是一个容器
- 可以将其他的控件放到该控件的内部
- 比较常见的是将UIView作为容器
例:将A控件放入B控件中
- A控件是B控件的子控件
- B控件是A控件的父控件
2.每一个控制器中都有一个view(UIView)
- 控制器本身是不可见的
- 可见的是控制器中的view
- 每一个控制器都有一个UIView的属性
- 控制器中管理的所有子控件都是该view的子控件
上图中:
- 蓝色的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
- 控件矩形框在父控件中的位置和尺寸(以父控件左上角为坐标原点)
上图就是iOS坐标系的简介,那么如何确定一个控件的frame
在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
- 控件中心点的位置(以父控件左上角为坐标原点)
- 做一个上图中的界面,并连接好属性和方法
@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试一试吧~