前几话我们在程序中增加了一个顶部的导航栏,今天我们想要在底部增加一些功能,增加一个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)
效果如图: