为什么我喜欢用SDAutoLayout
2017-09-02 本文已影响285人
火之玉
基本的适配方法就不做介绍了, 👇主要介绍一些个人认为的SDAutoLayout适配亮点;
亮点1------ UILabel
testLabel设置最大宽度与行数1.1 label设置最大宽度与行数
testLabel设置最大宽度与行数:
_testLabel.text = @"近段时间,人民币出现快速升值,到底是因为人民币“自强了”,还是美元“弱爆了”?对比美元指数跌幅与人民币对美元升幅,不难发现,美元走弱依旧是推动人民币兑美元汇率升值的主要原因。";
_testLabel.sd_layout
.topSpaceToView(self.view, 50)
.leftSpaceToView(self.view, 20)
.autoHeightRatio(0);
// 设置最大宽度
[_testLabel setSingleLineAutoResizeWithMaxWidth:200];
// 设置最大行数
[_testLabel setMaxNumberOfLinesToShow:3];
testLabel富文本自适应1.2 label富文本自适应
testLabel富文本自适应:
NSString *contentStr = @"近段时间,人民币出现快速升值,到底是因为人民币“自强了”,还是美元“弱爆了”?对比美元指数跌幅与人民币对美元升幅,不难发现,美元走弱依旧是推动人民币兑美元汇率升值的主要原因。";
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
[paragraphStyle setLineSpacing:10];
UIColor *color = [UIColor whiteColor];
NSAttributedString *contentString = [[NSAttributedString alloc] initWithString:contentStr attributes:@{NSForegroundColorAttributeName : color, NSParagraphStyleAttributeName: paragraphStyle}];
_testLabel.attributedText = contentString;
_testLabel.sd_layout
.leftSpaceToView(self.view, 20)
.rightSpaceToView(self.view, 20)
.topSpaceToView(self.view, 100)
.autoHeightRatio(0);
// 只需执行这步代码, 即可适配富文本
_testLabel.isAttributedContent = YES;
亮点2------ UIButton
testButton的titleLabel和imageView分开适配2.1 button里的titleLabel和imageView可以分开适配
testButton代码:
_testButton.sd_layout
.centerXEqualToView(self.view)
.centerYEqualToView(self.view)
.widthIs(200)
.heightIs(200);
_testButton.imageView.sd_layout
.topSpaceToView(_testButton, 20)
.centerXEqualToView(_testButton)
.widthIs(100)
.heightIs(100);
_testButton.imageView.layer.cornerRadius = 50;
_testButton.imageView.layer.masksToBounds = YES;
_testButton.titleLabel.sd_layout
.bottomSpaceToView(_testButton, 20)
.centerXEqualToView(_testButton)
.leftSpaceToView(_testButton, 20)
.rightSpaceToView(_testButton, 20)
.heightIs(40);
testButton根据文字内容自适应2.2 button根据文字内容自适应大小
testButton文字自适应:
[_testButton setTitle:@"testButton文字自适应" forState:UIControlStateNormal];
_testButton.sd_layout
.centerXEqualToView(self.view)
.topSpaceToView(self.view, 200);
// 设置button根据文字size自适应
[_testButton setupAutoSizeWithHorizontalPadding:5 buttonHeight:24];
亮点3------ UIScrollView
类似collectionView布局效果3.1 scrollView设置类似于collectionView布局效果
类似collectionView布局效果:
// 添加scrollview
- (void)setupScrollView
{
UIScrollView *scroll = [UIScrollView new];
[self.view addSubview:scroll];
_testScrollView = scroll;
// 设置scrollview与父view的边距
scroll.sd_layout.spaceToSuperView(UIEdgeInsetsZero);
[self setupFlowItemContentView];
// 设置scrollview的contentsize自适应
[scroll setupAutoContentSizeWithBottomView:_flowItemContentView bottomMargin:10];
}
// 添加flowItemContentView
- (void)setupFlowItemContentView
{
_flowItemContentView = [UIView new];
_flowItemContentView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.4];
[_testScrollView addSubview:_flowItemContentView];
_flowItemContentView.sd_layout
.leftEqualToView(_testScrollView)
.rightEqualToView(_testScrollView)
.topEqualToView(_testScrollView);
[self setupFlowItemViews];
}
- (void)setupFlowItemViews
{
NSMutableArray *temp = [NSMutableArray new];
for (int i = 0; i < 35; i++) {
UIView *view = [UIView new];
view.backgroundColor = [self randomColor];
[_flowItemContentView addSubview:view];
view.sd_layout.autoHeightRatio(0.8);
[temp addObject:view];
}
// 关键步骤:设置类似collectionView的展示效果
[_flowItemContentView setupAutoWidthFlowItems:[temp copy] withPerRowItemsCount:4 verticalMargin:20 horizontalMargin:10 verticalEdgeInset:0 horizontalEdgeInset:0];
// [_flowItemContentView setupAutoMarginFlowItems:[temp copy] withPerRowItemsCount:10 itemWidth:60 verticalMargin:20 verticalEdgeInset:10 horizontalEdgeInset:0];
}
复杂页面scrollView自适应3.2 复杂页面scrollView自适应
亮点4------ UITableView
tableView的cell自适应, 自带方法解决;
主要有三点需要注意:
a. 在tableView的cellForRowAtIndexPath:
方法中赋值;
cell.model = model;
b. heightForRowAtIndexPath:
里计算行高;
return [self.tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:currentClass contentViewWidth:[self cellContentViewWith]];
c. cell中适配的时候设置cell里面视图的底部边界;
// 当你不确定哪个view在自动布局之后会排布在cell最下方的时候可以调用次方法将所有可能在最下方的view都传过去
[self setupAutoHeightWithBottomViewsArray:@[_titleLabel, _imageView] bottomMargin:margin];
而且不光如此, 还加入了缓存高度的设置;
// 此步设置用于实现cell的frame缓存,可以让tableview滑动更加流畅
[cell useCellFrameCacheWithIndexPath:indexPath tableView:tableView];
是不是比较贴心呢, 当然里面还有一些其他方法, 就不一一列举, 附上官方demo链接, 希望对大家有所帮助;
SDAutoLayout