A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© Kuhoku 中级黑马   /  2015-6-29 15:44  /  2252 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 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里面最狂跩酷炫屌炸天的功能,请小伙伴们期待喔!喜欢的小伙伴们别忘了支持,回覆,给好评唷! 让我们一起用一行一行的代码,一步一步的实现我们的梦想,我是阿达,我们下回见!




评分

参与人数 1黑马币 +4 收起 理由
javazhang + 4 赞一个!

查看全部评分

2 个回复

倒序浏览
18530670911 来自手机 初级黑马 2015-6-29 16:48:29
沙发
下课了,来看看阿达:)
回复 使用道具 举报
继续加油
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马