使用自动布局的 IB_DESIGNABLE 自定义视图的错位视图警告和奇怪行为
Misplaced view warning and odd behavior with IB_DESIGNABLE custom view using auto layout
我创建了一个自定义 IB-designable 视图(参见下面的代码),它在 IB 中正确呈现并且在 运行 时也能正常工作。但是,在收到有关视图放错位置的警告时,我无法在 Interface Builder 中手动调整视图大小(触摸调整大小手柄时,视图将在其容器中跳来跳去)。
对于各种不同的布局,我得到了相同或相似的行为。如果我在这里做错了什么,或者这只是 IB 中的一个错误,你知道吗?
(PS: 我不能忽略警告)
编辑:添加了约束截图:
这是代码 (header):
IB_DESIGNABLE
@interface AKATestView : UIView
@end
实施:
@interface AKATestView()
@property(nonatomic)BOOL subviewsCreated;
@property(nonatomic)BOOL subviewConstraintsCreated;
@property(nonatomic)NSDictionary* views;
@end
@implementation AKATestView
- (id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if (self) {
[self setupAfterInit];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setupAfterInit];
}
return self;
}
- (void)setupAfterInit
{
[self createSubviews];
}
- (void)createSubviews
{
if (!self.subviewsCreated)
{
self.translatesAutoresizingMaskIntoConstraints = NO;
UILabel* labelView = [[UILabel alloc] initWithFrame:CGRectZero];
labelView.text = @"Name";
labelView.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:labelView];
UITextField* textField = [[UITextField alloc] initWithFrame:CGRectZero];
textField.borderStyle = UITextBorderStyleRoundedRect;
textField.placeholder = @"Enter some text";
textField.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:textField];
UILabel* errorMessageLabel = [[UILabel alloc] initWithFrame:CGRectZero];
errorMessageLabel.text = @"Error message";
errorMessageLabel.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:errorMessageLabel];
self.views = @{ @"label": labelView, @"editor": textField, @"errorMessageLabel": errorMessageLabel };
self.subviewsCreated = YES;
[self setNeedsUpdateConstraints];
}
}
- (void)updateConstraints
{
if (!self.subviewConstraintsCreated)
{
NSDictionary* metrics =
@{ @"pt": @(4), @"pr": @(4), @"pb": @(4), @"pl": @(4),
@"labelWidth": @(100),
@"errorPl": @(4 + 100 + 4),
@"hsLabelEditor": @(4), @"vsEditorError": @(2)
};
NSArray* specs =
@[ @{ @"format": @"H:|-(pl)-[label(labelWidth)]-(hsLabelEditor)-[editor]-(pr)-|",
@"options": @(NSLayoutFormatAlignAllFirstBaseline) },
@{ @"format": @"V:|-(pt)-[editor]-(vsEditorError)-[errorMessageLabel]-(pb)-|",
@"options": @(NSLayoutFormatAlignAllLeading|NSLayoutFormatAlignAllTrailing) }
];
for (NSDictionary* spec in specs)
{
NSString* format = spec[@"format"];
NSUInteger options = ((NSNumber*)spec[@"options"]).unsignedIntegerValue;
NSArray* constraints = [NSLayoutConstraint constraintsWithVisualFormat:format
options:options
metrics:metrics
views:self.views];
[self addConstraints:constraints];
}
self.subviewConstraintsCreated = YES;
}
[super updateConstraints];
}
@end
尝试删除 createSubviews
方法中的 self.translatesAutoresizingMaskIntoConstraints = NO;
。 IB 似乎是依靠这个翻译来对设计师进行正确的测量。我有完全相同的问题,这解决了它。
我还有 translatesAutosizingMaskIntoConstraints
到 NO
的子视图。我确认即使将此设置为 YES
,也不会生成任何额外的约束。希望你也是如此!
我创建了一个自定义 IB-designable 视图(参见下面的代码),它在 IB 中正确呈现并且在 运行 时也能正常工作。但是,在收到有关视图放错位置的警告时,我无法在 Interface Builder 中手动调整视图大小(触摸调整大小手柄时,视图将在其容器中跳来跳去)。
对于各种不同的布局,我得到了相同或相似的行为。如果我在这里做错了什么,或者这只是 IB 中的一个错误,你知道吗?
(PS: 我不能忽略警告)
编辑:添加了约束截图:
这是代码 (header):
IB_DESIGNABLE
@interface AKATestView : UIView
@end
实施:
@interface AKATestView()
@property(nonatomic)BOOL subviewsCreated;
@property(nonatomic)BOOL subviewConstraintsCreated;
@property(nonatomic)NSDictionary* views;
@end
@implementation AKATestView
- (id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if (self) {
[self setupAfterInit];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setupAfterInit];
}
return self;
}
- (void)setupAfterInit
{
[self createSubviews];
}
- (void)createSubviews
{
if (!self.subviewsCreated)
{
self.translatesAutoresizingMaskIntoConstraints = NO;
UILabel* labelView = [[UILabel alloc] initWithFrame:CGRectZero];
labelView.text = @"Name";
labelView.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:labelView];
UITextField* textField = [[UITextField alloc] initWithFrame:CGRectZero];
textField.borderStyle = UITextBorderStyleRoundedRect;
textField.placeholder = @"Enter some text";
textField.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:textField];
UILabel* errorMessageLabel = [[UILabel alloc] initWithFrame:CGRectZero];
errorMessageLabel.text = @"Error message";
errorMessageLabel.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:errorMessageLabel];
self.views = @{ @"label": labelView, @"editor": textField, @"errorMessageLabel": errorMessageLabel };
self.subviewsCreated = YES;
[self setNeedsUpdateConstraints];
}
}
- (void)updateConstraints
{
if (!self.subviewConstraintsCreated)
{
NSDictionary* metrics =
@{ @"pt": @(4), @"pr": @(4), @"pb": @(4), @"pl": @(4),
@"labelWidth": @(100),
@"errorPl": @(4 + 100 + 4),
@"hsLabelEditor": @(4), @"vsEditorError": @(2)
};
NSArray* specs =
@[ @{ @"format": @"H:|-(pl)-[label(labelWidth)]-(hsLabelEditor)-[editor]-(pr)-|",
@"options": @(NSLayoutFormatAlignAllFirstBaseline) },
@{ @"format": @"V:|-(pt)-[editor]-(vsEditorError)-[errorMessageLabel]-(pb)-|",
@"options": @(NSLayoutFormatAlignAllLeading|NSLayoutFormatAlignAllTrailing) }
];
for (NSDictionary* spec in specs)
{
NSString* format = spec[@"format"];
NSUInteger options = ((NSNumber*)spec[@"options"]).unsignedIntegerValue;
NSArray* constraints = [NSLayoutConstraint constraintsWithVisualFormat:format
options:options
metrics:metrics
views:self.views];
[self addConstraints:constraints];
}
self.subviewConstraintsCreated = YES;
}
[super updateConstraints];
}
@end
尝试删除 createSubviews
方法中的 self.translatesAutoresizingMaskIntoConstraints = NO;
。 IB 似乎是依靠这个翻译来对设计师进行正确的测量。我有完全相同的问题,这解决了它。
我还有 translatesAutosizingMaskIntoConstraints
到 NO
的子视图。我确认即使将此设置为 YES
,也不会生成任何额外的约束。希望你也是如此!