美文网首页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