4.1 如何设计掷骰子游戏
首先，让我们先下载相应的素材，在GitHub中搜索IOS 11 Swift 4 Tutorial就可以定位到该项目。
实战：创建Dicee的用户界面。
步骤1：启动Xcode，在欢迎界面中单击Create a new Xcode project，选择iOS/Application/Single View App, Product Name设置为Dicee, Team保持不变，如果你没有组织名称的话，在Organization Name中填写自己的名字，在Organization Identifier中填写自己全名的域名或者公司的网址。确保Language为Swift，确保最下面的三个复选框处于未勾选状态，单击Next按钮。
步骤2：选择保存项目的本地位置，在确保Source Control处于未勾选状态后，单击Create按钮。
在成功创建好项目以后，接下来我们需要继续在故事板中设计用户界面。
步骤3：打开Main.storyboard文件，在设备选择面板中将设计界面设置为iPhone X屏幕，然后在对象库中将Image View拖曳到视图之中，并将其调整到整个视图大小。
注意
在调整Image View位置的时候，Interface Builder会自动出现参考线帮助我们定位，当Image View在离视图边缘8个点位置的时候，会出现自动停靠的效果，因为Xcode会认为UI控件不适合放置在屏幕的边缘处。大可不必管它，直接将Image View放在视图的最上角，我们需要让Image View中的图像作为整个屏幕的背景图。
虽然项目默认使用iPhone 8的屏幕，但是我们手工将屏幕尺寸修改为iPhone X的5.8英寸。在之后的章节中会向大家介绍如何通过自动布局和约束来进行完美布局。
步骤4：在项目导航中打开Assets.cxassets文件，将本书所提供的素材图片添加到里面。其中包括六套骰子面图片、一套背景图片、一套Logo图片和一套60×60点的App Icon图片，如图4-2所示。
图4-2 Dicee项目中导入到Assets.cxassets文件的素材资源
步骤5：回到Main.stroyboard文件，选中之前作为背景的Image View，然后在Attributes Inspector中将Image设置为newBackground。再从对象库拖曳一个Image View，放置在视图的顶部，将其Image设置为diceeLogo，将Content Mode设置为Aspect Fit，并调整好其位置和大小，如图4-3所示。
图4-3 设置Image View的图像
步骤6：再从对象库中拖曳两个Image View到视图之中，选择其中一个在Size Inspector中将x设置为40, y设置为300，宽和高均设置为120。将另外一个Image View的x设置为215, y设置为300，宽和高还是120。
注意
本实战中所使用的是以iPhone X屏幕为参照的视图尺寸，所以在实战中请注意屏幕尺寸的选择，在其他屏幕尺寸下使用当前的设置参数并不会有好的结果。
步骤7：确定选中其中一个骰子的Image View，在Attributes Inspector中将Image设置为dice1，再将第二个骰子也做同样的设置，如图4-4所示。
图4-4 设置骰子的Image View图像
设计用户界面的最后一步是要在视图中添加一个“掷骰子”按钮，当用户单击它以后骰子的面要发生变化。
步骤8：在对象库中将Button拖曳到视图的下半部分，将按钮的标题修改为掷骰子，将Font设置为Helvetica Neue，字号设置为25，最后将按钮调整到合适的大小和位置。设置标题的颜色为白色，按钮的颜色为粉色，如图4-5所示。
图4-5 设置骰子的Image View图像
现在，我们已经为掷骰子游戏设计好了用户界面，在下面的章节中，会将之前所设计的用户界面元素与程序代码进行关联。这样，当用户单击按钮的时候就可以通过代码让骰子的面发生变化。