美文网首页
iOS 自定义控件-搜索历史标签

iOS 自定义控件-搜索历史标签

作者: 今晚月色 | 来源:发表于2020-01-10 14:09 被阅读0次
    镇楼专用

    历史搜索标签列表,可以自适应高度。

    import UIKit
    
    @objc protocol WDTagsViewDelegate: NSObjectProtocol {
        /// 单个标签点击回调
        func tagsView(view: WDTagsView, didTappedAtIndex index: Int, didTappedAtText text: String) -> Void
    }
    
    class WDTagsView: UIView {
        // MARK: Public
        public weak var delegate: WDTagsViewDelegate?
        public var tagHeight: CGFloat          = 32 // 标签高度,默认为32
        public var viewHMargin: CGFloat        = 10 // 整体左右间距 默认为10
        public var viewVMargin: CGFloat        = 10 // 整体上下间距 默认为10
        public var tagInnerSpace: CGFloat      = 10 // 标签内部左右间距 默认为10
        public var tagHMargin: CGFloat         = 10 // 标签之间的水平间距 默认为10
        public var tagVMargin: CGFloat         = 5  // 标签之间的行间距 默认为5
        public var tagFont: UIFont             = .systemFont(ofSize: 14) // 标签字体 默认为5
        public var tagTextColor: UIColor       = .black // 标签字体颜色
        public var tagBackgroundColor: UIColor = UIColor(red: 0.95, green: 0.95, blue: 0.95, alpha: 1) // 标签背景颜色
        public var itemArray: Array<String> = Array() {
            didSet {
                setupViews()
            }
        }
    
        // MARK: Private
        private var tagsArray: Array<UIButton>  = Array()
    
        override init(frame: CGRect) {
            super.init(frame: frame)
        }
        
        func refreshView() {
            DispatchQueue.main.async {
                 self.setupViews()
            }
        }
        
        private func setupViews() {
            for v in self.subviews {
                v.removeFromSuperview()
            }
            tagsArray.removeAll()
            for (index, item) in itemArray.enumerated() {
                let b = UIButton()
                b.setTitle(item, for: .normal)
                b.setTitleColor(tagTextColor, for: .normal)
                b.titleLabel?.font = tagFont
                b.backgroundColor = tagBackgroundColor
                b.layer.cornerRadius = 10
                b.tag = index
                b.addTarget(self, action: #selector(buttonTargetAction(sender:)), for: .touchUpInside)
                addSubview(b)
                tagsArray.append(b)
            }
            layoutItems()
        }
    
        private func layoutItems() {
            var tagLineWidth   = viewHMargin                // 单行的总宽度
            let allWidth       = UIScreen.main.bounds.width // 默认为屏幕宽度
            var isChange: Bool = false                      // 是否需要换行
    
            var lastItem: UIButton!
            for index in 0..<tagsArray.count {
                let button = tagsArray[index]
                let tagTitle: NSString = itemArray[index] as NSString
                var tagWidth = tagTitle.boundingRect(with: CGSize(width: CGFloat(MAXFLOAT), height: tagHeight),
                                                     options: .usesLineFragmentOrigin,
                                                     attributes: [.font : tagFont],
                                                     context: nil).size.width + 2 * tagInnerSpace + 0.5
                tagLineWidth += (tagWidth + tagHMargin)
                if tagLineWidth > (allWidth - viewHMargin) {
                    isChange = true
                    if (tagWidth + 2 * tagHMargin) > allWidth {
                        tagWidth = allWidth - 2 * tagHMargin
                        button.titleEdgeInsets = UIEdgeInsets(top: 0, left: tagInnerSpace / 2, bottom: 0, right: tagInnerSpace / 2)
                    }
                    tagLineWidth = viewHMargin + tagWidth + tagHMargin
                }
                
                button.snp.makeConstraints { (make) in
                    make.height.equalTo(tagHeight)
                    make.width.equalTo(tagWidth)
                    if lastItem == nil {
                        make.top.equalTo(viewVMargin)
                        make.leading.equalTo(viewHMargin)
                    } else {
                        if isChange {
                            make.leading.equalTo(viewVMargin)
                            make.top.equalTo(lastItem.snp.bottom).offset(tagVMargin)
                            isChange = false
                        } else {
                            make.leading.equalTo(lastItem.snp.trailing).offset(tagHMargin)
                            make.top.equalTo(lastItem.snp.top)
                        }
                    }
                }
                lastItem = button
            }
            
            lastItem.snp.makeConstraints { (make) in
                make.bottom.equalTo(-viewVMargin).priority(.high)
            }
        }
        
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
        
        @objc private func buttonTargetAction(sender: UIButton) {
            delegate?.tagsView(view: self, didTappedAtIndex: sender.tag, didTappedAtText: itemArray[sender.tag])
        }
    }
    
    var tagsView: WDTagsView!
    
    /**页面添加,简单样式配置**/
    tagsView = WDTagsView()
    tagsView.delegate = self
    tagsView.tagTextColor = .black
    tagsView.tagFont = .systemFont(ofSize: 14)
    tagsView.backgroundColor = UIColor(red: 0.9, green: 0.9, blue: 0.9, alpha: 1)
    tagsView.tagHeight = 30
    tagsView.itemArray = ["手机", "电脑", "显卡", "主机", "啥啥", "我擦", "我是哦发生的活动开始对方擦", "我屮艸芔茻","手机", "电脑", "显卡", "主机", "啥啥", "我擦", "我屮艸芔茻","手机", "电脑", "显卡", "主机", "啥啥", "我擦", "我屮艸芔茻", "啥啥", "我擦", "我屮艸芔茻"]
    view.addSubview(tagsView)
    
    /**页面布局**/
    tagsView.snp.makeConstraints { (make) in    
        make.leading.top.trailing.equalToSuperview()
    }
    
    /**刷新实图**/
    tagsView.itemArray = ["手机", "电脑", "显卡", "主机"]
    tagsView.refreshView()
    
    效果图

    相关文章

      网友评论

          本文标题:iOS 自定义控件-搜索历史标签

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