iOS开发系列课程(03) --- UIView详解

墨蓝 2021-09-22 04:04 336阅读 0赞

## 深入UIView ##

### MVC架构模式 ###

MVC（Model-View-Controller）是实现数据和显示数据的视图分离的架构模式（有一定规模的应用都应该实现数据和显示的分离）。其中，M代表模型，就是程序中使用的数据和状态，它不理会用户界面或表现方式，只负责数据和状态的存储；V代表视图，是呈现给用户看的东西，当然用户也可以通过视图来表达想要进行的操作；C代表控制器，它负责协调模型和视图，当模型更改时要刷新视图，这通常会包含一些逻辑。

### UIView的常用属性和方法 ###

在第一天的课程中我们已经说过，UIView可以代表屏幕上的一块矩形区域，它负责内容的显示、定位以及响应用户的触摸事件，是用户和应用进行交互的主要方式，我们来看看第一天没有提到的关于UIView的属性和方法。

绘制和更新视图的方法

*  \-drawRect:方法：绘图(可以使用贝塞尔曲线进行绘图)
 *  \-setNeedsDisplay方法：让整个视图重绘
 *  \-setNeedsDisplayInRect:方法：让视图指定的矩形区域重绘

管理手势操作的方法

*  \-addGestureRecognizer:方法：添加手势识别器
 *  \-removeGestureRecognizer:方法：删除手势识别器

使用Block语法设置动画的类方法

*  \+animateWithDuration:animations:类方法：用指定的持续时间完成通过Block指定的动画

为视图添加动画效果的类方法

*  \+beginAnimations:context:类方法：开始一个动画
 *  \+commitAnimations类方法：执行动画
 *  \+setAnimationStartDate:类方法：设置动画开始时间
 *  \+setAnimationDuration:类方法：设置动画持续时间
 *  \+setAnimationDelay:类方法：设置延迟多少时间播放动画
 *  \+setAnimationRepeatCount:类方法：设置动画重复播放次数
 *  \+setAnimationRepeatAutoreverses:类方法：设置是否反向执行动画
 *  \+setAnimationTransition:forView:cache:类方法：设置动画的执行效果以及作用于哪个视图

> 说明：UIView动画只能修改关于坐标系统的属性以及色彩和透明度。

下面的例子演示了一个扯日历的动画效果。

[UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:2];
        [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.superview cache:YES];
        [self removeFromSuperview];
        [UIView commitAnimations];

![这里写图片描述][20150821013027910]

与运动视觉效果相关的方法

*  \-addMotionEffect:方法：添加运动视觉效果
 *  \-removeMotionEffect:方法：删除运动视觉效果

通过标识获得UIView

*  \-viewWithTag:方法：通过指定的标识值获取视图

转换坐标系统的方法

*  \-convertPoint:toView:方法：将当前视图上的坐标转换为指定视图上的坐标，如果第二个参数为nil，则转换成窗口坐标
 *  \-convertPoint:fromView:方法：将指定视图上的坐标转换为当前视图的坐标

视图碰撞检测方法

*  \-hitTest:withEvent:方法：获得一个点所在的视图上，如果当前视图包含这个点则返回点所在的最远子视图，如果当前视图不包括这个点则返回nil
 *  \-pointInside:withEvent:方法：判断一个点有没有在当前视图上

视图相关的回调方法

*  \-didAddSubview:方法：添加子视图的回调方法
 *  \-willRemoveSubview:方法：移除子视图的回调方法
 *  \-willMoveToSuperview:方法：视图将要移到某个父视图的回调方法
 *  \-didMoveToSuperview:方法：视图已经移到某个父视图的回调方法
 *  \-willMoveToWindow:方法：视图将要移到UIWindow对象的回调方法
 *  \-didMoveToWindow:方法：视图已经移到UIWindow对象的回调方法

下面的例子演示了将一个视图伸缩后再旋转的动画效果。

// 横向拉伸1.5倍，纵向拉伸0.5倍
        view.transform = CGAffineTransformMakeScale(1.5, 0.5);
        // 在刚才的变换的基础上再旋转30度
        view.transform = CGAffineTransformRotate(view.transform, M_PI / 6);

![这里写图片描述][20150821130803631]

> **提示：**每一个子视图只能有一个父视图，当我们将一个子视图添加到另一个父视图上面时，它会脱离原来的父视图。另外，我们指定子视图的frame、bounds等属性时，它的值是相当于父视图的相对值，而不是屏幕的绝对值，如果父视图改变了位置，那么这些子视图也会跟着改变。父视图如果设置了隐藏或者透明效果，肯定也会影响到子视图。子视图超出父视图的部分，是不能够接受事件的。

如果需要从父视图中批量删除子视图，可以使用下面的代码：

NSArray *subViews = self.subViews;
    if([subViews count] != 0) {
        [subViews makeObjectPerformSelector:@selector(removeFromSuperview)];
    }

## CALayer ##

### UIView和CALayer的关系 ###

UIView和CALayer是相互依赖的关系，UIView依赖与CALayer提供的内容，CALayer依赖UIView提供的容器来显示绘制的内容。CALayer基于图像管理内容并允许你在这些内容上创建动画。如果没有CALayer，UIView自身也不会存在，UIView是一个特殊的CALayer实现，添加了响应事件的能力。一言以蔽之，UIView来自CALayer，高于CALayer，是CALayer高层实现与封装；UIView的很多特性都源于CALayer对它的支持。

### 通过CALayer改变UIView的形状 ###

*  borderColor属性：边框颜色。
 *  borderWidth属性：边框宽度。
 *  cornerRadius属性：边框转角半径（实现圆角效果）。

### 通过CALayer添加动画效果 ###

*  transforms属性：指定对CALayer中的内容做怎样的变换，支持3D效果和动画。

## UIImageView的使用 ##

UIImageView对象提供了一个基于视图的容器来展示一张或者一系列图像，同时也支持以动画的方式来呈现一组图像（可以指定播放间隔和频率）。简单的说，UIImageView就是UIImage对象的承载者，当需要将UIImage呈现在UIView上时就需要UIImageView。二者的关系就像UILabel和NSString之间的关系。

### UIImageView的创建和使用 ###

*  \-initWithImage:方法：这种方式适合创建小图片，尤其是素材类图片。

### UIImageView的常用属性和方法 ###

*  contentMode属性：图片的填充模式。（继承自UIView）
 *  clipsToBounds属性：修剪超出边界的部分。（继承自UIView）
 *  animationImages属性：装在用于动画的图像的数组。
 *  animationDuration属性：动画播放的持续时间。
 *  animationRepeatCount属性：动画的重复次数，0表示循环播放。
 *  \-startAnimating方法：开始播放动画。
 *  \-stopAnimating方法：停止播放动画。
 *  \-isAnimating方法：返回BOOL值表示动画是否正在播放中。

下面用UIImageView来实现一个动画，完成后的效果如下图所示。

![这里写图片描述][20150821131103323]

![这里写图片描述][20150821131114288]

#import "ViewController.h"
    
    @interface ViewController () { 
        NSTimer *timer;
    }
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // 用一个数组来装构成动画的所有图片
        NSMutableArray *imageArray = [NSMutableArray array];
        for (int i = 0; i < 6; i++) {
            [imageArray addObject:[UIImage imageNamed:[NSString stringWithFormat:@"runner%d.jpg", i]]];
        }
        // 创建UIImageView对象并指定相关的动画图片
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 150, 75, 100)];
        imageView.animationImages = [imageArray copy];
        // 设置图片切换的时间间隔
        imageView.animationDuration = 0.5;
        imageView.tag = 101;
        // imageView.animationRepeatCount = 10;
        // 开始动画
        [imageView startAnimating];
    
        [self.view addSubview:imageView];
        // 启动一个计时器让UIImageView向右移动
        timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(runAhead) userInfo:nil repeats:YES];
    }
    
    // 修改UIImageView的x坐标使其向右移动并在到达边界时返回
    - (void) runAhead {
        UIImageView *currentView = (id)[self.view viewWithTag:101];
        CGRect rect = currentView.frame;
        rect.origin.x += 1;
        if(rect.origin.x > self.view.bounds.size.width) {
            rect.origin.x = -75;
        }
        currentView.frame = rect;
    }
    
    @end

[20150821013027910]: /images/20210920/27d3a7afd5e14732abdc9443dfcbd94d.png
[20150821130803631]: /images/20210920/6685d6aa93634a768f2badacb4fd5cfb.png
[20150821131103323]: /images/20210920/a33e1254fa684737b18df89b6e8d71db.png
[20150821131114288]: /images/20210920/5fddf93d818f401fb5498bd6716b7ece.png