正确对齐的iOS Header StackView？

Question

我正在尝试实现 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?

}

Answer 1

这是创建自定义 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

结果: