我正在尝试实现 UIView
这将是一个标题。 备注 我只专注于在这个问题中实现标题(如下所示)。
这是它的外观(标题为黄色)
基本上,标题 UIView
应该有 UIBUTTON
一直到左边和一个UILabel
正好在中间,右边什么都没有
我遇到的问题是如何制作 UIView
为了这。
我的想法是有一个主要的水平 UIStackView
,但如果我把 UILabel
和 UIButton
进入它,我如何(在代码中)按照我描述的方式对齐它?我无法为此使用 UI Builder,但必须在 Objective C 代码中进行布局。@interface HeaderView : UIView
@implementation HeaderView {
UIStackView mainHorizontalStackView;
UIButton leftButton;
UILabel middleLabel;
}
-(instanceType) initializer(){
mainHorizontalStackView = ... //alloc
leftButton = ...
middleLabel = ...
// how do I set up the constraints to make it fit the desired setup?
}
最佳答案
这是创建自定义 View 的一个非常基本的示例:
HeaderView.h
//
// HeaderView.h
// Created by Don Mag on 4/7/20.
//
#import <UIKit/UIKit.h>
@interface HeaderView : UIView
@end
HeadView.m
//
// HeaderView.m
// Created by Don Mag on 4/7/20.
//
#import "HeaderView.h"
@interface HeaderView ()
@property (strong, nonatomic) UIButton *leftButton;
@property (strong, nonatomic) UILabel *centeredLabel;
@end
@implementation HeaderView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// default background color
self.backgroundColor = [UIColor colorWithRed:1.0 green:0.95 blue:0.8 alpha:1.0];
self.layer.borderColor = [UIColor brownColor].CGColor;
self.layer.borderWidth = 1.0;
self.layer.cornerRadius = 8.0;
_leftButton = [UIButton new];
[_leftButton setTitle:@"BUTTON" forState:UIControlStateNormal];
[_leftButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
_leftButton.translatesAutoresizingMaskIntoConstraints = NO;
_centeredLabel = [UILabel new];
_centeredLabel.text = @"LABEL";
_centeredLabel.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:_leftButton];
[self addSubview:_centeredLabel];
// adjust constant values if "padding" from edges desired
[NSLayoutConstraint activateConstraints:@[
// constrain button to left, top, bottom
[_leftButton.leadingAnchor constraintEqualToAnchor:self.leadingAnchor constant:4.0],
[_leftButton.topAnchor constraintEqualToAnchor:self.topAnchor constant:8.0],
[_leftButton.bottomAnchor constraintEqualToAnchor:self.bottomAnchor constant:-8.0],
// constrain label centered horizontally in view, centered vertically to button
[_centeredLabel.centerXAnchor constraintEqualToAnchor:self.centerXAnchor],
[_centeredLabel.centerYAnchor constraintEqualToAnchor:_leftButton.centerYAnchor],
]];
}
return self;
}
@end
TestViewController.h
//
// TestViewController.h
// Created by Don Mag on 4/7/20.
//
#import <UIKit/UIKit.h>
@interface TestViewController : UIViewController
@end
TestViewController.m
//
// TestViewController.m
// Created by Don Mag on 4/7/20.
//
#import "TestViewController.h"
#import "HeaderView.h"
@interface TestViewController ()
@end
@implementation FirstViewController
- (void)viewDidLoad {
[super viewDidLoad];
HeaderView *v = [HeaderView new];
v.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:v];
// respect safe area
UILayoutGuide *g = self.view.safeAreaLayoutGuide;
[NSLayoutConstraint activateConstraints:@[
// constrain header view top / leading / trailing to self.view (safe area)
// adjust constant values if "padding" from edges desired
[v.topAnchor constraintEqualToAnchor:g.topAnchor constant:0.0],
[v.leadingAnchor constraintEqualToAnchor:g.leadingAnchor constant:8.0],
[v.trailingAnchor constraintEqualToAnchor:g.trailingAnchor constant:-8.0],
]];
}
@end
结果:
关于正确对齐的iOS Header StackView?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61077691/