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

时间：2021-10-09 20:40:28

视图（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属性。

标签：

相关文章