天天看点

autolayout - sizeClass - Masonry - 4

上一篇实现的是单一的textView的Masonry横竖屏适配实现,如果在textView上方添加一个固定的button并且也要保持横竖屏的适配,那该如何?

答案是:用最好的offset属性!

#import "Masonry.h"
#import "LBProtoFirstViewController.h"

@interface LBProtoFirstViewController ()

@property (nonatomic, strong) UITextView* textView;

@end

@implementation LBProtoFirstViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    UIView* superView = self.view;
    
    UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setTitle:@"Invoke ActionSheet" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor blueColor]];
    [button setTranslatesAutoresizingMaskIntoConstraints:NO];
    [superView addSubview:button];
    
    self.textView = [UITextView new];
    self.textView.textColor = [UIColor redColor];
    self.textView.font = [UIFont systemFontOfSize:22];
    self.textView.backgroundColor = [UIColor greenColor];
    self.textView.translatesAutoresizingMaskIntoConstraints = NO;
    self.textView.text = @"Even with such a simple example the code needed is quite verbose and quickly !";
    [superView addSubview:self.textView];
    
    CGFloat pitch = 50.0;
    
    [button mas_makeConstraints:^(MASConstraintMaker* make){
    
        make.centerX.mas_equalTo(superView.mas_centerX);
        make.top.equalTo(superView).with.offset(pitch);
        make.bottom.equalTo(button.mas_top).with.offset(-pitch);
        
        make.left.equalTo(superView).with.offset(30);
        make.right.equalTo(superView).with.offset(-30);
        
        make.width.equalTo(self.textView);
    }];
    
    
    [self.textView mas_makeConstraints:^(MASConstraintMaker* make){
  
        make.centerX.mas_equalTo(superView.mas_centerX);
        make.top.equalTo(button.mas_bottom).with.offset(pitch);
        make.bottom.equalTo(superView.mas_bottom).with.offset(-80);
        
        make.width.mas_equalTo(button);
        
    }];
    
}

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [super willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration];
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [super didRotateFromInterfaceOrientation:fromInterfaceOrientation];
    
}

@end
           

甚至可以更加简约,因为重复的约束压根没有意义(而且重复的约束一旦出错,就会全错)

CGFloat pitch = 50.0;
    
    [button mas_makeConstraints:^(MASConstraintMaker* make){
    
        make.centerX.mas_equalTo(superView.mas_centerX);
        make.top.equalTo(superView).with.offset(pitch);
        make.bottom.equalTo(self.textView.mas_top).with.offset(pitch);
        
        make.left.equalTo(superView).with.offset(30);
        make.right.equalTo(superView).with.offset(-30);
        
        make.width.equalTo(self.textView);
    }];
    
    
    [self.textView mas_makeConstraints:^(MASConstraintMaker* make){
  
        make.centerX.mas_equalTo(superView.mas_centerX);
        make.bottom.equalTo(superView.mas_bottom).with.offset(-80);
        
    }];
           

因为上面一个button已经将大多数的约束条件确定,下面的只是一种无用的重复。

但是注意到一点,两者之间的距离是一个定值(如果竖屏还可以接受,但是横屏就间隔太远了),在屏幕方向的方法里面:

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [super willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration];
    
    CGFloat pitch = 50.0;
    
    BOOL isLandScape = NO;
    UIDeviceOrientation oritation  = [UIDevice currentDevice].orientation;
    isLandScape = ((oritation == UIDeviceOrientationLandscapeLeft) || (oritation == UIDeviceOrientationLandscapeRight));
    
    if (isLandScape)
    {
        //横屏
        [self.button mas_updateConstraints:^(MASConstraintMaker* make){
            
            make.bottom.equalTo(self.textView.mas_top).with.offset(-pitch);
            
        }];
    }
    else  
    {  
        //竖屏
        [self.button mas_updateConstraints:^(MASConstraintMaker* make){
            
            make.bottom.equalTo(self.textView.mas_top).with.offset(-2*pitch);
            
        }];
    }
}
           

就很好地呈现了自适配了哈!