美文网首页
自己customize的底部控件

自己customize的底部控件

作者: ZhouMac | 来源:发表于2016-06-03 14:19 被阅读85次

    自己实现的一个底部控件

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


    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的底部控件

          本文链接:https://www.haomeiwen.com/subject/iwzkdttx.html