前几话我们在程序中增加了一个顶部的导航栏,今天我们想要在底部增加一些功能,增加一个share和一个review的按钮。在DetailViewController中增加一个toolBar用来放置功能按钮,设置两个全局变量,表示功能栏的宽和高:
let tooBarHeight:CGFloat = 44 let tooBarWidth:CGFloat = 320
然后在viewDidLoad方法中添加我们的toolBar:
var toolBarY:CGFloat = self.view.frame.size.height - tooBarHeight var toolBar = UIToolbar(frame: CGRectMake(0,toolBarY,tooBarWidth,tooBarHeight)) self.view.addSubview(toolBar)
上述代码可以保证toolBar的位置在底部。效果如图:
然后向工具栏中添加我们需要的按钮:
let shareButton = UIButton(frame: CGRectMake(60, 0, 80, 44)) shareButton.setTitle("Share", forState: .Normal) shareButton.setTitleColor(UIColor.orangeColor(), forState: .Normal) shareButton.addTarget(self, action: "clickShare:", forControlEvents: .TouchUpInside) shareButton.tag = 101 toolBar.addSubview(shareButton) let reviewButton = UIButton(frame: CGRectMake(210, 0, 80, 44)) reviewButton.setTitle("Review", forState: .Normal) reviewButton.setTitleColor(UIColor.orangeColor(), forState: .Normal) reviewButton.addTarget(self, action: "clickReview:", forControlEvents: .TouchUpInside) reviewButton.tag = 102 toolBar.addSubview(reviewButton)
我们给每个按钮打了一个标签,现在来简单实现一下试试有没有关联到,action方法定义如下:
func clickShare(sender: UIButton){ } func clickReview(sender: UIButton){ print(sender.tag) }
点击按钮Review,控制台打印出了102,证明关联成功了,现在我们重新来写action方法。
func clickReview(sender: UIButton){ let review = ReviewViewController() self.presentViewController(review, animated: true, completion: nil )//临时展示一个控制器 }
我们定义了一个新的控制器ReviewViewController用来展示点击clickReview后跳出的页面,代码如下:
import UIKit class ReviewViewController: UIViewController { var imageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() self.view.backgroundColor = UIColor.orangeColor() imageView = UIImageView(frame: self.view.bounds) imageView.image = UIImage(named: "128.png") self.view.addSubview(imageView) var blur = UIBlurEffect(style: .Dark)//模糊 var blurView = UIVisualEffectView(effect: blur)//模糊 blurView.frame = self.view.bounds//模糊 imageView.addSubview(blurView)//模糊 } }
上面这段代码实现了一个模糊图片的效果,下面我把下面四段代码注释掉来展示下如果只显示图片的效果,点击Review按钮,效果如下:
开启模糊模式之后的效果如图:
在这个页面添加一个取消的按钮:
//closeButton var closeButton = UIButton(frame: CGRectMake(280, 30, 30, 30)) closeButton.setBackgroundImage(UIImage(named: "Button-Close"), forState: .Normal) closeButton.layer.cornerRadius = 15 closeButton.layer.masksToBounds = true closeButton.addTarget(self, action: "clickCloseBtn:", forControlEvents: .TouchUpInside) self.view.addSubview(closeButton)点击后返回上一个页面:
在图片上增加一些字吧:
let label = UILabel(frame: CGRectMake(0, 100, 320, 200)) label.text = "You've dinned here.\n What do you \n think?" label.textAlignment = NSTextAlignment.Center label.textColor = UIColor.whiteColor() label.numberOfLines = 0 label.font = UIFont.systemFontOfSize(30) self.view.addSubview(label)
效果如图:
我们添加三个评价按钮,代码如下:
//three buttons let baddge:CGFloat = 40 let buttonWidth:CGFloat = 60 let buttonY:CGFloat = 300 //三个按钮相同的规格 let firstBtn = UIButton(frame: CGRectMake(baddge, buttonY, buttonWidth, buttonWidth)) firstBtn.setBackgroundImage(UIImage(named: "happy"), forState: .Normal) self.view.addSubview(firstBtn) let secondBtn = UIButton(frame: CGRectMake(135, buttonY, buttonWidth, buttonWidth)) secondBtn.setBackgroundImage(UIImage(named: "glad"), forState: .Normal) self.view.addSubview(secondBtn) let thirdBtn = UIButton(frame: CGRectMake(225, buttonY, buttonWidth, buttonWidth)) thirdBtn.setBackgroundImage(UIImage(named: "angry"), forState: .Normal) self.view.addSubview(thirdBtn)
效果如图: