iOS 自动布局 Auto Layout 入门 06 详情页面 (a) 歌手名称Label

这一节开始，我们做一个更复杂的程序。我们需要为音乐播放程序构建一个详情页面，这个页面用于显示歌手的名字和专辑的一些详细信息：

创建一个名为ArtistDetail的single view应用程序，disable size classes。如下图示是，将空间拖到view中，不用太关心这些空间的位置，大概差不多就行，后面我们会一步一步的让它们看起来好看的。

歌手名Label

我们首先从歌手名label开始。我们把这个label放在屏幕水平居中的位置，离屏幕上方标准间距：

使用pin菜单，为label添加Top Space to Superview约束。使用Align菜单为label添加水平居中约束。

使用辅助编辑器，为label添加outlet：

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UILabel *artistNameLabel;

@end

添加一个action，用于修改artistLabel的内容：

- (IBAction)nextButtonTapped:(id)sender
{
    static NSArray *artists;
    if (artists == nil)
    {
        artists = @[ @"Thelonius Monk", @"Miles Davis", @"Louis Jordan  His Tympany Five",
                     @"Charlie 'Bird' Parker", @"Chet Baker" ];
    }
    
    static int index = 0;
    
    self.artistNameLabel.text = artists[index % 5];
    index++;
}

使用辅助编辑器，连接Next按钮和nextButtonTapped action。为了方便查看label的大小，我们将label的背景色改为绿色。
运行程序，点击Next按钮，可以看到当歌手名很长时，我们无法完全显示歌手的名字：

通过修改label的字体，可以完全显示这个长歌手名，但是对于较短的歌手名，看起来就不是很舒服。

接下来，我们为label添加Leading Space和Trailing Space约束：

删除了水平居中约束，因为已经不需要了。

通过Attributes inspector，将水平方向的两个约束的constant改为0：

程序执行效果如下：

这样，歌手名label不会超出屏幕之外了，但是文本没有居中，我们修改label的文字对齐方式为居中：

非固定约束

之前我们所添加的所有约束都是固定值，其实有些情况下，我们希望约束有一定的灵活性，比如，水平方向间距最小为x但是可以比x大，或者垂直方向间距最大为x，但是可以x小。这种约束被称为inequalities

选中Leading Space约束和Trailing Space约束，修改Relation为Greater Than or Equal并且设置label为Size to Fit Content：

虽然我们添加了2侧的约束，也设置了labeld的大小，但是自动布局还是不知道，label的x坐标。因为2侧的约束指定的是，离边界的距离大于等于0，但无法确定具体是多少。

我们需要为label添加水平居中约束：

最后使用Editor菜单的Resolve Auto Layout Issues选项来Update Frames：

这样，自动布局就拥有了足够的信息：

• label有多大 - label所包含的内容的大小
• label放在哪里 - 水平居中
• label的边界 - 不能超过包含label的view

最后我们为label设置Autoshrink属性，让字体最小可以缩小到原始字体大小的一半：

运行程序，我们将看到以下效果，在名字短时，label较短，字体较大。名字长时，label较长，字体变小。

转载请注明出处：http://blog.youkuaiyun.com/yamingwu/article/details/44227079