[IOS]今天开始学UI---UIIView的transform和contentMode属性

关注

原创最新推荐文章于 2026-07-07 11:27:45 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

UIViewContentMode详解 UIView有个UIViewContentMode类型的属性contentMode，可以通过它来修改视图的内容显示模式。 typedef NS_ENUM(NSInteger, UIViewContentMode) { UIViewContentModeScaleToFill, UIViewContentModeScaleAspectFit, // contents 阅读详情

要想深入的了解UIView的transform属性

就必须要知道该属性的类型

点开头文件我们可以看到

struct CGAffineTransform {
  CGFloat a, b, c, d;
  CGFloat tx, ty;
}

该属性类型为结构体

里面共封装了六个参数，我们将依次讲解该六个属性,这六个属性其实可以分为3对属性(a,d) (b,c) (tx,ty)

ad缩放bc旋转tx,ty位移

我们可以对2d图片进行缩放，旋转，平移通过该六个参数进行设置

假设坐标系内一点(x,y)经过如下图的变换之后得到新的(X,Y)

公式

X=ax+cy+tx
Y=bx+dy+ty

也许你看不懂上面的公式但是我会接下去慢慢讲解

1.当a = m ,d = n, b = c = 0, tx = ty =0;的时候 (m,n)代表任意常数

我们得到新的(X,Y)是什么 (ax,dy) 那这代表什么？对就是缩放 x 缩放成原来的a倍 y缩放成原来的d倍

CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)计算原理

2.当a=cosɵ，b=sinɵ，c=-sinɵ，d=cosɵ，tx=ty=0;的时候e 代表角度

X= x cos e - y sin e

Y= x sin e + y cos e

那么这个新坐标代表了什么呢？代表了点(x,y)经过依照原点(0,0)进行旋转 e 角度后变换后的新 (X,Y)

CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)计算原理

推导

旋转变换一般是按照某个圆心点，以一定半径 r 旋转一定的角度α，为了简单起见我们给出下面的情景

假定点A(x,y)想经过旋转变换到达B(x',y')，已知旋转角度α和点A坐标，计算出点B

要计算点B则分别计算他的x'和y'分量

3.当a = d = 1, b = c = 0.tx = m, ty = n;的时候

X= x + m

Y = y + n

这代表什么？简单的说就是x平移了 m,y平移了 n

CGAffineTransform CGAffineMakeTranslation(CGFloat tx,CGFloat ty)计算原理

如果要综合起来进行变换(缩放，旋转，平移)我们也就得到了

CGAffineTransform CGAffineTransformMake (CGFloat a,CGFloat b,CGFloat c,CGFloat d,CGFloat tx,CGFloat ty);

讲的再多不如做的我们动手实验一下

实验1:缩放

新建了两个不同背景色的UIView 镜像开局唯一不同的就是其中一个x 缩放了 1.5倍 y缩放了1.5倍缩放是以自身view的中心center缩放的

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];

    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];


    view1.backgroundColor = [UIColor redColor];
    view2.backgroundColor = [UIColor greenColor];

    view1.alpha = 0.5;
    view2.alpha = 0.5;

    view1.transform = CGAffineTransformMakeScale(1.5, 1.5);


    [self.view addSubview:view1];
    [self.view addSubview:view2];


}

最后得到的结果

实验2:旋转默认是顺时针旋转

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];

    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];


    view1.backgroundColor = [UIColor redColor];
    view2.backgroundColor = [UIColor greenColor];

    view1.alpha = 0.8;
    view2.alpha = 0.8;

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
    label.center = CGPointMake(100, 100);
    [label setText:@"Hello World"];
    [label setTextAlignment:NSTextAlignmentCenter];
    [view1 addSubview:label];
    view1.transform = CGAffineTransformMakeRotation(M_PI_4);

    [self.view addSubview:view2];
    [self.view addSubview:view1];




}

最后得到的结果

同样镜像开局加入UILabel只是为了看清楚旋转方向

看起来是非常的成功

实验3:平移

x+100,y+100

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];

    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];


    view1.backgroundColor = [UIColor redColor];
    view2.backgroundColor = [UIColor greenColor];

    view1.alpha = 0.8;
    view2.alpha = 0.8;

    view1.transform = CGAffineTransformMakeTranslation(100, 100);

    [self.view addSubview:view2];
    [self.view addSubview:view1];




}

结果上来看还是非常成功的

需要特别注意的是以上三种方法都是以起始的center作为参考的

什么意思呢？就是说哪怕以后再进行重复的变换并不会改变

view1.transform = CGAffineTransformMakeRotation(M_PI_4)；

我们都知道这是对当前的UIView顺时针旋转M_PI/4的角度

假如连续执行两遍并不会转M_PI_2的角度

很多时候我们进行连续变换的时候都需要根据上次的进行变换而不是以起始点作为参照

这不用担心本身提供的API提供给我们直接的方法进行调用

CGAffineTransform CGAffineTransformScale(CGAffineTransform t, CGFloat sx,CGFloat sy)

CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)

CGAffineTransform CGAffineTransformTranslate(CGAffineTransform t,CGFloat tx,CGFloat ty)

这个方法去掉了Make字母同时添加了一个新的参数CGAffineTransform t

该参数代表了上次进行转换的状态

如果要连续进行三次旋转M_PI/4角度很简单

咱们直接上代码不废话

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];

    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];


    view1.backgroundColor = [UIColor redColor];
    view2.backgroundColor = [UIColor greenColor];

    view1.alpha = 0.8;
    view2.alpha = 0.8;

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
    label.center = CGPointMake(100, 100);
    [label setText:@"Hello World"];
    [label setTextAlignment:NSTextAlignmentCenter];
    [view1 addSubview:label];
    view1.transform = CGAffineTransformMakeRotation(M_PI_4);
    view1.transform = CGAffineTransformRotate(view1.transform, M_PI_4);
    view1.transform = CGAffineTransformRotate(view1.transform, M_PI_4);


    [self.view addSubview:view2];
    [self.view addSubview:view1];

结果确实旋转了M_PI/4*3的角度

是不是觉得很有意思呢？

接下来我们来点轻松的UIView的contentMode属性

同样头文件是我们最好的导师

我们去扒扒看

typedef NS_ENUM(NSInteger, UIViewContentMode) {
    UIViewContentModeScaleToFill,
    UIViewContentModeScaleAspectFit,      // contents scaled to fit with fixed aspect. remainder is transparent
    UIViewContentModeScaleAspectFill,     // contents scaled to fill with fixed aspect. some portion of content may be clipped.
    UIViewContentModeRedraw,              // redraw on bounds change (calls -setNeedsDisplay)
    UIViewContentModeCenter,              // contents remain same size. positioned adjusted.
    UIViewContentModeTop,
    UIViewContentModeBottom,
    UIViewContentModeLeft,
    UIViewContentModeRight,
    UIViewContentModeTopLeft,
    UIViewContentModeTopRight,
    UIViewContentModeBottomLeft,
    UIViewContentModeBottomRight,
};

看来头文件描述不全面啊？所以我们还是去看官方文档里面到底怎么描述这些枚举量的

1.UIViewContentModeScaleToFill:将内容按照本View的长宽比进行缩放

比如一张图片 200x200 我们要放进100x150的UIImageView里面去

嗯 200x0.5＝ 100 200x0.75=150

所以我们看到的图片是这样的