Xcode 7的改变在iOS上创建用户界面的方式(2)
2015-9-30 14:32:48 [ ] 来源:网络收集 分享至:
更多
标签:IOS 

第一个StackView

打开Xcode,新建一个项目,命名为MovieRate,语言选择Swift。打开Storyboard,删掉当前的ViewController视图,重新拖入TableViewController视图,然后内嵌一个NavigationController,配色大家随意:

StackView-7

然后再删掉初始的ViewController.swfit文件,新建一个UITableViewController名为MovieListTableViewController.swift,以及一个UITableViewCell名为MovieTabelViewCell.swift

StackView-8

这两个文件的作用不言而喻:

StackView-9

接下来新建一个plist文件Movie.plist,当做TableView的数据源:

StackView-10

然后打开StoryBoard,选择MovieListTableViewController,给MovieTableViewCell设置一个标示符MovieCell,往MovieTableViewCell中拖入两个UIImageView和一个UILabel,不用理会他们的位置和尺寸:

StackView-11

按着command键,同时选中这三个视图,然后点击右下角的Stack按钮:

StackView-12

这时,我们便创建的一个UIStackView,包含刚才选中的那三个视图,或者说我们将选中的那三个视图组合成了一个UIStackView:

StackView-13

选中这个StackView,打开右侧的属性编辑窗口,可以看到在文章前言中讲过的四个主要属性:

StackView-14

虽然被包含的两个的UIImageView和UILabel可以由UIStackView的属性设置布局,但是就UIStackView本身而言,我们还是需要设置它的相关约束:

StackView-15

这两个UIImageView一个展示电影封面图片,一个展示评分,我们在StoryBoard中设置它们的image属性,并将Model设置为Aspect Fit,看看效果:

StackView-16

理想总是很丰满,现实总是很骨感,设置了图片后并不是我们想要的结果,图片的大小以及与文字的间隔都有问题。而且还出现了约束错误:

StackView-17

意思是StackView里的这三个内容没有指定x坐标的约束或者宽度的约束。但是作为StackView的子视图,它们的布局情况是由StackView通过各个属性设置的,断然不能在自身上添加约束,那么如何解决这个问题呢?其实很简单,我们选中中间的UILabel,然后打开右侧的尺寸属性面板,找到这两栏:

StackView-18

Content Hugging Priority是水平、垂直方向的拉伸优先级,我们将Horizontal设置为250。这样就可以告诉StackView,中间的UILabel水平拉伸的优先级是最高的,当StackView的宽度变大时优先拉伸UILabel的宽度,这样前后两个UIImageView的宽度是保持不变的,否则会默认拉伸StackView中的第一个子视图,所以我们看到第一个UIImageView的宽度被拉伸了。

Content Compression Resistance Priority是水平、垂直方向的压缩优先级,道理和上面的拉伸优先级是一样的,我们将UILabel的水平压缩优先级设为749。

现在你们会发现约束错误消失了,第一个UIImageView的宽度也正常了,而中间的UILabel被拉伸了:

StackView-19

接下来在MovieTableViewCell中添加这两个UIImageView和UILabel的IBOutlet

StackView-20

然后在MovieListTableViewController中实现TableView的数据展示:

StackView-21


时间财富网为广大企业、商家、个人,提供平面设计、装修设计、建筑设计、起名改名、策划文案、网站建设、营销推广等服务。若您有类似需要,请点击立即发布项目

另,时间财富网上也有着各式各样的任务,无论您是拥有技能的专业人士,还是技术小白。都能在时间财富网上找到您能参与的项目。点击进入悬赏大厅

无论你有什么疑难杂症,威客们都能一一为您解决,点击进入:问答平台

相关文章列表:
我要评论 网友评论
评论加载中...

文明上网,理性发言
关于我们 | 联系我们 | 参与项目须知 | 发布悬赏须知 | 使用帮助 | 软件下载 | 付款方式 | 广告服务 | 威客网盘
ICP证:川B2-20100121 Copyright(©) 2012 www.680.com All rights reserved.