iOS SDAutoLayout布局体验(2)

1、UIButton中UIImageView和UILable位置调整

_centerButton = [UIButton new];
    _centerButton.backgroundColor = [UIColor orangeColor];
    [_centerButton setTitle:@"自定义Button" forState:UIControlStateNormal];
    [_centerButton setImage:[UIImage imageNamed:@"7.jpg"] forState:UIControlStateNormal];
    _centerButton.titleLabel.backgroundColor = [UIColor lightGrayColor];
    _centerButton.titleLabel.font = [UIFont systemFontOfSize:14.0];
    [_centerButton sizeToFit];
    _centerButton.titleLabel.textAlignment = NSTextAlignmentCenter;
    _centerButton.imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.view addSubview:_centerButton];

    _centerButton.sd_layout
    .centerXEqualToView(self.view)
    .topSpaceToView(self.view, 10)
    .widthRatioToView(self.view, 0.3)
    .heightIs(100);

    // 设置button的图片的约束
    _centerButton.imageView.sd_layout
    .widthRatioToView(_centerButton, 0.8)
    .topSpaceToView(_centerButton, 10)
    .centerXEqualToView(_centerButton)
    .heightRatioToView(_centerButton, 0.6);

    // 设置button的label的约束
    _centerButton.titleLabel.sd_layout
    .topSpaceToView(_centerButton.imageView, 10)
    .leftEqualToView(_centerButton.imageView)
    .rightEqualToView(_centerButton.imageView)
    .bottomSpaceToView(_centerButton, 10);

效果图:
这里写图片描述

2、setupAutoWidthFlowItems设置可以根据子view自适应高度

 _autoWidthViewsContainer = [UIView new];
    _autoWidthViewsContainer.backgroundColor = [UIColor greenColor];
    [self.view addSubview:_autoWidthViewsContainer];


    NSMutableArray *temp = [NSMutableArray new];
    for (int i = 0; i < 8; i++) {
        UIView *view = [UIView new];
        view.backgroundColor = [UIColor orangeColor];
        [_autoWidthViewsContainer addSubview:view];
        view.sd_layout.autoHeightRatio(0.4); // 设置高度约束
        [temp addObject:view];
    }

    _autoWidthViewsContainer.sd_layout
    .leftSpaceToView(self.view, 10)
    .rightSpaceToView(self.view, 10)
    .topSpaceToView(_centerButton, 10);

    // 此步设置之后_autoWidthViewsContainer的高度可以根据子view自适应
    [_autoWidthViewsContainer setupAutoWidthFlowItems:[temp copy] withPerRowItemsCount:4 verticalMargin:margin horizontalMargin:margin verticalEdgeInset:5 horizontalEdgeInset:10];

/**
* 设置类似collectionView效果的固定间距自动宽度浮动子view
* viewsArray : 需要浮动布局的所有视图
* perRowItemsCount : 每行显示的视图个数
* verticalMargin : 视图之间的垂直间距
* horizontalMargin : 视图之间的水平间距
* vInset : 上下缩进值
* hInset : 左右缩进值
*/
- (void)setupAutoWidthFlowItems:(NSArray *)viewsArray withPerRowItemsCount:(NSInteger)perRowItemsCount verticalMargin:(CGFloat)verticalMargin horizontalMargin:(CGFloat)horizontalMagin verticalEdgeInset:(CGFloat)vInset horizontalEdgeInset:(CGFloat)hInset;

根据视图数组设置每排展示的个数和间隔
效果图:
这里写图片描述

3、给定宽高自适应间隔

    _autoMarginViewsContainer = [UIView new];
    _autoMarginViewsContainer.backgroundColor = [UIColor blueColor];
    [self.view addSubview:_autoMarginViewsContainer];

    NSMutableArray *temp = [NSMutableArray new];
    for (int i = 0; i < count; i++) {
        UIView *view = [UIView new];
        view.backgroundColor = [UIColor orangeColor];
        [_autoMarginViewsContainer addSubview:view];
        view.sd_layout.autoHeightRatio(0.5); // 设置高度约束
        [temp addObject:view];
    }

    // 此步设置之后_autoMarginViewsContainer的高度可以根据子view自适应
    [_autoMarginViewsContainer setupAutoMarginFlowItems:[temp copy] withPerRowItemsCount:3 itemWidth:itemWidth verticalMargin:10 verticalEdgeInset:4 horizontalEdgeInset:10];

    _autoMarginViewsContainer.sd_layout
    .leftSpaceToView(self.view, 10)
    .rightSpaceToView(self.view, 10)
    .topSpaceToView(_autoWidthViewsContainer, 10);

效果图:
这里写图片描述

4、UITableViewCell高度自适应
在TestCell2中布局设置完后设置cell自动布局

//***********************高度自适应cell设置步骤************************

        [self setupAutoHeightWithBottomView:_view4 bottomMargin:10];

在tableView的- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath方法中

// >>>>>>>>>>>>>>>>>>>>> * cell自适应步骤2 * >>>>>>>>>>>>>>>>>>>>>>>>
    /* model 为模型实例, keyPath 为 model 的属性名,通过 kvc 统一赋值接口 */
    return [self.tableView cellHeightForIndexPath:indexPath model:str keyPath:@"text" cellClass:[TestCell2 class] contentViewWidth:[self cellContentViewWith]];

model为cell中接收的数据,keyPath为接收数据的属性名
,cellClass为cell的类型,contentViewWidth为cell的宽度

效果图:
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值