小而美的Swift&iOS教程01-HelloWorld

HelloWorld.gif

这个教程会涉及如下内容

---

• 通过storyboard添加UILabel
• 添加导航栏
• 设置导航栏title及title的文字颜色
• 通过storyboard实现最基础的手势识别
• 最基础的动画效果（淡入淡出）

PS：因为是第一个教程，我会尽可能细致的把App的搭建过程以图文并茂的形式展现出来。

首先我们来新建一个工程

---

打开Xcode

新建工程.png

---

选择Single View Application（单视图程序），今后大部分程序都会给予Single View App的模板实现，单击next。

SingleViewApp.png

---

接下来设置工程名称，这里我们用HelloWorld做为名称，语言及的选择Swift。

工程名.png

---

新建完成后你就会看到主界面，在主界面右侧可以看到整个项目的文件目录结构如下图：

工程文件结构.png

我们来依次简单介绍一下这几个文件

• AppDelegate.swift：App运行的入口
• ViewController.swift：App的控制器，在之后的很长一段学习过程中你的编码工作主要是针对这个文件完成的，在这个文件中你将会告诉你的App应该如何工作。
• Main.storyboard：App的设计界面，绝大多数可视化的组件（像你熟悉的按钮、文本框、图片、滚动列表）都在这个文件中进行设置，有了这个东西你就可以几乎不需要写一行代码就能定义好App的外观。怎么样，很酷吧～
• Asset.xcassets：App的原生图片存储在这里。
• LanuchScreen.storyboard：App登陆界面外观，在你打开一个App的时候经常会看到一些轮播图片或是介绍，那些东西就是在这里进行设置的。
• info.plist：这里存放了App相关的一些重要配置信息，很多无法通过代码设置的信息都是在这里进行设置的。

有关主界面的更佳详细的介绍可以参见下面链接中的介绍：

Xcode 界面简介

正式进入开发阶段

---

使用storyboard进行UI搭建

首先点开Main.storyboard文件，将右下角控件选择器中的Label直接拖到ViewController面板中。

DragLabel.gif

现在页面中只有一个元素，那就是你拖进去的这个Label，这时让它居中是最好的选择，选中Label，然后单击右下角的布局按钮设置居中。

LabelCenterLayout.gif

接下来我们调整一下Label的属性，让它看起来更加美观～～

Label设置.png

• color 选择 DarkGray
• Font 选择 Thin 大小调整为50
• Alignment设置为剧种

给ViewController添加一个NavigationController：选中Controller，单击菜单栏中的Editor -> Embed in -> Navigation Controller

NavigationController.gif

同样的过程，在右边栏中将导航设置为深灰色，并且双击导航栏为导航栏添加title：Hello World，将根部View的背景设置为浅灰。怎么样，整个界面是不是看起来就美观多了。

美化界面.png

到这里界面的基本外观我们就设置完成了，可以看到，所有过程都是通过storyboard完成的，我们甚至没有敲任何一行代码。

代码实现动态交互效果

打开ViewController.swift文件 我们会看到如下代码

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

viewDidLoad()方法中的代码用来初始化程序的开始的第一个界面，didReceiveMemoryWarning()方法呢是在内存异常的时候才会被调用

首先添加Label的引用命名为helloWorldLabel，即使用拖拽将stroyboard中的label 与代码链接

   @IBOutlet weak var helloWordLabel: UILabel!

打开软件时Hello World会有一个淡入的动画效果 我们使用animate()方法类实现

UIView.animate(withDuration: TimeInterval, animations: () -> Void)

• withDuration传入一个TimeInterval类型参数来代表时间长度，以秒为单位，实际上TimeInterval是一个被重命名的Double类型，增加代码可读性。
• 后面的参数传入一个返回类型为空的函数（或闭包）整个函数会使得有关外观的参数在设置的时间长度内匀速按一定增量刷新，最终变成设定的值从而达到动态效果，如果设置的值与外观无关，或者无法进行均匀插值（如设定颜色），语句会被瞬间执行

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        helloWordLabel.alpha = 0
        UIView.animate(withDuration: 1, animations: {
            self.helloWorldLabel.alpha = 1
        })
    }

接下来给View添加一个点击响应功能，在每次点击屏幕后HelloWorldLabel
这次依然用storyboard来添加直接从右下角面板找到tapRecognizer拖入storyboard主面板，

tapRecognizer.png

然后把tapRecognizer拖入ViewController建立一个action命名为singleTap()
这时右边栏的链接面板是这个样子的：

Connection面板.png

在singleTap方法下添加如下代码：

@IBAction func singleTap(_ sender: UITapGestureRecognizer) {
        if helloWorldLabel.alpha == 0{
            UIView.animate(withDuration: 1, animations: {
                //alpha用于控制控件透明度，最小值0为完全透明，最大值1为完全不透明
                self.helloWorldLabel.alpha = 1
            })
        } else{
            UIView.animate(withDuration: 1, animations: {
                self.helloWordLabel.alpha = 0
            })
        }
    }

到此我们已经做好了第一个可以和用户进行交互的App了，点击运行按钮，选择一个模拟器设备（我选的是iPhone7）你就可以看到开头的运行效果了，Cool！