swift 下拉框

作者: 呦释原点 | 来源:发表于2018-09-19 19:02 被阅读253次

前言

经过激烈的斗争，终于新项目使用Swift开发了。
开发几天之后，发现我更喜欢Swift了，毕竟这是第一个正在用Swift开始项目，既然开始了，我想让项目是一个纯纯的Swift编码，毕竟混编还是比较消耗性能的。

需求

要弄一个下拉框，样式也没有硬性要求，图上的下拉框带三角类似于这样

样式图

准备

第一感觉，最烦这种下拉框了
第二感觉，以前项目中添加过下拉框，可以拿来用，嘿嘿嘿
第三感觉，以前的项目时OC 的。。。。
那就改成Swift的吧

动手


import UIKit


class LZXPellTableViewSelect: UIView {
    
    var selecctData: [String]?
    var action: ((_ index: Int) -> ())?
    var imagesData: [String]?
    
    static var backgroundView: LZXPellTableViewSelect?
    static var tableView:UITableView?
    

    
    class func addPellView(frame:CGRect, selectData: Array<Any>, images: Array<String>, animate:Bool, action:@escaping ((_ index: Int)->())) {
        
        if backgroundView != nil {
            hidden()
        }
        
        let win:UIWindow = UIApplication.shared.keyWindow!
        backgroundView = LZXPellTableViewSelect(frame: win.bounds)
        backgroundView?.action = action
        backgroundView?.imagesData = images
        backgroundView?.selecctData = selectData as? [String]
        backgroundView?.backgroundColor = UIColor(hue: 0, saturation: 0, brightness: 0, alpha: 0.4)
        
        win.addSubview(backgroundView!)
        
        tableView = UITableView(frame: CGRect(x: UIScreen.main.bounds.width - frame.size.width + (frame.size.width/2.0), y: 64.0 - (40.0 * CGFloat(selectData.count)/2.0), width: frame.size.width, height: 40.0 * CGFloat(selectData.count)), style: .plain)
        
        tableView?.dataSource = backgroundView
        tableView?.delegate = backgroundView
        tableView?.layer.cornerRadius = 6
        // 锚点
        tableView?.layer.anchorPoint = CGPoint(x: 1.0, y: 0)
        tableView?.transform = CGAffineTransform(scaleX: 0.00001, y: 0.00001)
        tableView?.rowHeight = 40
        win.addSubview(tableView!)
        
        let tap:UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(tapbackgroundClick))
        backgroundView?.addGestureRecognizer(tap)
        backgroundView?.action = action
        backgroundView?.selecctData = (selectData as! [String])
        
        if animate {
            backgroundView?.alpha = 0
            UIView.animate(withDuration: 0.3) {
                backgroundView?.alpha = 0.5
                tableView?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
            }
        }
    }

    class func hidden() {
        if backgroundView != nil {
            UIView.animate(withDuration: 0.3, animations: {
                tableView?.transform = CGAffineTransform(scaleX: 0.00001, y: 0.00001)
            }) { (finished) in
                backgroundView?.removeFromSuperview()
                tableView?.removeFromSuperview()
                tableView = nil
                backgroundView = nil
            }
        }
    }
    
    @objc class func tapbackgroundClick() {
        hidden()
    }
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

let LZXPellTableViewSelectIdentifier = "LZXPellTableViewSelectIdentifier"
extension LZXPellTableViewSelect: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return (selecctData?.count)!
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        var cell = tableView.dequeueReusableCell(withIdentifier: LZXPellTableViewSelectIdentifier)
        if cell == nil {
            cell = UITableViewCell(style: .default, reuseIdentifier: LZXPellTableViewSelectIdentifier)
        }
        if (imagesData?.count)! > 0 {
            cell?.imageView?.image = UIImage(named: imagesData![indexPath.row])
        }
        
        cell?.textLabel?.text = selecctData?[indexPath.row]
        cell?.textLabel?.textAlignment = NSTextAlignment.center
        cell?.textLabel?.font = UIFont.systemFont(ofSize: 15)
        cell?.textLabel?.textColor = UIColor(red: 51/255.0, green: 51/255.0, blue: 51/255.0, alpha: 1.0)
        
        return cell!
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        if (self.action != nil) {
            self.action!(indexPath.row)
        }
        LZXPellTableViewSelect.hidden()
    }
}

动手是最简单的一件事

结果

遗憾：忘了小三角了，后续补

感想

有点饿了，嘿嘿嘿额

续

1.添加三角后的效果，缩放效果也不错哦，缩小到三角的位置了

带三角

2.源码

import UIKit
class LZXPellBgView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.clear
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let startPoint = CGPoint(x: frame.size.width - 36.0, y:8.0)
        let middlePoint = CGPoint(x: frame.size.width - 24.0 , y:0)
        let endPoint = CGPoint(x: frame.size.width - 16 , y:8.0)
        
        let context:CGContext = UIGraphicsGetCurrentContext()!
        context.beginPath()
        context.move(to: startPoint)
        context.addLine(to: middlePoint)
        context.addLine(to: endPoint)
        context.closePath()
        context.setFillColor(UIColor.white.cgColor)
        context.setStrokeColor(UIColor.white.cgColor)
        context.drawPath(using: .fillStroke)
        
        
    }
}


class LZXPellTableViewSelect: UIView {
    
    var selecctData: [String]?
    var action: ((_ index: Int) -> ())?
    var imagesData: [String]?
    
    static var bgView: LZXPellBgView?
    
    static var backgroundView: LZXPellTableViewSelect?
    static var tableView:UITableView?
    

    
    class func addPellView(frame:CGRect, selectData: Array<Any>, images: Array<String>, animate:Bool, action:@escaping ((_ index: Int)->())) {
        
        if backgroundView != nil {
            hidden()
        }
        
        let win:UIWindow = UIApplication.shared.keyWindow!
        backgroundView = LZXPellTableViewSelect(frame: win.bounds)
        backgroundView?.action = action
        backgroundView?.imagesData = images
        backgroundView?.selecctData = selectData as? [String]
        backgroundView?.backgroundColor = UIColor(hue: 0, saturation: 0, brightness: 0, alpha: 0.4)
        
        win.addSubview(backgroundView!)
        
        
        bgView = LZXPellBgView(frame: CGRect(x: UIScreen.main.bounds.width - frame.size.width + (frame.size.width/2.0 - 24.0), y: kNavBarHeight - (40.0 * CGFloat(selectData.count)/2.0) - 3, width: frame.size.width, height: 40.0 * CGFloat(selectData.count) + 8))
        
        tableView = UITableView(frame: CGRect(x: 0, y: 8, width: frame.size.width, height: 40.0 * CGFloat(selectData.count)), style: .plain)
        tableView?.dataSource = backgroundView
        tableView?.delegate = backgroundView
        tableView?.layer.cornerRadius = 6
        tableView?.rowHeight = 40
        // 锚点

//        bgView?.layer.anchorPoint = CGPoint(x: 1.0, y: 0)
        bgView?.layer.anchorPoint = CGPoint(x: 1.0 - 24.0/(frame.size.width), y: 0)
        bgView?.transform = CGAffineTransform(scaleX: 0.00001, y: 0.00001)
        win.addSubview(bgView!)
        bgView?.addSubview(tableView!)
        
        let tap:UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(tapbackgroundClick))
        backgroundView?.addGestureRecognizer(tap)
        backgroundView?.action = action
        backgroundView?.selecctData = (selectData as! [String])
        
        if animate {
            backgroundView?.alpha = 0
            UIView.animate(withDuration: 0.3) {
                backgroundView?.alpha = 0.5
                bgView?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)

            }
        }
    }

    class func hidden() {
        if backgroundView != nil {
            UIView.animate(withDuration: 0.3, animations: {
                bgView?.transform = CGAffineTransform(scaleX: 0.00001, y: 0.00001)
            }) { (finished) in
                backgroundView?.removeFromSuperview()
                tableView?.removeFromSuperview()
                bgView?.removeFromSuperview()
                bgView = nil
                tableView = nil
                backgroundView = nil
            }
        }
    }
    
    @objc class func tapbackgroundClick() {
        hidden()
    }
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

let LZXPellTableViewSelectIdentifier = "LZXPellTableViewSelectIdentifier"
extension LZXPellTableViewSelect: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return (selecctData?.count)!
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        var cell = tableView.dequeueReusableCell(withIdentifier: LZXPellTableViewSelectIdentifier)
        if cell == nil {
            cell = UITableViewCell(style: .default, reuseIdentifier: LZXPellTableViewSelectIdentifier)
        }
        if (imagesData?.count)! > 0 {
            cell?.imageView?.image = UIImage(named: imagesData![indexPath.row])
        }
        
        cell?.textLabel?.text = selecctData?[indexPath.row]
        cell?.textLabel?.textAlignment = NSTextAlignment.center
        cell?.textLabel?.font = UIFont.systemFont(ofSize: 15)
        cell?.textLabel?.textColor = UIColor(red: 51/255.0, green: 51/255.0, blue: 51/255.0, alpha: 1.0)
        
        return cell!
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true)
        if (self.action != nil) {
            self.action!(indexPath.row)
        }
        LZXPellTableViewSelect.hidden()
    }
}

3.关于锚点 https://www.jianshu.com/p/0dfccd073ae0

屏幕快照 2018-09-20 11.07.01.png

swift 下拉框

前言

需求

准备

动手

结果

感想

续

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读