自己customize的底部控件

自己实现的一个底部控件

监听MKWebView的滚动事件,上滑动消失,下滑动出现。同时用blur效果和FontAwesome图标结合在一起,动画方面用的facebook开源pop库。还算漂亮。下面是效果图:

自己customize的底部控件_第1张图片

import UIKit
import FontAwesome_swift
import pop

class BottomBarView: UIView {

    private let horizontalPadding: CGFloat = 0.0
    private var rightBtnContainerView: UIView!
    private var leftBtnContainerView: UIView!
    private var commentBtn:UIButton!
    private var likeBtn:UIButton!
    private var shareBtn:UIButton!
    private var returnBtn:UIButton!
    private var btnWidthHeight:CGFloat!
    private var rightContainerWidth:CGFloat!
    
    //Button回调方法
    typealias fuckBlock = () ->()
    
    var returnButtonBlock:fuckBlock!
    var commentButtonBlock:fuckBlock!
    var likeButtonBlock:fuckBlock!
    var shareButtonBlock:fuckBlock!
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setUpComs()
        
        setUpContainerView()
        setUpContainerViewAutoConstraint()
        
        setUpButtons()
        
        addButtonEvents()
    }
    
    private func addButtonEvents() {
        
        returnBtn.addTarget(self, action:#selector(BottomBarView.returnBtnPressed), forControlEvents: UIControlEvents.TouchUpInside)
        commentBtn.addTarget(self, action:#selector(BottomBarView.commentBtnPressed), forControlEvents: UIControlEvents.TouchUpInside)
        likeBtn.addTarget(self, action:#selector(BottomBarView.likeBtnPressed), forControlEvents: UIControlEvents.TouchUpInside)
        shareBtn.addTarget(self, action:#selector(BottomBarView.shareBtnPressed), forControlEvents: UIControlEvents.TouchUpInside)
        
    }
    
    func returnBtnPressed(){
        
        if let _  = returnButtonBlock{
            UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.4, options: UIViewAnimationOptions.Autoreverse, animations: {
                
                self.returnBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(30)
                
                }, completion: { (finally) in
                    self.returnBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(25)
                    return self.returnButtonBlock()
            })
            
        }
    }
    
    func commentBtnPressed(){
        
        if let _  = commentButtonBlock{
            UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.4, options: UIViewAnimationOptions.Autoreverse, animations: {
                
                self.commentBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(30)
                
                }, completion: { (finally) in
                    self.commentBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(25)
                    return self.commentButtonBlock()
            })
            
        }
    }
    
    func likeBtnPressed(){
        
            UIView.animateWithDuration(1, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.8, options: UIViewAnimationOptions.Autoreverse, animations: {
                
                self.likeBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(30)
                self.likeBtn.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)
                
                }, completion: { (finally) in
                    self.likeBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(25)
                   // return self.likeButtonBlock()
            })
        
    }
    
    func shareBtnPressed(){
        
        if let _  = shareButtonBlock{
            UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.4, options: UIViewAnimationOptions.Autoreverse, animations: {
                
                self.shareBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(30)
                
                }, completion: { (finally) in
                    self.shareBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(25)
                    return self.shareButtonBlock()
            })
            
        }
    }
    
    private func setUpComs() {
       btnWidthHeight = self.bounds.height
       rightContainerWidth = btnWidthHeight * 3 + 20.0 //左右pading各10
    }
    
    
    private func setUpContainerView() {
        leftBtnContainerView = UIView.init(frame: CGRectMake(0, 0, btnWidthHeight, btnWidthHeight))
        leftBtnContainerView.backgroundColor = UIColor.clearColor()
        leftBtnContainerView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(leftBtnContainerView)
        
        //右边3个buttion,左右button padding 10
        rightBtnContainerView = UIView.init(frame: CGRectMake(0, 0, rightContainerWidth, btnWidthHeight))
        rightBtnContainerView.backgroundColor = UIColor.clearColor()
        rightBtnContainerView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(rightBtnContainerView)
    }
    
    private func setUpContainerViewAutoConstraint() {
        
        let views = ["leftView":leftBtnContainerView,"rightView":rightBtnContainerView]
        let metrics = ["btnWH": btnWidthHeight]
        NSLayoutConstraint.activateConstraints([
            NSLayoutConstraint.constraintsWithVisualFormat(
                "H:|-15-[leftView(btnWH)]-80@250-[rightView(\(rightContainerWidth))]-15-|", options: [], metrics: metrics, views: views),
            
            NSLayoutConstraint.constraintsWithVisualFormat(
                "V:|-0-[leftView]-0-|", options: [], metrics: metrics, views: views),
            
     
            
            NSLayoutConstraint.constraintsWithVisualFormat(
                "V:|-0-[rightView]-0-|", options: [], metrics: metrics, views: views)
            
            ].flatten().map{$0})
    }
    
    
    private func setUpButtons() {
        
        //左排按钮模糊效果
        let blurLeftEffectView = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.Dark))
        blurLeftEffectView.frame = leftBtnContainerView.bounds
        leftBtnContainerView.addSubview(blurLeftEffectView)
        
        let subLeftEffectView = UIVisualEffectView(effect: UIVibrancyEffect(
            forBlurEffect: blurLeftEffectView.effect as! UIBlurEffect))
        subLeftEffectView.frame = blurLeftEffectView.bounds
        blurLeftEffectView.contentView.addSubview(subLeftEffectView)
        
        returnBtn = UIButton.init(frame: leftBtnContainerView.bounds)
        returnBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(25)
        returnBtn.titleLabel?.textColor = UIColor.blackColor()
        returnBtn.setTitle(String.fontAwesomeIconWithName(.ArrowLeft), forState: .Normal)
        subLeftEffectView.contentView.addSubview(returnBtn)
        
        //圆角
        self.leftBtnContainerView.layer.cornerRadius = btnWidthHeight/4
        self.leftBtnContainerView.layer.masksToBounds = true

        
        //右排按钮添加模糊效果
        let blurRightEffectView = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.Dark))
        blurRightEffectView.frame = rightBtnContainerView.bounds
        rightBtnContainerView.addSubview(blurRightEffectView)
        
        let subRightEffectView = UIVisualEffectView(effect: UIVibrancyEffect(
            forBlurEffect:  blurRightEffectView.effect as! UIBlurEffect))
        subRightEffectView.frame = blurRightEffectView.bounds
        blurRightEffectView.contentView.addSubview(subRightEffectView)
        
        //评论按钮
        commentBtn = UIButton.init(frame: CGRectMake(0, 0, btnWidthHeight, btnWidthHeight))
        commentBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(25)
        commentBtn.titleLabel?.textColor = UIColor.blackColor()
        commentBtn.setTitle(String.fontAwesomeIconWithName(.Comments), forState: .Normal)
        commentBtn.translatesAutoresizingMaskIntoConstraints = false
        subRightEffectView.contentView.addSubview(commentBtn)
        
        //喜欢按钮
        likeBtn = UIButton.init(frame: CGRectMake(0, 0, btnWidthHeight, btnWidthHeight))
        likeBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(25)
        likeBtn.setTitle(String.fontAwesomeIconWithName(.Heart), forState: .Normal)
        likeBtn.translatesAutoresizingMaskIntoConstraints = false
        subRightEffectView.contentView.addSubview(likeBtn)
        
        //转发按钮
        shareBtn = UIButton.init(frame: CGRectMake(0, 0, btnWidthHeight, btnWidthHeight))
        shareBtn.titleLabel?.font = UIFont.fontAwesomeOfSize(25)
        shareBtn.setTitle(String.fontAwesomeIconWithName(.ShareAlt), forState: .Normal)
        shareBtn.translatesAutoresizingMaskIntoConstraints = false
        subRightEffectView.contentView.addSubview(shareBtn)
        
        //圆角
        self.rightBtnContainerView.layer.cornerRadius = btnWidthHeight/4
        self.rightBtnContainerView.layer.masksToBounds = true

        //设置右排3个button的auto layout
        let views = ["commentBtn":commentBtn,"likeBtn":likeBtn,"shareBtn":shareBtn]
        let metrics = ["hp": horizontalPadding,"btnWidth": btnWidthHeight]
        NSLayoutConstraint.activateConstraints([
            //10@250 优先级设为最低,出现冲突时优先break
            NSLayoutConstraint.constraintsWithVisualFormat(
                "H:|-10@250-[commentBtn(btnWidth)]-hp-[likeBtn(btnWidth)]-hp-[shareBtn(btnWidth)]-10@250-|", options: [], metrics: metrics, views: views),
            
            NSLayoutConstraint.constraintsWithVisualFormat(
                "V:|-0-[likeBtn]-0-|", options: [], metrics: nil, views: views),
            NSLayoutConstraint.constraintsWithVisualFormat(
                "V:|-0-[commentBtn]-0-|", options: [], metrics: nil, views: views),
            
            NSLayoutConstraint.constraintsWithVisualFormat(
                "V:|-0-[shareBtn]-0-|", options: [], metrics: nil, views: views)
            
            ].flatten().map{$0})
    
    }

    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

你可能感兴趣的:(自己customize的底部控件)