iOS Заголовок StackView с правильным выравниванием?

Question

Я пытаюсь реализовать UIView, который будет заголовком. Примечание Я сосредоточен только на реализации заголовка (как показано ниже) в этом вопросе.

Вот как это должно выглядеть (заголовок выделен желтым цветом)

По сути, заголовок UIView должен иметь UIBUTTON полностью влево и UILabel точно в середине, ничего на right

Проблема, с которой я столкнулся, заключается в том, как я сделаю 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

Это очень простой c пример создания пользовательского представления:

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

Результат: