程序员首页投稿（暂停使用，暂停投稿）iOS Developer

1、Views

2016-05-12  本文已影响400人  smalldu
概述

UIView或者它的子类知道怎样将自己绘制在一个矩形区域中。我们app所有可视的的界面来自于视图。创建和配置一个view非常的简单。比如你可以在Xib编辑器中拖一个UIButton或者其他view到一个View上，你也可以使用代码来操作所有的绘制。你可以控制view显示和消失、移动、改变大小或者在它上面显示其他view、给它做动画等。

UIView是UIResponder的子类，所以也能相应事件（和用户交互，这也是UIView和CALayer本质区别）。

视图层次是视图组织的主要模式。一个view可以拥有很多子视图，一个子视图只能拥有一个直接父视图，这样就形成一个视图的层级树。如果一个视图从界面上remove，它所有子视图也会被remove掉。如果一个view隐藏（hidden）它所有子视图hidden。其他变化同样也会共享给他的子视图。

我们应该选择xib还是code创建视图，两者没有好坏这分，这取决于你的需求、习惯和你的app的整体架构。

Window

app的window是视图层级最顶部的view。它是一个UIWindow对象（或者UIWindow的子类），UIWindow是UIView的子类。我们app拥有一个主window，在app运行期间创建，而且不会被销毁或者替换。其他所有可见的视图都是它的子视图。

如果你的app可以在外部屏幕展示视图，你将需要创建一个额外的UIWindow，但是在本章节，我们假设只有一个屏幕，只有一个window

初始化一个window必须充满设备的屏幕，确保设置window的frame等于屏幕的bounds，如果你使用的是main.storyboard,在app加载的时候会自动帮你创建，AppDelegate顶部的那个注解@UIApplicationMain 。 如果你需要自己创建可以通过以下方式:

// 创建window iOS 9 之前
let w = UIWindow(frame: UIScreen.mainScreen().bounds)
// iOS 9 之后
let w = UIWindow()

window必须在app的整个生命周期都被持有。所以AppDelegate拥有window的强引用，我们一般不会将一个view直接放在主window上，而是通过将一个ViewController付给window的rootViewController属性，
如果你使用的是main.stroyboard 这个事情也是系统做好的，rootViewController 会直接指向main.stroyboard的initial view controller 。 一个VC成为window的rootViewController 后，它的view也会变成UIWindow的直接子视图。你的app将会在调用window?.makeKeyAndVisible()时显示。

总结下初始化、创建、配置显示主窗口的过程：（应该考虑两种情况）

import UIKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        
        self.window = UIWindow()
        self.window!.rootViewController = UIViewController()  // 也可以是自定义的子类
        self.window!.backgroundColor = UIColor.whiteColor()
        self.window!.makeKeyAndVisible()
        return true
    }
}

上面是app运行最少需要的代码，运行指挥得到一个白板。

如何使用window的子类：

lazy var window : UIWindow? = {
    return MyWindow()
}()

app一运行，会有很多方法来引用主window

Single View Application 模板

本章节重点是view，所以暂且不介绍ViewController相关内容，后面章节会介绍

新建的Single View Application会自动创建一个Main.storyboard 和 ViewController.swift作为window的rootViewController。

现在我们可以在ViewController.swift中通过代码添加一个view上去
就在viewDidLoad方法中

 override func viewDidLoad() {
        super.viewDidLoad()

        let mainview = self.view
        let v = UIView(frame:CGRectMake(100,100,50,50))
        v.backgroundColor = UIColor.redColor() // 红色小块
        mainview.addSubview(v) // 添加到mainview
        
    }

不包含main storyboard的实现方式

func application(application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?)
        -> Bool {
            self.window = UIWindow()
            self.window!.rootViewController = UIViewController()
            // here we can add subviews
            let mainview = self.window!.rootViewController!.view
            let v = UIView(frame:CGRectMake(100,100,50,50))
            v.backgroundColor = UIColor.redColor() // small red square
            mainview.addSubview(v) // add it to main view
            // and the rest is as before...
            self.window!.backgroundColor = UIColor.whiteColor()
            self.window!.makeKeyAndVisible()
            return true
    }
Subview and Superview (子视图和父视图)



在iOS中，一个subview的一部分或者全部都可以出现在其superview的外部。一个 view 可以和另一个 view 重叠，即使不是其 subview 也可以绘制部分或全部绘制在另一个 view 之前。

测试了下，在interface Builder中拖拽的时候是被挡住的

配图

但是运行结果是没有挡住的

配图

View 层级 的特点

一个UIView有一个superview属性和一个subviews（数组）属性（都是可空类型）。可以据此来判断视图层级。另外也有一个 isDescendantOfView: 方法来检查一个 view 是不是另一个 view 的 subview (可以不是直接子视图)。View 还有一个 tag 属性，可以通过 viewWithTag: 来进行引用。我们最好给所有subviews设置不同的tag

使用代码操作视图层级：（可以直接操作，也可以配合动画）

没有一个方法可以直接移除一个 view 的所有 subview。然而，因为一个 view 的 subview 数组是一个不可变的数组，所以可以用如下方法一次移除全部：

myView.subviews.forEach {$0.removeFromSuperview}

重写下列方法就可以根据需要在不同的情况下进行不同的操作：

Visibility and Opacity（可见性和透明度）

视图的可见性可以通过设置 hidden 属性来更改。一个隐藏的 view 无法接收触摸事件，所以对于用户来说相当于不存在，但实际上是存在的，所以仍然可以在代码中对其操作

View 的背景颜色可以通过其 backgroundColor 属性来设置，颜色属于 UIColor 类。如果 backgroundColor 为 nil(默认值) 那么背景就是透明的。

可以通过设置 view 的 alpha 属性来修改透明程度，1.0 是完全不透明，0.0 是透明。假设一个 view 的 alpha 是 0.5，那么它的 subview 的 alpha 都是以 0.5 为基准的，不可能高于 0.5。而 UIColor 也有 alpha 这个属性，所以即使一个 view 的 alpha 是 1.0，它仍旧可能是透明的，因为其 backgroundColor 可以是透明的。一个 alpha 为 0.0 的 view 是完全透明的所以是不可见的，通常来说也不可能被点击。

View 的 alpha 属性不仅影响背景颜色，也会影响其内容的透明度。（比如一个背景色将会渗透图片）

我大概实验了下，应该是下面这个🌰 的意思：

配图

view的opaque（不透明度）,并不会影响view的样子，更多的是对于系统绘制时的提示。如果一个 view 的 opaque 设为 true，因为不用考虑透明的绘制，所以效率会高一点，并且再设置透明的背景颜色或者 alpha 属性都无效。可能会让人吃惊，它的默认值是 true

但是我设置了view的alpha=0.3 还是有不透明的效果(或者是叠加),在设置前后都打印了opaque的值都是true

配图
配图

然后还手动把opaque设置为false,但是也没有什么用，懂的解释下??

Frame

View 的 frame属性(CGRect类) 是它本身的长方形在 superview 中的位置，注意是在 superview 的坐标系中的位置。默认来说，superview 的坐标系原点在左上，向右 x 增加，向下 y 增加。

看一个frame使用的简单的例子：

let mainview = self.view
let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView(frame:CGRectMake(41, 56, 132, 194))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
let v3 = UIView(frame:CGRectMake(43, 197, 160, 230))
v3.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)
mainview.addSubview(v3)

以上很基础的代码，不赘述了。

Bounds and Center

bounds 属性对应的是一个 view 在自己的坐标系统中的矩形尺寸（注意，frame 是在 superview 的坐标系下的）

let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView(frame:v1.bounds.insetBy(dx: 10, dy: 10))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)

这是一种很常见的 bounds 的用法，当你需要往一个 view 里放东西的时候，无论是手动绘制还是放置一个 subview，通常都要使用 view 的 bounds

配图

当你改变一个 view 的 bounds 时，它的 frame 也会对应改变，frame 的改变是基于其中心点的（中心点不会变），下面的代码描述了这个情况：

let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView(frame:v1.bounds.insetBy(dx: 10, dy: 10))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)
v2.bounds.size.height += 20
v2.bounds.size.width += 20\

效果就是从上图变成了下图，增加的 20 会被均匀分布在上下左右，正好抵消了之前的设置。

配图

当创建一个 UIView 时，其 bounds 的坐标原点是 (0.0, 0.0)，也就是左上角，如果改变了 bounds 的原点，也就改变了其坐标系，其 subview 一般也会有变化，下面代码描述了这种情况

let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView(frame:v1.bounds.insetBy(dx: 10, dy: 10))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)
v1.bounds.origin.x += 10
v1.bounds.origin.y += 10
配图

如果你把那两个10改成20 效果如图

配图

我们并没有设置subview的任何属性，然而subview移动了，可以看到 subviw 向着原点移动方向的反方向进行了移动，这是因为一个 view 的原点与其 frame 的左上角一致

我们看到改变 bounds 的 size 会影响其 frame 的 size ，改变 frame 的 size 会影响其 bounds 的 size 。只有 view 的 center 不会影响 bounds 的 size 。 这个属性代表了 subview 在 superview 中的 position 。

书中给出获取一个view的center的方法

let c = CGPointMake(theView.bounds.midX,theView.bounds.midY)

但是经过我验证，这个方法获得的是view相对于自己坐标的，我自己测试代码如下 ， 或许应该加上x ， y 坐标

let v3 = UIView(frame:CGRectMake(113, 111, 132, 194))
print(v3.center)    // (179.0, 208.0)
let c = CGPointMake(v3.bounds.midX, v3.bounds.midY)
print(c)    // (66.0, 97.0)
let c1 = CGPoint(x: v3.bounds.midX+113, y: v3.bounds.midY+111)
print(c1)   // (179.0, 208.0)

view的bounds和center互不影响，相互独立的。frame是center和bounds便捷的表达。大多数情况我们只需要使用frame就可以了。一般会通过init(frame:) 来创建一个view。注意有些情况下 frame 会没有什么意义，但是 bounds 和 center 总是有效的，所以建议多用 bounds 和 center 的组合，也比较容易理解。

可以用如下方法来进行不同 view 之间的坐标转换

如果第二个参数是nil，系统自动填补为window

比如我们上面算center的例子也可以这样转换下

print(v3.center)    // (179.0, 208.0)
let c = CGPointMake(v3.bounds.midX, v3.bounds.midY)
let c2 = v3.convertPoint(c, toView: self.view)
print(c)    // (66.0, 97.0)
print(c2)   // (179.0, 208.0)

注意，通过改变 center 来设置 view 的位置时，如果高或宽不是偶数，那么可能会导致 misaligned(错位)。可以通过打开模拟器的 Debug -> Color Misaligned Images 来进行检测。一个简单的方法是调整好位置之后调用 makeIntegralInPlace 来设置 view 的 frame

Window Coordinates and Screen Coordinates(窗口坐标和屏幕坐标)

设备屏幕是没有 frame 的，但是有 bounds。Main window 也没有 superview，不过其 frame 被设置为屏幕的 bounds，如：

let w = UIWindow(frame: UIScreen.mainScreen().bounds)
//iOS 9
let w = UIWindow() //系统自动设置为上面代码

大多数情况下，window是充满整个屏幕的，所以大多数情况下window的坐标和screen的坐标是一样的。

现在的 iOS 中坐标系和手机是否选择是有关的，有如下两个属性：（在实际开发中基本不会碰到）

可以用下面的方法来对不同坐标空间进行转换：

假设界面中有一个 UIView v，我们想知道它的实际设备坐标，可以用下面的代码：

let r = v.superview!convertRect(v.frame, toCoordinateSpace: UIScreen.mainScreen().fixedCoordinateSpace)

但实际上你需要这种信息的机会非常少(反正我是没遇到过需要使用的)，或者其实几乎都不用担心 window 坐标，因为所有的可见操作都会在 root view contoller 的 main view 中进行，它的 bounds 是会自动调整的。

Transform ( 变换 )

一个 view 的 transform 属性改变这个 view 是如何被绘制的，实际上就是一个 CGAffineTransform类的 3x3 矩阵（线性代数中的概念）。所有的变换都是以这个 view 的 center 做基准的。

🌰

let v1 = UIView(frame:CGRectMake(113, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView(frame:v1.bounds.insetBy(dx: 10, dy: 10))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)
v1.transform = CGAffineTransformMakeRotation(45 * CGFloat(M_PI)/180.0)
旋转

上面代码的例子只是对前面例子的v1做了45度的旋转。

我们如果打印下v1旋转前后的三个属性：

print("frame : \(v1.frame) , bounds:\(v1.bounds) , center:\(v1.center)")
//        frame : (113.0, 111.0, 132.0, 194.0) , bounds:(0.0, 0.0, 132.0, 194.0) , center:(179.0, 208.0)
 v1.transform = CGAffineTransformMakeRotation(45 * CGFloat(M_PI)/180.0)
print("frame : \(v1.frame) , bounds:\(v1.bounds) , center:\(v1.center)")
//        frame : (63.7415946665928, 92.7415946665928, 230.516810666815, 230.516810666815) , bounds:(0.0, 0.0, 132.0, 194.0) , center:(179.0, 208.0)

发现只有frame变了，center和bounds都没有变 ，但是 frame 的数值已经没有意义，因为现在它的尺寸是能够覆盖当前 view 的最小的矩形，并不会随着 view 的旋转而选择。

如果我们把旋转换成缩放

       print("frame : \(v1.frame) , bounds:\(v1.bounds) , center:\(v1.center)")
       v1.transform = CGAffineTransformMakeScale(1.8, 1)
       print("frame : \(v1.frame) , bounds:\(v1.bounds) , center:\(v1.center)")
//        frame : (113.0, 111.0, 132.0, 194.0) , bounds:(0.0, 0.0, 132.0, 194.0) , center:(179.0, 208.0)
//        frame : (60.2, 111.0, 237.6, 194.0) , bounds:(0.0, 0.0, 132.0, 194.0) , center:(179.0, 208.0)

还是只有frame发生了改变 。因为他的位置并没有变只是被拉长了。bouds并不会因此而改变

变换矩阵的计算可以连接的，所以不同的变换是可以叠加的，并且顺序是重要的（矩阵乘法不满足交换律）

🌰

let v1 = UIView(frame:CGRectMake(20, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView(frame:v1.bounds)
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)
        
v2.transform = CGAffineTransformMakeTranslation(100, 0)
v2.transform = CGAffineTransformRotate(v2.transform, 45 * CGFloat(M_PI)/180.0)

这个例子我们先在主view上放了两个完全重叠的view，然后对v2做了平移和旋转的变换 ，两个叠加起来的

效果：

先平移后旋转 
v2.transform = CGAffineTransformMakeRotation(45 * CGFloat(M_PI)/180.0)
v2.transform = CGAffineTransformTranslate(v2.transform, 100, 0)
先旋转后平移

也可以使用这个方法CGAffineTransformConcat:

 let r = CGAffineTransformMakeRotation(45 * CGFloat(M_PI)/180.0)
 let t = CGAffineTransformMakeTranslation(100, 0)
 v2.transform = CGAffineTransformConcat(t,r)

这个也需要注意顺序

Trait Collections and Size Classes

界面上的每个 view(或者ViewController) 都有一个 traitCollection 属性 , 值是一个 UITraitCollection，包含下面四个属性：

当应用运行时如果 trait collection 发生改变，会调用traitCollectionDidChange 方法

traitCollectionDidChange传入的参数是旧的traitCollection值：

override func traitCollectionDidChange(previousTraitCollection: UITraitCollection?) {
    print("old----\(previousTraitCollection?.verticalSizeClass.rawValue)")
    print("old----\(previousTraitCollection?.horizontalSizeClass.rawValue)")
    print("new----\(self.view.traitCollection.verticalSizeClass.rawValue)")
    print("new----\(self.view.traitCollection.horizontalSizeClass.rawValue)")
}

切换几次横竖屏的结果：

配图

traitCollection还可以自己设定，这个特性将在后面章节讲到

Layout

superview 移动的时候 subview 就会移动。subview 大小和位置 会随着 superview改变，这就是layout。

一些superview动态改变的例子：

在以上的任何情况下其他view可能需要Layout

Layout 有三种主要的执行方式

Autoresizing（自动调整大小）

Autoresizing 是一种自动拉伸和固定大小的一种概念，view有一个autoresizingMask 属性 ，这个属性是一个UIViewAutoresizing 的值 。默认是.None 。下面举例来看看它的用法：

let mainview = self.view
let v1 = UIView(frame:CGRectMake(100, 111, 132, 194))
v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
let v2 = UIView(frame:CGRectMake(0, 0, 132, 10))
v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)
let v3 = UIView(frame:CGRectMake(v1.bounds.width-20, v1.bounds.height-20, 20, 20))
v3.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
mainview.addSubview(v1)
v1.addSubview(v2)
v1.addSubview(v3)

v2 和 v1 宽度相等

执行结果：

配图

如果我加上一句代码，改变了v1的宽度呢？

v1.bounds.size.width += 40

结果如图：

就变成这样了

这时候就可以利用autoresizingMask属性来指定v2的宽度可伸缩。

v2.autoresizingMask = .FlexibleWidth

结果：

配图

这里注定一点，要先指定可伸缩，再改变大小

同理v3也可以：

v2.autoresizingMask = .FlexibleWidth
v3.autoresizingMask = [.FlexibleTopMargin, .FlexibleLeftMargin]

v1.bounds.size.width += 40
v1.bounds.size.height -= 50

v3就相当于在左边和上边放了弹簧

配图

其实这种类似于约束布局，现在大部分会选择使用Autolayout，下面小结看下Autolayout的用法。
Autolayout部分请戳：Views - AutoLayout

上一篇下一篇

猜你喜欢

热点阅读