iOS小技能：以动画的形式更新Masonry约束、宽高比约束、约束优先级、九宫格布局-CFANZ编程社区

前言

iOS Masonry以动画的形式更新约束

应用场景：筛选视图的显示与隐藏的时候带上动画来提升用户体验

利用dividedBy进行九宫格布局
Masonry约束宽高比的例子demo
设置约束的优先级：常用于复杂交互视图的约束

I Masonry以动画的形式更新约束

在改变完约束后，在动画块内，使用方法layoutIfNeeded，可以实现一般普通的动画效果

1.1 实现方式

在改变完约束后，在动画块内，使用方法layoutIfNeeded，可以实现一般普通的动画效果。

Facebok的动画框架pop

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比例用法demo

/**
 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);

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源码）

iOS小技能：以动画的形式更新Masonry约束、宽高比约束、约束优先级、九宫格布局_iOS

IV 设置约束的优先级

需求：设备描述最多展示三行，如果超过三行显示下拉icon。

例子：设置购买按钮的地步约束优先级最高，来实现动态控制cell的高度。

6));


                        make.bottom.lessThanOrEqualTo(weakSelf).offset(kAdjustRatio(-20)).priorityHigh();







        }];