swift实作app 交流分享九（toolbar)

一行代码一场梦，大家好我是阿达！今天要跟大家分享的是关于 toolbar 做畫面切換，有的時候我們會在一些只有在特定頁面才有的功能。這個時候就需要用到 toolbar 了，要解釋最好的方法就是以实际的例子来测试。我们继续打造 Food Pin 。

首先我们先加入一个工具列 (Toolbar) 到细节控制器。拖曳出这个物件到Detail View Controller 的 TableView 下面。

之後我們在將 toolbar 的 Y 設定為 524。讓他跑到下面去。

選取工具的『Item』，在屬性檢閱器，把標題設為空白，並將『Identifier 』 設定為『Action』

完成之後， toolbar 的圖示就會變成這樣子，接下來我們在拖曳兩個 『Flexible Space Bar Button Item』在 toolbar 的左右

完成了之後看起來就像這個樣子，現在我們所有的項目都加到工具列了，現在我們看到他是透明的，所以現在我們要到 AppDelegat.swift ，加入程式到 application(_:willdidFinishLaunchingWithOptions:) 方法中：

 //修改工具列的顏色

        UIBarButtonItem.appearance().tintColor = UIColor (red: 235.0 / 255.0, green: 73.0 / 255.0, blue: 27.0 / 255.0, alpha: 1.0)

            

        UIToolbar.appearance().barTintColor = UIColor (red: 237.0 / 255.0, green: 240.0 / 255.0, blue: 243.0 / 255.0, alpha: 0.5)

按下 command +  R  之后进入细节画面，我们会看到下面多了一个工具栏按钮，按下去！

当然什么事情都不会发生～～～ＸＤ

前面的工作准备好了，接下来我们要建立一个新的画面来呈现动画。

首先我们准备一个新的 View Controller  到 Storyboard 中。加上一个 imageVeiw  到中间的位置，并且将他图像设定为 『cafeloisl』 

然后我们再放置一个视图物件 (View)  放到图像的上面，在尺寸检阅器设定好数值， X: 45, Y: 102 , Width: 231 , Height: 242 。 然后把文字的背景设定成预设。

然后再将背景从白色改成预设

接下來我們再拖一個標籤（Label ），將內容改成『You’ve dined here. What did you think?』，字體大小設定成 23 ，把它放在View的下面，為了讓他能夠完整的展示出內容，我們將行數定為三行。

接下来我们准备三个Button 

第一个按钮标题为空白，图像设为『bad』。  

X:10 , Y : 151 , Width: 60, Height : 60

第二个按钮标题为空白，图像设为『good』。

X:85 , Y : 151 , Width: 60, Height : 60

第三个按钮标题为空白，图像设为『great』。

X:160 , Y : 151 , Width: 60, Height : 60

阿達在這裡幫小夥伴們準備好了按鈕的圖案，將它們全部拖到『iamges.xcassest』裡面，再回到 Storybaord，把按鈕對映圖示選擇好，之後將 Type  從 custom 改成System  , 再將 Tint 改成白色

完成之后看起来就是这样的。

接下来我们就是将一开始建立的 toolbar ，跟新的画面做连接，按住control  连线到新的画面。

选择modal，并且将识别码设定为showReview

接下来就是很开心的 command + R 时间啦！小伙伴们可以很顺利的利用toolbar  将画面切换。但是却发生了一件囧事！那就是，我们无法把画面切换回来！！！！

用toolbar切换画面很方便，但是往好的方面想，我们可以自己决定切换回来的方式，可以让画面更符合我们的设计，所以现在我们要再做一个返回按钮。

现在我们在拖曳一个button  到画面上面将他放到右上角，标题设为空白，图像设为 『close 』 

X:247 , Y : 28,  Width: 30, Height: 30

同样的我们将，Type 设定成 System 然后设定颜色一样设定成白色

完成了外观布局之后，我们要开始写内部程式了，首先我们要将这个按钮(Close ) 的方法加入到 DetailViewController .swift 当中

@IBAction func close(segue:UIStoryboardSegue) {

        

    }

之后我们选择按钮Ｘ 然后按住 control 连接右上角的『exit』 选择里面刚刚建立的『close』

接下来只要按下  command + R 开心地去测试吧！

本来到这边已经完了，但是阿达还是想多分享一个酷炫的功能，在这边介绍一个新的类别叫做 UIVisualEffectView  可以让小伙伴们在视图上实现不同的视觉特效，结合了 UIBurEffect 类别，可以很轻易的在目前的图像上产生模糊特效。

首先我们建立一个新的类别给这个新画面，就是大家很熟悉的  command + n 命名为ReviewViewController 将它附属再 UIViewController 下面。当然别忘了把新的类别跟新的画面做连结。

之后我们将背景的图片建立一个Outlet  物件，命名为backgroundimageView。

然后在  ViewDidLoad 加入以下的程式：

        //建立一個blurEffect物件，使用Dark模式

        var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)

        //加上模糊特效

        var blurEffectView = UIVisualEffectView(effect: blurEffect)

        blurEffectView.frame = view.bounds

        backgroundimageView.addSubview(blurEffectView)

别怀疑 command + R 吧

感觉是不是更有设计感了呢？下一篇阿达将会分享阿达觉得整个App里面最狂跩酷炫屌炸天的功能，请小伙伴们期待喔！喜欢的小伙伴们别忘了支持，回覆，给好评唷！ 让我们一起用一行一行的代码，一步一步的实现我们的梦想，我是阿达，我们下回见！