持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第25天,点击查看活动详情
前言
- iOS Masonry以动画的形式更新约束
应用场景:筛选视图的显示与隐藏的时候带上动画来提升用户体验
- 利用dividedBy进行九宫格布局
- Masonry约束宽高比的例子demo
- 设置约束的优先级: 常用于复杂交互视图的约束
I Masonry以动画的形式更新约束
在改变完约束后,在动画块内,使用方法layoutIfNeeded,可以实现一般普通的动画效果
1.1 实现方式
- 在改变完约束后,在动画块内,使用方法layoutIfNeeded,可以实现一般普通的动画效果。
github.com/facebookarc… Facebook Pop其实是基于CADisplayLink(Mac平台上使用的CVDisplayLink)实现的独立于Core Animation之外的动画方案
1.2 实现代码
- (void)setupProductCategoryTreeFilterViewHidden:(BOOL)hidden{
float hiddenTime = 0.5;
WS(weakSelf);
if (hidden) {// 隐藏的时候需要dispatch_after hiddenTime,才有动画效果
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(hiddenTime * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[weakSelf.ProductCategoryTreeFilterView setHidden:hidden];
});
[self.ProductCategoryTreeFilterView mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf).offset(kAdjustRatio(SCREENW));
make.right.equalTo(weakSelf).offset(kAdjustRatio(SCREENW));
}];
}else{//显示的时候直接设置hidden 即可
[weakSelf.ProductCategoryTreeFilterView setHidden:hidden];
[self.ProductCategoryTreeFilterView mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf).offset(kAdjustRatio(50));
make.right.equalTo(weakSelf).offset(kAdjustRatio(0));
}];
}
//Masonry的以动画的形式更新约束
[self setNeedsUpdateConstraints];// // 告诉self约束需要更新
[self updateConstraintsIfNeeded];// // 调用此方法告诉self检测是否需要更新约束,若需要则更新,下面添加动画效果才起作用
[UIView animateWithDuration:hiddenTime animations:^{
[self layoutIfNeeded];// gengxin frame
}];
}
复制代码
- 核心代码
if (hidden) {// 隐藏
[self.ProductCategoryTreeFilterView mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf).offset(kAdjustRatio(SCREENW));
make.right.equalTo(weakSelf).offset(kAdjustRatio(SCREENW));
}];
}else{//显示
[self.ProductCategoryTreeFilterView mas_updateConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf).offset(kAdjustRatio(50));
make.right.equalTo(weakSelf).offset(kAdjustRatio(0));
}];
}
//Masonry的以动画的形式更新约束
[self setNeedsUpdateConstraints];// // 告诉self约束需要更新
[self updateConstraintsIfNeeded];// // 调用此方法告诉self检测是否需要更新约束,若需要则更新,下面添加动画效果才起作用
[UIView animateWithDuration:hiddenTime animations:^{
[self layoutIfNeeded];// gengxin frame
}];
复制代码
II 利用dividedBy实现九宫格布局
/**
Masonry比例用法
*/
- (void)setModel:(QCTtodoContentTableViewCellModel *)model{
_model = model;
// 构建子试图
QCTsubStatusBtnView * lasttmp;
NSInteger col = 4;// 总列数
for (int i = 0; i<col; model.models) {
QCTtodoStatusInfoModel *obj = model.models[i];
QCTsubStatusBtnView * tmp = [QCTsubStatusBtnView new];
tmp.model = obj;
[self addSubview:tmp];
__weak __typeof__(self) weakSelf = self;
[tmp mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.equalTo(weakSelf);
make.width.equalTo(weakSelf).dividedBy(col);
// make.left.equalTo(tmp.mas_width).multipliedBy(i);
if (i%col == 0) {
make.left.equalTo(weakSelf);
}else{
make.left.equalTo(lasttmp.mas_right);
}
// make.centerX.equalTo(tmp.mas_width).multipliedBy(i*2+1);
make.bottom.equalTo(weakSelf);
make.top.equalTo(weakSelf);
}];
lasttmp = tmp;
i++;
}
}
复制代码
III 进行视图宽高比约束
[self.kuangImgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(weakSelf.tishiLabel.mas_bottom).offset(kAdjustRatio(0));
make.left.right.offset((0));
//multipliedBy
//dividedBy
//设置高/宽为388:375.0
make.height.equalTo(weakSelf.view.mas_width).multipliedBy(388/375.0);
}];
复制代码
kunnan.blog.csdn.net/article/det…
iOS13扫描证件&银行卡信息识别;身份证识别 (正反) ;矩形边缘识别 ;自定义证件相机 (含demo源码)
IV 设置约束的优先级
需求: 设备描述最多展示三行,如果超过三行显示下拉icon。
例子: 设置购买按钮的地步约束优先级最高,来实现动态控制cell的高度。
[tmpView mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(weakSelf).offset(kAdjustRatio(-kSideMargin));
make.top.greaterThanOrEqualTo(weakSelf.skuLab.mas_bottom).offset(kAdjustRatio(6));
make.bottom.lessThanOrEqualTo(weakSelf).offset(kAdjustRatio(-20)).priorityHigh();
}];
复制代码
see also
iOS设置tableView的点击事件优先级,低于cell的选中事件【场景:比如筛选视图,监听蒙版的点击事件就隐藏筛选视图】