天天看点

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

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

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

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

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

歌手名Label

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

iOS 自动布局 Auto Layout 入门 06 详情页面 (a) 歌手名称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按钮,可以看到当歌手名很长时,我们无法完全显示歌手的名字:

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

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

接下来,我们为label添加Leading Space和Trailing Space约束:

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

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

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

程序执行效果如下:

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

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

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

非固定约束

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

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

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

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

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

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

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

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

这样,自动布局就拥有了足够的信息:

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

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

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

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

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

转载请注明出处:http://blog.csdn.net/yamingwu/article/details/44227079