自定制按鈕

第一種:視頻清晰度切換器

• 目的就是做一個(gè)能根據(jù)獲得的清晰度個(gè)數(shù)封裝的一個(gè)切換按鈕.

講解:

第一點(diǎn):定義一個(gè)items數(shù)組,通過(guò)外部傳入的視頻個(gè)數(shù),創(chuàng)建對(duì)應(yīng)的按鈕,給每一個(gè)按鈕添加對(duì)應(yīng)的時(shí)間,每個(gè)按鈕都有tag值,每個(gè)按鈕的方法需要對(duì)應(yīng)的按鈕參數(shù).用來(lái)實(shí)現(xiàn)按鈕選中狀態(tài)的切換

var items:[String]? = nil {
        didSet {
            for i in 0...items!.count-1 {
                let button = UIButton()
                button.frame = CGRectMake(0, CGFloat(i)*segementHeaderHeight, self.frame.width-10, self.segementHeaderHeight)
                self.bottomView.addSubview(button)
                button.setTitle(items![i], forState: .Normal)
                button.addTarget(self, action: "buttonAction:", forControlEvents: .TouchDown)
                button.titleLabel?.font = UIFont.systemFontOfSize(14)
                button.setTitleColor(UIColor.whiteColor(), forState: .Normal)
                //設(shè)置tag值
                button.backgroundColor = UIColor.RGBColor(40, G: 45, B: 45, A: 0.8)
                button.tag = i+100
                if i == 0 {
                    button.setTitleColor(backYellowColor, forState: .Normal)
                    selectedIndex = button.tag
                }
            }
        }
    }

第二點(diǎn):通過(guò)協(xié)議通知外部按鈕狀態(tài)的改變,協(xié)議我這里只傳出了一個(gè)參數(shù),那就是哪一個(gè)按鈕被選中了.外部的控制器通過(guò)這個(gè)值做出對(duì)應(yīng)的改變

protocol changePlayViewDelegate {
    func changePlay(selectedIndex:Int)
}
// 按鈕的點(diǎn)擊方法
func buttonAction(button:UIButton) {
//        print(button.tag)
//        print("點(diǎn)擊")
        let tButton = self.bottomView.viewWithTag(selectedIndex) as! UIButton
        tButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        button.setTitleColor(backYellowColor, forState: .Normal)
        self.selectedIndex = button.tag
        apper = true
        let title = button.titleLabel?.text
        self.topButton.setTitle(title, forState: .Normal)
        // 傳出不同的按鈕值
        self.delegate?.changePlay(self.selectedIndex-99)
    }
    // 外部通過(guò)不同的值做出對(duì)應(yīng)的改變

圖片展示

屏幕快照 2016-11-07 下午7.19.11.png

詳細(xì)代碼

import UIKit

protocol changePlayViewDelegate {
    func changePlay(selectedIndex:Int)
}

class ChangButton: UIView {
    var delegate:changePlayViewDelegate? = nil
    
    var segementHeaderHeight:CGFloat = 25
    
    var selectedIndex = -1
    
    var topLeftView = UIView()
    let imageView = UIImageView.init(image: UIImage.init(named: "rotation"))
    
    var items:[String]? = nil {
        didSet {
            for i in 0...items!.count-1 {
                let button = UIButton()
                button.frame = CGRectMake(0, CGFloat(i)*segementHeaderHeight, self.frame.width-10, self.segementHeaderHeight)
                self.bottomView.addSubview(button)
                button.setTitle(items![i], forState: .Normal)
                button.addTarget(self, action: "buttonAction:", forControlEvents: .TouchDown)
                button.titleLabel?.font = UIFont.systemFontOfSize(14)
                button.setTitleColor(UIColor.whiteColor(), forState: .Normal)
                //設(shè)置tag值
                button.backgroundColor = UIColor.RGBColor(40, G: 45, B: 45, A: 0.8)
                button.tag = i+100
                if i == 0 {
                    button.setTitleColor(backYellowColor, forState: .Normal)
                    selectedIndex = button.tag
                }
            }
        }
    }
    let topButton = UIButton.init()
    let bottomView = UIView()
    
    // 1.出現(xiàn)屬性
    
    var apper = true {
        didSet {
            self.bottomView.hidden = apper
            if apper == false {
                imageView.frame = CGRectMake(0,self.segementHeaderHeight/2-8, 7, 7)
                self.imageView.transform = CGAffineTransformMakeRotation(0)
            }
            else {
                imageView.frame = CGRectMake(0,self.segementHeaderHeight/2, 7, 7)
                self.imageView.transform = CGAffineTransformMakeRotation(CGFloat(M_PI))
            }
        }
    }
    // 2.toptitle
    var topTitle = "高清" 
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.addSubview(topLeftView)
        self.topLeftView.backgroundColor = UIColor.RGBColor(40, G: 45, B: 45, A: 0.8)
        self.topLeftView.addSubview(imageView)
        
        self.addSubview(topButton)
        self.topButton.titleLabel?.font = UIFont.systemFontOfSize(14)
        self.topButton.backgroundColor = UIColor.RGBColor(40, G: 45, B: 45, A: 0.8)
        topButton.addTarget(self, action: "topAction", forControlEvents: .TouchDown)
        self.topButton.setTitle(topTitle, forState: .Normal)
        self.addSubview(bottomView)
        
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let leftX:CGFloat = self.frame.size.width-10
        let leftY:CGFloat = 0
        let leftH:CGFloat = self.segementHeaderHeight
        let leftW:CGFloat = 10
        self.topLeftView.frame = CGRectMake(leftX, leftY, leftW, leftH)
        imageView.frame = CGRectMake(0,leftH/2, 8, 8)
        self.imageView.transform = CGAffineTransformMakeRotation(CGFloat(M_PI))
        
        
        let topX:CGFloat = 0
        let topY:CGFloat = 0
        let topW = self.frame.size.width-10
        let topH = self.segementHeaderHeight
        self.topButton.frame = CGRectMake(topX, topY, topW, topH)
        
        let bmX:CGFloat = 0
        let bmY = topH
        let bmW = self.frame.size.width-10
        self.bottomView.frame = CGRectMake(bmX, bmY, bmW, CGFloat(self.items!.count)*self.segementHeaderHeight)
        self.bottomView.backgroundColor = UIColor.grayColor()
        self.bottomView.hidden = true
       
    }
}

extension ChangButton {
    func buttonAction(button:UIButton) {
//        print(button.tag)
//        print("點(diǎn)擊")
        let tButton = self.bottomView.viewWithTag(selectedIndex) as! UIButton
        tButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        button.setTitleColor(backYellowColor, forState: .Normal)
        self.selectedIndex = button.tag
        apper = true
        let title = button.titleLabel?.text
        self.topButton.setTitle(title, forState: .Normal)
        self.delegate?.changePlay(self.selectedIndex-99)
    }
    func topAction(){
        if apper {
            apper = false
        }
        else {
            apper = true
        }
    }
}

第二種:分段選擇器

講解

第一點(diǎn):定義當(dāng)前被選中按鈕的下標(biāo),外部通過(guò)識(shí)別不同的下標(biāo)來(lái)改變不同的控制器或者View,我在這里采用了willSet來(lái)監(jiān)測(cè)上一個(gè)選中的按鈕,當(dāng)發(fā)生切換時(shí)候,先將原來(lái)的按鈕變成非選中狀態(tài),并別將字體變小,顏色變成需求的顏色.采用didSet將下方滑條做一個(gè)形變.

var selectedSegmentIndex = 0 {
        willSet {
            // 1.先將原來(lái)選中的按鈕變成非選中狀態(tài)
            let btn1 = self.viewWithTag(BtnTag + selectedSegmentIndex) as! UIButton
            btn1.selected = false
            btn1.titleLabel?.font = self.normalFont
            
            let btn2 = self.viewWithTag(BtnTag + newValue) as! UIButton
            btn2.selected = true
            btn2.titleLabel?.font = self.selectedFont
            
        }
        didSet {
            UIView.animateWithDuration(0.2) {
                
                self.slider.frame.origin.x = CGFloat(self.selectedSegmentIndex) * self.slider.frame.size.width
            }
        }
    }

第二點(diǎn):

外部使用的時(shí)候采用的方法,通過(guò)不同的SelectedSegmentIndex來(lái)改變scrollview的便宜量,和通過(guò)ScrollView的偏移量來(lái)改變segment的selectedSegmentIndex,在協(xié)議上我自己做了一個(gè)區(qū)別

 //停止?jié)L動(dòng)
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        if scrollView == self.scrollView {
            self.segment.selectedSegmentIndex = Int(scrollView.contentOffset.x/Screen_W)
        }
        
    }
    //MARK: - segment點(diǎn)擊方法
    func segmentAction(segment:ZHSegmentControl) {
        self.scrollView.contentOffset = CGPointMake(Screen_W * CGFloat(segment.selectedSegmentIndex), 0)
    }

圖片展示

Simulator Screen Shot 2016年11月7日 下午8.55.34.png

Simulator Screen Shot 2016年11月7日 下午8.55.33.png

Simulator Screen Shot 2016年11月7日 下午8.55.32.png

詳情

import UIKit
let BtnTag = 100

class ZHSegmentControl: UIView {

    //MARK: - 屬性
    ///1.當(dāng)前被選中的按鈕的下標(biāo)
    var selectedSegmentIndex = 0 {
        willSet {
            // 1.先將原來(lái)選中的按鈕變成非選中狀態(tài)
            let btn1 = self.viewWithTag(BtnTag + selectedSegmentIndex) as! UIButton
            btn1.selected = false
            btn1.titleLabel?.font = self.normalFont
            
            let btn2 = self.viewWithTag(BtnTag + newValue) as! UIButton
            btn2.selected = true
            btn2.titleLabel?.font = self.selectedFont
            
        }
        didSet {
            UIView.animateWithDuration(0.2) {
                
                self.slider.frame.origin.x = CGFloat(self.selectedSegmentIndex) * self.slider.frame.size.width
            }
        }
    }
    ///2.文字選中的顏色
    var titleSelectedColor = UIColor.blueColor(){
        
        didSet{
            
            //更新滑塊的背景顏色
            self.slider.backgroundColor = self.sliderColor
            
            for item in self.subviews {
                
                if item.tag >= BtnTag {
                    let btn = item as! UIButton
                    //改變按鈕的文字顏色
                    btn.setTitleColor(self.titleSelectedColor, forState: .Selected)
                }
            }
            
        }
    }
    
    ///3.文字顏色
    var titleColor = UIColor.blackColor(){
        
        //每次從外部給titleColor屬性賦值的時(shí)候，都需要用最新的titleColor的值去更新按鈕的文字顏色
        didSet{
            
            for item in self.subviews {
                if item.tag >= BtnTag {
                    let btn = item as! UIButton
                    //改變按鈕的文字顏色
                    btn.setTitleColor(self.titleColor, forState: .Normal)
                }
            }
            
        }
    }

    ///4.items
    private var items:[String]
    ///5.滑塊
    private var slider = UIView()
    
    ///6.保存target
    private var target: AnyObject? = nil
    ///7.保存action
    private var action: Selector? = nil
    ///8.選中的字體
    var selectedFont = UIFont.boldSystemFontOfSize(14)
    ///9.非選中的字體
    var normalFont = UIFont.systemFontOfSize(13)
    ///10.滑塊的顏色
    var sliderColor = UIColor.whiteColor()
    ///11.滑塊的高度
    var sliderHeight:CGFloat = 2
    ///12.分界線
    let lineView1 = UIView()
    let lineView2 = UIView()
    
    init(items:[String]) {
        self.items = items
        super.init(frame: CGRectZero)
        self.creatSubView()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension ZHSegmentControl {
    
    func addTarget(target: AnyObject?,action: Selector?) {
        self.target = target
        self.action = action
    }
}

extension ZHSegmentControl {
    func creatSubView() {
        for (i,item) in self.items.enumerate() {
            let btn = UIButton.init()
            btn.setTitle(item, forState: .Normal)
            btn.tag = BtnTag + i
            btn.setTitleColor(self.titleColor, forState: .Normal)
            btn.setTitleColor(self.titleSelectedColor, forState: .Selected)
            if i == 0 {
                btn.selected = true
            }
            btn.addTarget(self, action: "btnAction:", forControlEvents: .TouchDown)
            self.addSubview(btn)
        }
        self.slider.backgroundColor = self.titleSelectedColor
        self.addSubview(self.slider)
        self.addSubview(lineView1)
        self.addSubview(lineView2)
    }
}

extension ZHSegmentControl {
    func btnAction(btn:UIButton) {
        if self.selectedSegmentIndex != btn.tag - BtnTag {
            self.selectedSegmentIndex = btn.tag - BtnTag
            
            if self.target != nil {
                self.target?.performSelector(self.action!, withObject: self)
            }
        }
    }
}

extension ZHSegmentControl {
    override func layoutSubviews() {
        super.layoutSubviews()
        let segementW = self.frame.size.width
        let segementH = self.frame.size.height
        let btnW = segementW/CGFloat(self.items.count)
        let btnH = segementH
        let btnY:CGFloat = 0
        var i:CGFloat = 0
        for item in self.subviews {
            if item.tag >= BtnTag {
                let btn = item as! UIButton
                let btnX = i * btnW
                item.frame = CGRectMake(btnX, btnY, btnW, btnH)
                if btn.selected {
                    btn.titleLabel?.font = self.selectedFont
                }
                else {
                    btn.titleLabel?.font = self.normalFont
                }
                i += 1
            }
        }
        
        let sliderX = CGFloat(self.selectedSegmentIndex) * btnW
        let sliderH:CGFloat = self.sliderHeight
        let sliderY = segementH - sliderH
        let sliderW = btnW
        self.slider.frame = CGRectMake(sliderX, sliderY, sliderW, sliderH)
        self.slider.backgroundColor = self.sliderColor
        
        // 分界線
        self.lineView1.frame = CGRectMake(0, 0, Screen_W, 1)
        self.lineView2.frame = CGRectMake(0, segementH - 1, Screen_W, 1)
        self.lineView1.backgroundColor = UIColor.RGBColor(248, G: 158, B: 49, A: 0.3)
        self.lineView2.backgroundColor = UIColor.RGBColor(248, G: 158, B: 49, A: 0.3)
    }
}