本帖最后由 Kuhoku 于 2015-6-29 15:48 编辑
一行代码一场梦,大家好我是阿达!今天要跟大家分享的是关于 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 之后进入细节画面,我们会看到下面多了一个工具栏按钮,按下去!
当然什么事情都不会发生~~~XD
前面的工作准备好了,接下来我们要建立一个新的画面来呈现动画。
首先我们准备一个新的 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) {
}
之后我们选择按钮X 然后按住 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里面最狂跩酷炫屌炸天的功能,请小伙伴们期待喔!喜欢的小伙伴们别忘了支持,回覆,给好评唷! 让我们一起用一行一行的代码,一步一步的实现我们的梦想,我是阿达,我们下回见!
|