Swift: 自定义左右滑动选择,点击选择,内容选择

序言: 需求是从数组中选择内容,需要可左右滑动选择,可点击选择,并且对选择的内容高亮显示和展示,且在需要时多个数组的数据进行联动选择。

  • 满足这样的需求,比较简单的实现就是UIButton和UIScrollview的运用。

以下效果也是基于类似的思路实现:


2.gif
show the code
///pickerView Datasoure protocol
protocol THPickerDelegate {
    
    func number(ofItems pickerView: THPickViewer) -> Int
    
    func pickerView(_ pickerView: THPickViewer, itemForIndex index: Int) -> String
    
    func pickerView(_ pickerView: THPickViewer, didSelect index: Int) -> ()
}

///pickerView
class THPickViewer: UIScrollView {
    
    var datasource: THPickerDelegate?
    
    var selectedIndex: Int = 0

    var itemWidth: CGFloat = 0
    
    private var items: Array<String>?
    
    private var itemHeight: CGFloat = 0
    
    init(_ frame: CGRect, layout count: Int, select selectedIndex: Int) {
        super.init(frame: frame)
        
        self.items = Array.init()
        
        itemWidth = self.bounds.size.width/CGFloat(count)
        
        itemHeight = self.bounds.size.height
        
        self.selectedIndex = selectedIndex
        
        self.showsVerticalScrollIndicator = false
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setUpPickerContents() -> () {
        
        if (self.items?.count)! > 0 {
            self.items?.removeAll()
            for btn in self.subviews {
                btn.removeFromSuperview()
            }
        }
        
        let count = self.datasource?.number(ofItems: self)
        
        for i in 0..<count! {
            let title = self.datasource?.pickerView(self, itemForIndex: i)
            self.items?.append(title!)
            
            let btn = UIButton.init(frame: CGRect.init(x: CGFloat.init(i) * itemWidth + itemWidth, y: 0, width: itemWidth, height: itemHeight))
            btn.tag = i
            btn.setTitle(title, for: .normal)
            btn.addTarget(self, action: #selector(clickItemAction(_:)), for: .touchUpInside)
            if i == self.selectedIndex {
                btn.setTitleColor(UIColor.Color(WithHex: 0x418eff), for: .normal)
                btn.titleLabel?.font = UIFont.PingFangSC(with: UIFont.PingFangType.PingFangSCMedium, size: 26)
            }else {
                btn.setTitleColor(UIColor.Color(WithHex: 0x999999), for: .normal)
                btn.titleLabel?.font = UIFont.PingFangSC(with: UIFont.PingFangType.PingFangSCMedium, size: 18)
                
            }
            self.addSubview(btn)
        }
        
        self.contentMode = .scaleAspectFit
        self.contentSize = CGSize.init(width: (CGFloat.init(count!)+2)*itemWidth, height: itemHeight)
        
        let offPoint = CGPoint.init(x: (CGFloat.init(self.selectedIndex+1) * itemWidth)-(self.bounds.size.width-self.itemWidth)/2, y: 0)
        self.setContentOffset(offPoint, animated: true)
        
    }
    
    func selectIndexAnimation(WithIndex selectColume: Int, offect offPoint: CGPoint) -> () {
        self.selectedIndex = selectColume
        setUpPickerContents()
        self.setContentOffset(offPoint, animated: true)
    }
    
    @objc private func clickItemAction(_ sender: UIButton) -> () {
        let index = sender.tag
        let offPoint = CGPoint.init(x: (CGFloat.init(index+1) * itemWidth)-(self.bounds.size.width-self.itemWidth)/2, y: 0)
        self.selectIndexAnimation(WithIndex: index, offect: offPoint)
        self.datasource?.pickerView(self, didSelect: index+1)
    }

    /*
     // Only override draw() if you perform custom drawing.
     // An empty implementation adversely affects performance during animation.
     override func draw(_ rect: CGRect) {
     // Drawing code
     }
     */
    
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,252评论 4 61
  • 在这样一个阴阴的周日下午,不午睡,喝着普洱茶看完一部轻松温暖的电影,真是十分美好的事情。 有时候我总会想起XZQ老...
    Miss_Sissi阅读 339评论 0 1
  • 夜里梦到吃鸡肉卷,加了两个蛋。醒来好想吃垃圾食品,披萨、鸡排、奶茶、翅根挑了大半天准备下单付钱之时我的右腮帮开始隐...
    鯊骑马阅读 238评论 1 0
  • 《红玫瑰与白玫瑰》虽然表面上讲述了只是振保和红玫瑰、白玫瑰之间的爱情故事,但是,却鲜明地反映了那个时代女性地...
    美文888阅读 525评论 0 0