【TIP】scrollview中的autolayout小技巧

还是先来看个需求：

03教师风采.png

由图可知，这个界面由两个label和一个imageview组成，imageview是大图需要按比例显示，底下的介绍文字可能会很多所以高度也是动态的，这种组合情况比较简单所以就不用tableview或者webview之类的视图控件了，直接用scrollview即可。

下面简单的铺设下这个页面：

@interface ViewController : UIViewController

@property (nonatomic , weak) IBOutlet UILabel *nameLabel;
@property (nonatomic , weak) IBOutlet UIImageView *photoImageView;
@property (nonatomic , weak) IBOutlet UILabel *contentLabel;
@property (nonatomic , weak) IBOutlet NSLayoutConstraint *imageHeight;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.title = @"教师风采";
    [self configureUI];
    
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithTitle:@"编辑" style:UIBarButtonItemStylePlain target:self action:@selector(editTeacher)];
    self.navigationItem.rightBarButtonItem = item;
}

- (void)editTeacher
{
}

- (void)configureUI
{
    [_nameLabel setText:@"托雷斯"];
    [_contentLabel setText:@"有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，有钱任性，"];
    [_photoImageView sd_setImageWithURL:[NSURL URLWithString:@"http://timg.aier360.com/headimg/big/7976f8e79bwfklbtpv.jpg"] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
        CGFloat height = 0;
        if (image) {
            height = ([UIScreen mainScreen].bounds.size.width - 16) * image.size.height / image.size.width;
        }
        [UIView animateWithDuration:0.25 animations:^{
            _imageHeight.constant = height;
            [self updateViewConstraints];
        }];
    }];
}
@end

这里有个小技巧，在storyboard里，双击下图这个地方，

QQ20141213-1.png

可以进入constrait的详情，然后可以将这条constraint IBOutlet出来，在controller里就可以根据图片的尺寸动态修改这个constrait的constant来改变布局了。

QQ20141213-2.png

至于contentLabel的按文字内容自动改变高度，只需简单的几个步骤：
1、设置好leading，trailing，width，height的约束
2、设置lineNumber和lineBreakModel

QQ20141213-4.png

3、设置height的priory

QQ20141213-5.png

小技巧介绍完毕，来看下sb里的约束情况：

QQ20141213-3.png

都是简单的固定高度，和根据parentView约束宽度。

那么先来看看效果吧：

Screen Shot 2014-12-13 at 11.15.48.png

纳尼？imageview的宽度明明是根据scrollview的宽度来约束的，为何scrollview的contentsize还是跟sb里预设的一样？

为了找出原因，我们使用sizeClass查看一下窄屏时候的情况。

QQ20141213-6.png

what a fuck！这玩意压根没有变嘛！有人可能会说你不是固定了imageview的宽度吗？是的，但是一般情况下，宽度的约束优先级是小于leading和trailing的约束的，即只要父view的宽度一定，子view的leading和trailing设置了约束，无论你width是多少，子view的宽度都已经确定了。（这是我个人的理解，说的不对的地方请大神指导）同时可以看看我并没有设置宽度的label。

QQ20141213-7.png

还是跟原来一样对不对。后来我查阅资料得知，scrollview里的子view，上下左右的约束对应的并不是scrollview的边，而是scrollview的contentSize的边。那么如何指定contentSize的宽度，让它只能上下滚动呢？

脑洞开一下。contentSize的宽度取决于子view的宽度，子view的宽度同时又跟scrollview的宽度有关，那么我再用一个contentView将所有子view都包裹起来，同时设置上下左右到scrollview的距离都为0，并且设置contentView和scrollview的宽度相等，如下图所示。

QQ20141213-8.png

还有其他步骤吗？没有了，是不是很简单？sb改动了这么多而代码却一句都没有改，这就是autolayout的魅力。

最后让我们来看下效果：

Screen Shot 2014-12-13 at 10.57.52.png

搞定收工！scrollview的autolayout这个坑我已经爬了半年了，没有办法的时候一直使用tableview的hearderview来代替，直到@叶孤城__大神教会了我@property (nonatomic , weak) IBOutlet NSLayoutConstraint *imageHeight;这一招。
希望这篇文章对还在爬坑的小伙伴有所帮助，弯路虽然能够帮助我们增长经验和见识，但是青春毕竟是不等人的。