• UIStackView入门使用两个问题


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

    首先创建一个stackview

    1. -(UIStackView*)titleStackView{
    2. if(_titleStackView == nil){
    3. _titleStackView = [UIStackView new];
    4. _titleStackView.spacing = 5;
    5. _titleStackView.axis = UILayoutConstraintAxisHorizontal;
    6. _titleStackView.alignment = UIStackViewAlignmentCenter;
    7. _titleStackView.distribution = UIStackViewDistributionFill;
    8. }
    9. return _titleStackView;
    10. }

     向stackview中添加view

    1. [self.titleStackView addArrangedSubview:self.starIcon];
    2. [self.titleStackView addArrangedSubview:self.vipImageView];
    3. [self.titleStackView addArrangedSubview:self.circleMasterTag];
    4. [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,以及抗压缩和抗拉伸属性。

    1. - (UIButton *)starIcon {
    2. if (!_starIcon) {
    3. _starIcon = [UIButton buttonWithType:UIButtonTypeCustom];
    4. _starIcon.clipsToBounds = YES;
    5. _starIcon.layer.cornerRadius = 3.f;
    6. [SVUserIdentityUtil starIdentityIconWithComplete:^(UIImage * _Nonnull image) {
    7. [_starIcon setBackgroundImage:image forState:UIControlStateNormal];
    8. }];
    9. [_starIcon setTitle:@"明星" forState:UIControlStateNormal];
    10. _starIcon.titleLabel.font = UIFontMedium_9;
    11. [_starIcon setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    12. [_starIcon setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    13. [_starIcon setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    14. [_starIcon mas_makeConstraints:^(MASConstraintMaker *make) {
    15. make.width.mas_equalTo(25);
    16. make.height.mas_equalTo(13);
    17. }];
    18. }
    19. return _starIcon;
    20. }

    第二个要点:使用spacer

    如果你想在宽度足够的情况洗,左对齐。右边部分,可以使用spacer(自定义一个UIView,抗拉伸和抗压缩都设置low优先级)

    如图所示:使用spacer和未使用space的效果:

     

    右侧的spacer的抗压缩和抗拉伸都是最低,所以会优先拉伸spacer

    最后:如果将stackview中的某个view隐藏(setHidden=yes),那么后面的view会自动往前移动。

  • 相关阅读:
    一些基础提(选择题)
    Vue_双向数据绑定失效踩坑-使用$set
    数字孪生技术在光网络中的应用与问题
    食品赛道崛起,舌尖美食走俏礼品市场
    Nginx小总结
    Rainbond结合NeuVector实践容器安全管理
    k8s--基础--22.2--storageclass--类型--AWS EBS
    公司真实Java面试题泄露
    《上海市交通领域科技创新发展行动计划》发布
    验证码功能 设计
  • 原文地址:https://blog.csdn.net/hherima/article/details/132795600