当前位置：首页 > news >正文

UIStackView入门使用两个问题

news 2025/7/21 10:58:43

项目中横向一排元素，竖向一排元素，可以使用UIStackView。UIStackView的原理不做介绍，这里主要讲两个初次使用容易出现的两个问题。

首先创建一个stackview

-(UIStackView*)titleStackView{if(_titleStackView == nil){_titleStackView = [UIStackView new];_titleStackView.spacing = 5;_titleStackView.axis = UILayoutConstraintAxisHorizontal;_titleStackView.alignment = UIStackViewAlignmentCenter;_titleStackView.distribution = UIStackViewDistributionFill;}return _titleStackView;
}

向stackview中添加view

[self.titleStackView addArrangedSubview:self.starIcon];
[self.titleStackView addArrangedSubview:self.vipImageView];
[self.titleStackView addArrangedSubview:self.circleMasterTag];
[self.titleStackView addArrangedSubview:self.circleManagerTag];

默认情况下，stackview中的元素是填满整个stackview的（fill），属性是distribution。其他的axis，alignment比较好理解。

第一个要点：stackview中的view需要使用masonry，不能使用frame

从结果上看，如果使用frame，stackview会依赖元素自身大小布局，比如皇冠的icon frame是20*14.5。但是皇冠图片是99pt，所以按照99pt去布局。比如：“圈主”，“管理员”两个带颜色的label，它们在初始化的时候，手动写的width。stack仍使用文本自身宽度布局。

比如starIcon的创建，需要写masonry，以及抗压缩和抗拉伸属性。

- (UIButton *)starIcon {if (!_starIcon) {_starIcon = [UIButton buttonWithType:UIButtonTypeCustom];_starIcon.clipsToBounds = YES;_starIcon.layer.cornerRadius = 3.f;[SVUserIdentityUtil starIdentityIconWithComplete:^(UIImage * _Nonnull image) {[_starIcon setBackgroundImage:image forState:UIControlStateNormal];}];[_starIcon setTitle:@"明星" forState:UIControlStateNormal];_starIcon.titleLabel.font = UIFontMedium_9;[_starIcon setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[_starIcon setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];[_starIcon setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];[_starIcon mas_makeConstraints:^(MASConstraintMaker *make) {make.width.mas_equalTo(25);make.height.mas_equalTo(13);}];}return _starIcon;
}