使用自动布局垂直和水平居中自定义UIView [英] Center custom UIView vertically and horizontally using Auto Layout
问题描述
我想使用自动布局API新建可用的iOS 6构建一个相当简单的动画自定义UI。我正在建立的自定义视图有一个圆，我想要垂直和水平居中。
不幸的是我不知道为什么我的约束似乎工作正常UIButton和UILabel元素，但产生奇怪的结果，当我使用自定义视图和自定义CALayer（在这种情况下，圈子，最终将动画）。要清楚，我不想让我的视图展开来填充整个屏幕，而是有动态的padding所以视图是垂直居中的iPhone 4和5.我还应该注意，我是非常新的Cocoa和UIKit。
RootViewController.m： / p>
...
- （void）viewDidLoad {
[super viewDidLoad];
//创建圆视图
CGRect circle_view_rect = CGRectMake（0，0，100，100）;
UIView * circle_view = [[UIView alloc] initWithFrame：circle_view_rect];
//创建圆层
CircleLayer * circle_layer = [[CircleLayer alloc] init];
circle_layer.needsDisplayOnBoundsChange = YES;
circle_layer.frame = circle_view.bounds;
[circle_view.layer addSublayer：circle_layer];
//启用自动布局
[circle_view setTranslatesAutoresizingMaskIntoConstraints：NO];
[self.view addSubview：circle_view];
//中心垂直
NSLayoutConstraint * centerYConstraint =
[NSLayoutConstraint constraintWithItem：circle_view
attribute：NSLayoutAttributeCenterY
relatedBy：NSLayoutRelationEqual
toItem：self .view
attribute：NSLayoutAttributeCenterY
multiplier：1.0
constant：0.0];
[self.view addConstraint：centerYConstraint];
//水平中心
NSLayoutConstraint * centerXConstraint =
[NSLayoutConstraint constraintWithItem：circle_view
attribute：NSLayoutAttributeCenterX
relatedBy：NSLayoutRelationEqual
toItem：self .view
attribute：NSLayoutAttributeCenterX
multiplier：1.0
constant：0.0];
[self.view addConstraint：centerXConstraint];
}
...
CircleLayer.m：
...
- （void）drawInContext：（CGContextRef）context {
CGContextAddArc（context，50，50，50 ，0.0，2 * M_PI，0）;
CGContextSetFillColorWithColor（context，[UIColor yellowColor] .CGColor）;
CGContextFillPath（context）;
}
...
基本上，我实现的约束是：
- 在父视图内垂直居中
- b
这是我得到的结果：
任何帮助将非常感谢，我一直在思考这一个
感谢
高度和宽度约束到您的circle_view。我甚至不能只是一个痛苦的广场视图出现在所有没有添加那些（使用你的代码，减去层的东西）。
NSLayoutConstraint * heightConstraint =
[NSLayoutConstraint constraintWithItem：circle_view
attribute：NSLayoutAttributeHeight
relatedBy：NSLayoutRelationEqual
toItem：nil
属性：NSLayoutAttributeNotAnAttribute
乘数： 1.0
常数：100.0];
[circle_view addConstraint：heightConstraint];
NSLayoutConstraint * widthConstraint =
[NSLayoutConstraint constraintWithItem：circle_view
attribute：NSLayoutAttributeWidth
relatedBy：NSLayoutRelationEqual
toItem：nil
attribute：NSLayoutAttributeNotAnAttribute
multiplier：1.0
constant：100.0];
[circle_view addConstraint：widthConstraint];
I'm trying to build a rather simple animated custom UI using the Auto Layout API newly available iOS 6. The custom view I'm building has a circle that I want to be both vertically and horizontally centered.
Unfortunately I can't figure out why my constraints appear to work fine for UIButton, and UILabel elements but yield weird results when I use a custom view with and custom CALayer (in this case a circle, that will eventually be animated).
To be clear I don't want my view to expand to fill the whole screen, but rather to have dynamic "padding" so that the view is vertically centered both on the iPhone 4 and 5. I should also note that I'm very new to Cocoa and UIKit.
RootViewController.m:
...
- (void)viewDidLoad {
[super viewDidLoad];
// Create Circle View
CGRect circle_view_rect = CGRectMake(0, 0, 100, 100);
UIView *circle_view = [[UIView alloc] initWithFrame:circle_view_rect];
// Create Circle Layer
CircleLayer *circle_layer = [[CircleLayer alloc] init];
circle_layer.needsDisplayOnBoundsChange = YES;
circle_layer.frame = circle_view.bounds;
[circle_view.layer addSublayer:circle_layer];
// Enable Auto Layout
[circle_view setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:circle_view];
// Center Vertically
NSLayoutConstraint *centerYConstraint =
[NSLayoutConstraint constraintWithItem:circle_view
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0];
[self.view addConstraint:centerYConstraint];
// Center Horizontally
NSLayoutConstraint *centerXConstraint =
[NSLayoutConstraint constraintWithItem:circle_view
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0];
[self.view addConstraint:centerXConstraint];
}
...
CircleLayer.m:
...
- (void)drawInContext:(CGContextRef)context {
CGContextAddArc(context, 50, 50, 50, 0.0, 2*M_PI, 0);
CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
CGContextFillPath(context);
}
...
Basically the constraints I've implemented are:
- center vertically inside parent view
- center horizontally inside parent view
And this is the result I get:
Any help would be greatly appreciated, I've been pondering this one for a few days now.
Thanks
Try adding a height and width constraint to your circle_view. I couldn't even get just a pain square view to appear at all without adding those (using your code, minus the layer stuff).
NSLayoutConstraint *heightConstraint =
[NSLayoutConstraint constraintWithItem:circle_view
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100.0];
[circle_view addConstraint:heightConstraint];
NSLayoutConstraint *widthConstraint =
[NSLayoutConstraint constraintWithItem:circle_view
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1.0
constant:100.0];
[circle_view addConstraint:widthConstraint];
这篇关于使用自动布局垂直和水平居中自定义UIView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
