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的宽度

效果图：