美文网首页iOS常用
UIStackView 简单使用及炫酷效果

UIStackView 简单使用及炫酷效果

作者: coco_CC | 来源:发表于2021-05-08 11:23 被阅读0次

    UIStackView的简单使用以及属性含义
    StackView的强大,
    例如:
    1、页面有两个区域【A和B】
    2、B区域永远距上(A区域)20像素
    3、同时A区域支持展开和隐藏
    4、每次A区域的高度修改时,同时手动去修改B区域(麻烦)
    5、通过StackView可以让你不改B区域的Y坐标的情况下,实现让B区域跟着上移下移
    那么StackView简直是为它量身制作的,因简书不支持放GIF,只能贴两张图了,请看实现效果,如果这正是你所想要的,辛苦的动一下你的金手指关注点赞

    一、贴图效果

    竖向布局-两种样式

    二、实现代码

    //
    //  ViewController.h
    //  CCUIStackView
    //
    //  Created by Zc on 2021/5/8.
    //
    
    #import <UIKit/UIKit.h>
    
    @interface ViewController : UIViewController
    
    
    @end
    
    //
    //  ViewController.m
    //  CCUIStackView
    //
    //  Created by Zc on 2021/5/8.
    //
    
    #import "ViewController.h"
    #import <Masonry/Masonry.h>
    
    #define CC_View_Tag 100
    
    //屏幕尺寸
    #define kScreenHeight [UIScreen mainScreen].bounds.size.height
    #define kScreenWidth [UIScreen mainScreen].bounds.size.width
    
    @interface ViewController ()
    
    @property (nonatomic, strong) UIButton *selectBtn;
    
    @property (nonatomic, strong) UIStackView *stackView;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        [self p_setupUI];
        [self p_setupFrame];
    }
    
    - (void)p_setupUI {
        
        [self.view addSubview:self.stackView];
        [self.view addSubview:self.selectBtn];
    }
    
    - (void)p_setupFrame {
        
        [self.stackView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.equalTo(self.view).offset(0);
            make.top.equalTo(self.view).offset(64);
    //        make.height.mas_equalTo(([UIScreen mainScreen].bounds.size.width - 60) / 5);
        }];
        [self.selectBtn mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.stackView.mas_bottom).with.offset(15);
            make.centerX.equalTo(self.view).with.offset(0);
    //        make.centerY.equalTo(self.view).with.offset(0);
            make.size.mas_equalTo(CGSizeMake(200, 50));
        }];
        
    }
    
    - (UIStackView *)stackView {
        
        if (!_stackView) {
            // 初始化
            
            //label数量
            CGFloat count = 3;
            
            _stackView = [[UIStackView alloc]init];
            
            //属性
            // 子视图间隔
            _stackView.spacing = 10;
            // 布局方向 (默认竖向向布局)
            _stackView.axis = UILayoutConstraintAxisVertical;
            // 子视图对齐方式 (枚举值
            _stackView.alignment = UIStackViewAlignmentFill;
    //        // 子视图分部方式 (枚举值)
            _stackView.distribution = UIStackViewDistributionFillEqually;
            //方法
            // 将子视图,添加到 stackView 的 arrangedSubviews列表中
            //        [_stackView addArrangedSubview:label];
            //        // 删除 stackView的 arrangedSubviews列表中的 view
            //        [_stackView removeArrangedSubview:lastLabel];
            //        //插入一个视图到 stackView的 arrangedSubviews列表中
            //        [_stackView insertArrangedSubview:labelatIndex:2];
            
            CGFloat left = 12;
            CGFloat right = 12;
            CGFloat itemSpace = 8;
            CGFloat width = (kScreenWidth - left - right - itemSpace * 2) / 3;
            CGFloat height = 140;
            
            
            for (int i = 0; i < count; i ++) {
                
                
                UIView *view = [[UIView alloc]init];
                view.tag = CC_View_Tag + i;
                [_stackView addArrangedSubview:view];
                
                for (int j = 0; j < 3; j ++) {
                    UILabel *label = [[UILabel alloc]init];
                    label.text = [NSString stringWithFormat:@"%d,%d",i,j];
                    label.backgroundColor = [UIColor orangeColor];
                    label.textAlignment = NSTextAlignmentCenter;
                    label.font = [UIFont systemFontOfSize:12.0];
                    
                    [view addSubview:label];
                    
                    [label mas_makeConstraints:^(MASConstraintMaker *make) {
                        make.top.bottom.offset(0);
                        make.left.equalTo(view).with.offset(j == 0 ? left : j == 1? left + width + itemSpace:left+width*2 + itemSpace*2);
                        make.size.mas_equalTo(CGSizeMake(width, height));
                    }];
                }
                
            }
            
        }
        return _stackView;
    }
    
    - (void)p_selectBtnClick:(UIButton *)sender {
        
        sender.selected = !sender.selected;
        
        for (UIView *l in self.stackView.arrangedSubviews) {
            
            if (l.tag > CC_View_Tag) {
                l.hidden = sender.selected;
            }
        }
    }
    
    - (UIButton *)selectBtn {
        
        if (!_selectBtn) {
            _selectBtn = [UIButton buttonWithType:UIButtonTypeSystem];
            [_selectBtn setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
            [_selectBtn setTitle:@"点我修改布局" forState:UIControlStateNormal];
            [_selectBtn addTarget:self action:@selector(p_selectBtnClick:) forControlEvents:UIControlEventTouchUpInside];
        }
        return _selectBtn;
    }
    
    @end
    
    
    

    复杂使用方式自由想象,尽情的去开发自己的想象力吧~~

    相关文章

      网友评论

        本文标题:UIStackView 简单使用及炫酷效果

        本文链接:https://www.haomeiwen.com/subject/qecudltx.html