iOS-swift自定義控件下拉框

1.控件如圖:

8DE5812A-BDA1-45FF-A02B-C2EEE1C72E62.png

CEA0CB94-56D7-4760-8949-B7EA98F13AC0.png

2.控件組成:

一個(gè)label和一個(gè)button 組成控件的主界面,2個(gè)view ,一個(gè)是彈出視圖,一個(gè)是蒙板。

3. 思路

我通過(guò)一個(gè)lable 和一個(gè)帶圖片的button 創(chuàng)建 主界面,在創(chuàng)建一個(gè)containview用于顯示要選擇的內(nèi)容文本,通過(guò)一個(gè)蒙板 來(lái)實(shí)現(xiàn)點(diǎn)擊 控件外的區(qū)域?qū)崿F(xiàn) 收起下拉視圖。
#4.代碼如下
import UIKit

//屏幕的寬和高 用于構(gòu)建蒙板
let DeviceWidth = UIScreen.main.bounds.size.width
let DeviceHeight = UIScreen.main.bounds.size.height

class FLLSelectBox: UIView {

    var selectBoxLabel: UILabel!
    var coverView: UIView!
    var containView: UIView!
    var titles: [String] = []
    var containViewHeight = CGFloat(0)
    var isPullDown = false

    init(frame: CGRect,titles: [String]) {
        self.titles = titles
        super.init(frame: frame)
        self.layer.borderWidth = 2
        self.layer.borderColor = UIColor.blue.cgColor
        initView()
    }

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

    //初始化視圖
    func initView() {
    
        let width = self.frame.size.width
        let height = self.frame.size.height
        selectBoxLabel = UILabel(frame: CGRect(x: 0.1 * width, y: 0, width: 0.5 * width , height: height ))
        selectBoxLabel.text = titles[0]
        let selectBoxBtn = UIButton(frame: CGRect(x: 0.7 * width, y: 0, width: 0.3 * width, height: height))
        selectBoxBtn.backgroundColor = UIColor.blue
        selectBoxBtn.setImage(UIImage(named: "selectBox1"), for: .normal)
        selectBoxBtn.addTarget(self, action: #selector(self.showContainView), for: .touchUpInside)
        self.addSubview(selectBoxLabel)
        self.addSubview(selectBoxBtn)
    
        containViewHeight = height * CGFloat(titles.count)
        containView =  UIView(frame: CGRect(x: self.frame.origin.x, y: self.frame.origin.y + height, width: self.frame.size.width, height: containViewHeight))
        containView.layer.borderWidth = 2
        containView.layer.borderColor = UIColor.blue.cgColor
        containView.backgroundColor = UIColor.lightGray
    
        for i in 0..<titles.count {
        
            let containLabel = UILabel(frame: CGRect(x: 0.1 * width, y: CGFloat(i) * height, width: 0.9 * width, height: height))
            containLabel.isUserInteractionEnabled = true
            containLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.selectLableEvent(recognizer:))))
            containLabel.text = titles[i]
            containLabel.tag = 1000 + i
            containView.addSubview(containLabel)
        }
    
        coverView = UIView(frame: CGRect(x: 0, y: 0, width: DeviceWidth, height: DeviceHeight))
        coverView.backgroundColor = UIColor.clear
    coverView.addGestureRecognizer(UITapGestureRecognizer(target: self, action:     #selector(self.pullUpEvent(recognizer:))))
        coverView.isUserInteractionEnabled = true
        coverView.addSubview(containView)

    }
    //彈出下拉視圖
    func showContainView() {

        isPullDown = !isPullDown
        if isPullDown {

            self.superview?.addSubview(coverView)
            //self.superview?.addSubview(containView)
        
        } else {
            coverView.removeFromSuperview()
        
        }
    
    }

    // 通過(guò)手勢(shì)選中下拉視圖中的一項(xiàng)內(nèi)容時(shí)觸發(fā)該事件
    func selectLableEvent (recognizer:     UIGestureRecognizer) {
        guard let tag = recognizer.view?.tag else {
            return
        }
        for i in 0..<titles.count {
            if i == tag - 1000 {
                selectBoxLabel.text = titles[i]
            }
        }
    
        coverView.removeFromSuperview()
    }

    //收起下拉視圖
    func pullUpEvent(recognizer: UIGestureRecognizer) {
        coverView.removeFromSuperview()
    
    }

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容