首页 > 用autolayout设置相同水平位置上的两个view的问题

用autolayout设置相同水平位置上的两个view的问题

我在写一个自定义的UITabelViewCell的时候遇到了subview排列的问题。
自定义的cell如下图所示:

我想要的效果是:timeLabel的内容能完全显示,然后titleLabel右边距离timeLabel 10px,titleLabel的宽度根据以上约束自动确定。我的代码如下:

[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[timeLabel]-15-|" options:0 metrics:nil views:views]];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[timeLabel(>=40)]-15-|" options:0 metrics:nil views:views]];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[timeLabel(<=70)]-15-|" options:0 metrics:nil views:views]];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[titleLabel]-10-[timeLabel]" options:NSLayoutFormatAlignAllCenterY metrics:nil views:views]];

但看起来显然不靠谱啊,请问大家该怎样解决,谢谢。


没有时间试,但是也许可以试试以下思路
从图上看,水平方向上有图片,标题,时间,其中图片尺寸是固定的,其次优先满足时间内容的尺寸(试试intrinsic size),剩下的标题在去除固定距离后自由变动。
其实可以先在xib上拉个样子出来,搞清顺序再写,否则会吐的


Content Compression Resistance 和Content Hugging
可以尝试下对应的方法设置这个约束,应该能有想要的效果。


手写的代码参考:

UIImageView *myImageView=[[UIImageView alloc]init];
myImageView.backgroundColor=[UIColor groupTableViewBackgroundColor];
[self.view addSubview:myImageView];

UILabel *titleLabel=[[UILabel alloc]init];
titleLabel.text=@"bababababbababababbababababbabababab";
[self.view addSubview:titleLabel];

UILabel *timeLabel=[[UILabel alloc]init];
timeLabel.text=@"昨天 23:58";//15小时前,前天
timeLabel.textAlignment=NSTextAlignmentRight;
[self.view addSubview:timeLabel];



[myImageView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.view.mas_top).offset(30);
    make.leading.equalTo(self.view.mas_left).offset(10);
    make.width.mas_equalTo(80);
    make.height.mas_equalTo(80);
}];

[titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.leading.equalTo(myImageView.mas_trailing).offset(10);
    make.top.equalTo(self.view.mas_top).offset(40);
    make.height.mas_equalTo(30);
    make.trailing.equalTo(timeLabel.mas_leading).offset(-10);
}];

[timeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.trailing.equalTo(self.view.mas_trailing).offset(-10);
    make.top.equalTo(self.view.mas_top).offset(40);
    make.height.mas_equalTo(30);
    make.width.mas_greaterThanOrEqualTo(34);
    make.width.mas_lessThanOrEqualTo(85);//timelabel宽度的最大最小值根据你的font来调整算出来
}];



storyboard自动布局直接拉线同样可以实现参考:

imgae约束

titlelabel约束

timelabel约束

detaillabel约束


如果您还在通过代码使用frame进行界面布局,但是对位置计算和屏幕尺寸感到厌烦;如果您在使用AutoLayout进行界面布局,但是对其中的约束难以控制和更新,以及因为约束代码而激增您的代码量;如果您希望您的IOS6版本的应用也需要具备sizeClass的功能;那么就请使用这套布局库:

 https://github.com/youngsoft/MyLinearLayout

这套布局库是以android的线性布局,相对布局,框架布局,表格布局为蓝本。同时又具有IOS的AutoLayout的功能,和部分SIZECLASS功能,以及IOS9中的UIStackView的功能,参考了masonry的一些语法机制,但是他却可以运行在IOS5版本的应用中。使用简单方便,代码清晰,而且少。 并且附带四篇教程文档:

http://blog.csdn.net/yangtiang/article/details/46483999 线性布局
 http://blog.csdn.net/yangtiang/article/details/46795231 相对布局

http://blog.csdn.net/yangtiang/article/details/48011431 表格布局

 http://blog.csdn.net/yangtiang/article/details/46492083 框架布局

 
【热门文章】
【热门文章】