还是先来看个需求：
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;这一招。
希望这篇文章对还在爬坑的小伙伴有所帮助，弯路虽然能够帮助我们增长经验和见识，但是青春毕竟是不等人的。
网友评论