OCUI界面设计：视图与视图控制器

视图（UIView）

基本介绍

• UIView是基本的视图类，表示屏幕上的一块矩形区域。

• UIView用于展示内容以及接收用户交互事件。

• UIView可以管理其下显示的所有的子视图。

• 屏幕坐标系：

  iOS设备以屏幕左上角为坐标原点，水平向右为X轴正方向，竖直向下为Y轴正方向。

视图层次、大小和位置

• subview在显示到屏幕上时，是位于superview 上面的，同一个view中的subview是按照嵌入顺序显示的，越晚加入的subview显示在越上层 ，可以通过tag值从父视图中找到对应的视图。

- (UIView *)viewWithTag:(NSInteger) aTag;

• frame属性是边框矩形，用于指定视图相对于其父视图坐标系统的位置 和大小（相对于父视图），bounds属性是边界矩形,负责定义视图相对于本地坐标系统的位置和 大小（相对于本身），center属性是边框矩形的中心点。

• 一些有用的Core Graphic数据结构以及对应的创建方法：

  点：CGPoint 创建方法：CGPointMake(x,  y)  尺寸：CGSize 创建方法：CGSizeMake(width,  height)   矩形区域：CGRect 创建方法：CGRectMake(x, y, width, height)      字面量初始化赋默认值：  CGRectZero  == CGPointMake(0, 0)  CGSizeZero  == CGSizeMake(0, 0)   CGPointZero == CGRectMake(0, 0, 0, 0)      CGRectGetWidth() ：获取某个视图的宽度  CGRectGetHeight()：获取某个视图的高度  CGRectGetMidX()：获取某个视图X轴中心点  CGRectGetMidY()：获取某个视图Y轴中心点  CGRectGetMaxX()：获取某个视图X轴最大点  CGRectGetMaxY()：获取某个视图Y轴最大点  CGRectGetMinX()：获取某个视图X轴最小点  CGRectGetMinY()：获取某个视图Y轴最大点

视图属性

• autoresizeSubviews：默认是YES,自动调整子视图大小

• autoresizingMask：父视图改变的时候自己如何跟着变化

• backgroundColor：背景颜色

• hidden：是否隐藏

• multipleTouchEnabled：是否支持多点触摸

• subviews：所有子视图(NSArray类型)

• superview：父视图

• userInteractionEnabled：是否接收交互

• alpha：透明度(CGFloat)

• frame：相对父视图的位置和大小(CGRect)

• bounds：相对自己的位置和大小(CGRect)

• center：相对父视图的中心点(CGPoint)

• clipsToBounds：超出父视图部分不显示

• transform：变换属性(CGAffineTransform)

• window：当前view所在的window

• tag：区分标识(NSInteger)

• layer：视图层(CALayer)，通过视图层可设置视图的边框宽度、边框颜色、阴影等。

视图操作

• 视图初始化：

- (instancetype)initWithFrame:(CGRect)frame;

• 添加视图：

- (void)addSubview:(UIView *)view;

• 插入视图：

// 插入到指定位置- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index;// 插入到指定视图下方- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview;// 插入到指定视图上方- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview;

• 整理视图

// 将某个视图置于顶部- (void)bringSubviewToFront:(UIView *)view;// 将某个视图置于底部- (void)sendSubviewToBack:(UIView *)view;// 交换视图位置- (void)exchangeSubviewAtIndex:(NSInteger)index1 withSubviewAtIndex:(NSInteger)index2;

• 移除视图

// 移除子视图- (void)removeFromSuperview;

// 遍历移除某一个视图上的所有子视图    for (UIView *view in self.view.subviews) {        [view removeFromSuperview];    }

视图封装

• 对于一些重用性比较高的视图我们可以封装起来，在以后的开发过程中需要用到的时候可直接导入使用，极大提高编码效率；其次，视图封装有着可分化减少文件代码量等等好处。

• UIView是所有视图的父类，对于视图封装而言，我们一般又叫自定义UIView，因此，视图的封装是封装在UIView上的，要封装视图，我们需子类化UIView。

• 视图封装方法

steps 1：创建一个UIView的子类；选中工程目录 -> 按command + n新建文件 -> 选择iOS中Source目录下的 Cocoa Touch Class -> 在设置面板中输入Class类名CustomView（根据需要命名），Subclass选择UIView。

steps2：在CustomView.m文件中重写initWithFrame初始化方法。

#import "CustomView.h"@implementation CustomView- (instancetype)initWithFrame:(CGRect)frame {    if (self = [super initWithFrame:frame]) {        // 此处自定义视图...        // 获取self的宽度和高度（在外部调用的时候赋值）        CGFloat width = self.bounds.size.width;        CGFloat height = self.bounds.size.height;        // 添加按钮控件        UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];        button.bounds = CGRectMake(0, 0, width / 3, 30);        button.center = CGPointMake(width / 2, height / 2);        [button setTitle:@"自定义视图中的按钮控件" forState:UIControlStateNormal];        // 添加按钮到自定义视图中，直接用self调用，因为self就是CustomView，就是一个视图。        [self addSubview:button];    }    return self;}@end

视图控制器（UIViewController）

基本介绍

• 视图控制器封装了一个UIView，并且管理某个页面区域的所有视图。

• 视图控制器是模型和视图之间的媒介，模型和视图通过视图控制器来交互

• 多种类的控制器：UIViewController、UINavigationController、 UITabBarController。

• 视图控制器提供了多种的界面响应方法，及界面生命周期方法，如监控界面旋转、界面加载等。

视图控制器生命周期

// 加载视图，只调用一次。- (void)loadView{    [super loadView];    NSLog(@"%@", NSStringFromSelector(_cmd));}// 视图加载完成，一般在这个方法中初始化用户界面，只调用一次。- (void)viewDidLoad {    [super viewDidLoad];    NSLog(@"%@", NSStringFromSelector(_cmd));}// 视图将要显示，视图将要出现的时候调用。- (void)viewWillAppear:(BOOL)animated{    [super viewWillAppear:animated];    NSLog(@"%@", NSStringFromSelector(_cmd));}// 视图已经显示，视图出现的时候调用 。- (void)viewDidAppear:(BOOL)animated{    [super viewDidAppear:animated];    NSLog(@"%@", NSStringFromSelector(_cmd));}// 视图将要消失，视图将要消失的时候调用。- (void)viewWillDisappear:(BOOL)animated{    [super viewWillDisappear:animated];    NSLog(@"%@", NSStringFromSelector(_cmd));}// 视图已经消失，视图消失的时候调用。- (void)viewDidDisappear:(BOOL)animated{    [super viewDidDisappear:animated];    NSLog(@"%@", NSStringFromSelector(_cmd));}

常用属性和方法

• view：视图控制器的根视图

• title：视图控制器的标题

• interfaceOrientation：朝向(只读属性)

• initWithNibName:bundle:：指定初始化方法

界面跳转

界面跳转：界面与界面之间的跳转。

• 模态切换，推送：

- (void)presentViewController:(UIViewController *)viewControllerToPresent animated: (BOOL)flag completion:(void (^)(void))completion;

• 模态切换，返回：

- (void)dismissViewControllerAnimated: (BOOL)flag completion: (void (^)(void))completion;

• 关键属性：

  presentedViewController：获取下一个控制器（推送到的某一个控制器）；

  presentingViewController：获取上一个控制器（推送到某一个控制器的控制器）；

• 只有控制器与控制器之间才能进行模态切换，不能通过一个视图模态切换到一个视图控制器，也不能通过一个视图控制器模态切换到视图。

• 界面跳转动画，设置转场效果，需要设置视图控制器的modalTransitionStyle属性。