iOS 自动布局扩展应用:代码中动态调整布局常量

一.设计需求

iOS Storyboard 自动布局技术,是iOS 6才出来的新技术,相当于多屏幕分辩率下自适应的技术。

但是一些复杂情况还是难处理。

比如有一个界面需求,进度条上显示标签,这个需求不难,难的是显要在显示表格框内,在各种机型显示正常。

最初设定是垂直居中向上偏15个像素
技术分享

这是iPhone 4S 显示效果,下面与滑块还有错位
技术分享

但是在iPhone 6下显示,下面有错位,但是上面留空太多
技术分享

但如果把偏移量设为21.则出现另一种情况。

大屏幕的手机显示完美。
技术分享

但是iPhone 4S下就错位了
技术分享

因此我们如何解决这问题呢,如果能找到一种方法,在代码中支持调整这个一些常量,比如在iPhone 4S下我把它设为15,在Iphone6下高为21,这个问题就解决了。

二.代码中调整常量

事实上,iOS还提供这样方法来调整,一种方法是手工在代码中创建这个约束常量,然后不同机型赋值不一样。

另一种方法是在控件找到它的约束变量,用代码调整值即可,后者更为简单,因为我可以在Storyboard 针对大部分机型设置好变量,然后在小屏幕机型,微调一下即可。

两者测试均可实现,我现在实现后一种:


//查找对应的约束常量,注意分清是firstItem,还是secondItem.这个在Storybord能看说明,比哪区中对齐时,被对齐的控件是secondItem.

+(NSLayoutConstraint *) findFirstConstraint:(UIView *)parentView firstItem:(id)firstItem  attribute:(NSLayoutAttribute)attribute{



    for (NSLayoutConstraint *constraint in parentView.constraints) {
       constraint.priority, constraint.secondItem);
        if((constraint.firstItem == firstItem) && (constraint.firstAttribute == attribute)){
            NSLog(@"find! %@",firstItem);
            return constraint;
        }
    }



    return nil;

}

+(NSLayoutConstraint *) findSecondConstraint:(UIView *)parentView secondItem:(id)secondItem  attribute:(NSLayoutAttribute)attribute
{
    for (NSLayoutConstraint *constraint in parentView.constraints) {

        if((constraint.secondItem == secondItem) && (constraint.secondAttribute == attribute)){
            NSLog(@"find! %@",secondItem);
            return constraint;
        }
    }



    return nil;
}

在创建方法中,判断一下是否是iPhone4S 小屏,如果将约束常量和字体均缩小,以便能加入。这里将对齐偏移量由21变成15,字号也缩小了2号

-(void)relayoutLabel{

       //模拟器下总是 iPhone6 /iPhone5--> 320x568
    //           iPhone4S --> 320x480
    //
    CGSize result = [[UIScreen mainScreen] bounds].size;

    if(result.height > 500)
    {
        return ;
    }

    //iPhone 4S 以下版本
    NSLayoutConstraint *constraint;
    //找到约束常量
    constraint = [Utils findSecondConstraint:self.banner01 secondItem:self.percent attribute:NSLayoutAttributeCenterY];

    //
    //    //垂直居中
    //    constraint = [NSLayoutConstraint
    //                  constraintWithItem:self.banner01
    //                  attribute:NSLayoutAttributeCenterY
    //                  relatedBy:NSLayoutRelationEqual
    //                  toItem:self.percent
    //                  attribute:NSLayoutAttributeCenterY
    //                  multiplier:1.0f
    //                  constant:15.0f];
    // [self.banner01 addConstraint:constraint];

    constraint.constant = 15; //由21--》15

    NSLog(@"constraint %f,%d",constraint.constant,constraint.firstAttribute);

    UIFont * font =  [UIFont fontWithName:@"Helvetica" size:12]; //字体由14--》变成 12


    [self.percent setFont:font];


}

三.最终效果

最终实现效果:(iPhone 4S 还是有点错开,但是已经最大努力了,如果想完全错开,可以把字号变成10)

iPhone4S
技术分享

iPhone 6效果
技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。