使用自动布局将自定义 UIView 绘制为背景并将其居中

Posted 2023-03-13

【中文标题】使用自动布局将自定义 UIView 绘制为背景并将其居中

【英文标题】：Draw and Center a Custom UIView as Background Using Auto Layout

【发布时间】：2013-01-19 19:51:54

【问题描述】：

我有一个 BoardViewController (UIViewController)，需要在其背景中绘制居中坐标线。对于这些坐标线，我创建了一个自定义 UIView 类 CoordinateView，它被添加为子视图。即使更改设备方向，坐标视图也应居中并填充整个屏幕。

为此，我想使用在代码中实现的自动布局。这是我当前的设置：

在CoordinatesView (UIView) 类中自定义绘制方法 用于坐标线

- (void)drawRect:(CGRect)rect 
    [super drawRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextSetLineWidth(context, 1.0);

    CGContextMoveToPoint(context, self.bounds.size.width/2,0);
    CGContextAddLineToPoint(context, self.bounds.size.width/2,self.bounds.size.height); 
    CGContextStrokePath(context);
    CGContextMoveToPoint(context, 0,self.bounds.size.height/2);
    CGContextAddLineToPoint(context, self.bounds.size.width,self.bounds.size.height/2); 

    CGContextStrokePath(context);

初始化 BoardViewController

中的这个

coordinatesView

对象

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil 
...
        coordinatesView = [[CoordinatesView alloc]initWithFrame:self.view.frame];
        [coordinatesView setBackgroundColor:[UIColor redColor]];
        [coordinatesView clipsToBounds];
        [coordinatesView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self.view addSubview:coordinatesView];
        [self.view sendSubviewToBack:coordinatesView];
...

在 BoardViewController 的 viewWillAppear 函数中为坐标视图添加 自动布局 魔法

-(void)viewWillAppear:(BOOL)animated
...
NSLayoutConstraint *constraintCoordinatesCenterX =[NSLayoutConstraint
                                              constraintWithItem:self.view
                                              attribute:NSLayoutAttributeCenterX
                                              relatedBy:NSLayoutRelationEqual
                                              toItem:coordinatesView
                                              attribute:NSLayoutAttributeCenterX
                                              multiplier:1.0
                                              constant:1];

NSLayoutConstraint *constraintCoordinatesCenterY =[NSLayoutConstraint
                                                   constraintWithItem:self.view
                                                   attribute:NSLayoutAttributeCenterY
                                                   relatedBy:NSLayoutRelationEqual
                                                   toItem:coordinatesView
                                                   attribute:NSLayoutAttributeCenterY
                                                   multiplier:1.0
                                                   constant:1];

[self.view addConstraint: constraintCoordinatesCenterX];
[self.view addConstraint: constraintCoordinatesCenterY];
...

注意：这种方法适用于我使用 UIImageView 图像作为坐标，但不适用于自定义 UIView 坐标视图。

如何让它再次工作？一旦我应用自动布局/NSLayoutConstraint，我的坐标视图 UIView 似乎消失了

这实际上是向 UIViewController 添加背景绘图的好方法还是直接绘制到 UIViewController 中更好。 （如果是这样，那会是什么样子？）

感谢您对此提供的帮助。

【参考方案1】：

您的视图消失了，因为您没有设置大小约束——您通常需要 4 个约束来完全表达视图的位置和大小。某些视图（例如按钮）具有固有的内容大小，因此您无需显式设置大小。图像视图也是如此，它们从显示的图像中获取大小。

因此，在您的情况下，您可以将宽度和高度设置为等于父视图的宽度和高度。这是我经常做的事情，所以我在 UIView 上创建了一个包含各种约束方法的类别，所以我不必一遍又一遍地写这个。我有一种方法 constrainViewEqual: 可以做你想做的事：

#import "UIView+RDConstraintsAdditions.h"

@implementation UIView (RDConstraintsAdditions)

-(void)constrainViewEqual:(UIView *) view 
    [view setTranslatesAutoresizingMaskIntoConstraints:NO];
    NSLayoutConstraint *con1 = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeCenterX relatedBy:0 toItem:view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
    NSLayoutConstraint *con2 = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeCenterY relatedBy:0 toItem:view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
    NSLayoutConstraint *con3 = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeWidth relatedBy:0 toItem:view attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
    NSLayoutConstraint *con4 = [NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeHeight relatedBy:0 toItem:view attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    NSArray *constraints = @[con1,con2,con3,con4];
    [self addConstraints:constraints];

然后，在你的主代码中，你可以这样调用它：

[self.view constrainViewsEqual:coordinatesView];

【讨论】：

只是要注意“一般需要4个约束”可能会误导人们认为约束的数量很重要。它不是。约束需要足够并产生一个精确的布局。