先上图:

Simulator Screen Shot - iPhone 8 - 2018-02-06 at 16.22.17.png

清空标签之后:

Simulator Screen Shot - iPhone 8 - 2018-02-06 at 16.25.12.png

代码：
BKSearchViewController.swift

class BKSearchViewController: UIViewController {
    
    // 引导搜索
    var guide: BKSearchGuideView!
    // 实时标签
    var mark: BKSearchNewMarkView!

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .groupTableViewBackground

        setupNavigationbar()
        setupSearchNewMarks()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        BKSearchNewMarkViewModel.totalWidth = 0.px
        BKSearchNewMarkViewModel.totalHeight = 0.px
        
    }
}


//MARK: ---------- 导航栏 ----------
extension BKSearchViewController: BKNavigationBarable {
    func setupNavigationbar() {
        guard let navBar = navigationController?.navigationBar else { return }
        let frame = CGRect(x: 0, y: 0,
                           width: BK_SCREEN_WIDTH,
                           height: BK_NAVBAR_HEIGHT(navBar.bounds.height))
        let nav = BKSearchNavigationBar(frame: frame)
        nav.delegate = self
        view.addSubview(nav)
    }
}


//MARK: ---------- 搜索导航引导层 ----------
extension BKSearchViewController {
    fileprivate func setupSearchGuideView() {
        guard let navBar = navigationController?.navigationBar else { return }
        guide = BKSearchGuideView()
        view.addSubview(guide)
        guide.snp.makeConstraints { make in
            make.top.equalTo(view).offset(BK_NAVBAR_HEIGHT(navBar.bounds.height))
            make.left.right.bottom.equalTo(view)
        }
    }
}


//MARK: ---------- 实时标签 ----------
extension BKSearchViewController: BKSearchNewMarkable {
    fileprivate func setupSearchNewMarks() {
        guard let navBar = navigationController?.navigationBar else { return }
        mark = BKSearchNewMarkView()
        mark.delegate = self
        view.addSubview(mark)
        mark.snp.makeConstraints { make in
            make.top.equalTo(view).offset(BK_NAVBAR_HEIGHT(navBar.bounds.height))
            make.left.right.bottom.equalTo(view)
        }
    }
    // 代理 清空标签
    func searchNewMarkClearMarks() {
        let alertController = UIAlertController(title: nil, message: "确定要清空标签吗?", preferredStyle: .alert)
        let okAction = UIAlertAction(title: "确定", style: .default) { [weak self] (action) in
            self?.mark.removeFromSuperview()
            self?.setupSearchGuideView()
        }
        alertController.addAction(okAction)
        alertController.addAction(UIAlertAction(title: "取消", style: .destructive, handler: nil))
        present(alertController, animated: true, completion: nil)
    }
}


//MARK: ---------- 搜索回调代理函数 ----------
extension BKSearchViewController: BKSearchNavigationBarable {
    func searchNavigationBarBack() {
        navigationController?.popViewController(animated: true)
    }
    func searchNavigationBarSearch(content: String) {
        print("正在搜索...")
    }
}

BKSearchViewModel.swift

//MARK: ---------- 搜索的导航栏 ----------
protocol BKSearchNavigationBarable: class {
    /// 返回
    func searchNavigationBarBack()
    /// 搜索
    func searchNavigationBarSearch(content: String)
}
class BKSearchNavigationBar: UIView {
    /// 返回按钮
    var backButton: UIButton!
    /// 搜索框
    var searchTextFiled: UITextField!
    /// 搜索按钮
    var searchButton: UIButton!
    /// 返回和搜索的代理
    var delegate: BKSearchNavigationBarable?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        
        // 返回按钮
        backButton = UIButton(type: .custom)
        backButton.setImage(#imageLiteral(resourceName: "icon_header_back"), for: .normal)
        backButton.setTitleColor(.darkGray, for: .normal)
        backButton.addTarget(self, action: #selector(backButtonPressed), for: .touchUpInside)
        backButton.imageEdgeInsets = BK_BACK_EDGEINSET
        addSubview(backButton)
        
        // 搜索按钮
        searchButton = UIButton(type: .custom)
        searchButton.setTitle("搜索", for: .normal)
        searchButton.setTitleColor(.darkGray, for: .normal)
        searchButton.titleLabel?.font = UIFont.systemFont(ofSize: 13.f)
        searchButton.addTarget(self, action: #selector(searchButtonPressed), for: .touchUpInside)
        addSubview(searchButton)
        
        // 搜索框
        let leftView = UIImageView(image: #imageLiteral(resourceName: "icon_header_search"))
        leftView.contentMode = .scaleAspectFit
        leftView.frame = CGRect(x: 10.px, y: 10.px,
                                width: frame.height-BK_STATUS_HEIGHT-15.px,
                                height: frame.height-BK_STATUS_HEIGHT-20.px)
        
        searchTextFiled = UITextField()
        searchTextFiled.backgroundColor = .groupTableViewBackground
        searchTextFiled.font = UIFont.systemFont(ofSize: 13.f)
        searchTextFiled.textColor = .lightGray
        searchTextFiled.textAlignment = .left
        searchTextFiled.layer.cornerRadius = (frame.height-BK_STATUS_HEIGHT-16.px)/2.px
        searchTextFiled.layer.masksToBounds = true
        searchTextFiled.placeholder = "搜索"
        searchTextFiled.leftView = leftView
        searchTextFiled.leftViewMode = .always
        addSubview(searchTextFiled)
        
        
        backButton.snp.makeConstraints { make in
            make.left.bottom.equalTo(self)
            make.width.height.equalTo(frame.height-BK_STATUS_HEIGHT)
        }
        
        searchButton.snp.makeConstraints { make in
            make.right.bottom.equalTo(self)
            make.width.height.equalTo(frame.height-BK_STATUS_HEIGHT)
        }
        
        searchTextFiled.snp.makeConstraints { make in
            make.left.equalTo(backButton.snp.right)
            make.right.equalTo(searchButton.snp.left).offset(-5.px)
            make.height.equalTo(frame.height-BK_STATUS_HEIGHT-16.px)
            make.bottom.equalTo(self).offset(-8.px)
        }
    }
    
    /// 点击返回按钮 返回到上一页
    @objc private func backButtonPressed() {
        guard let delegate = delegate else { return }
        delegate.searchNavigationBarBack()
    }
    
    /// 点击搜索按钮 开始进行内容搜索
    @objc private func searchButtonPressed() {
        guard let delegate = delegate else { return }
        if let content = searchTextFiled.text {
            if content.count > 0 {
                delegate.searchNavigationBarSearch(content: content)
            }
        }
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}


//MARK: ---------- 展示搜索的引导 文章 视频 自媒体 ----------
class BKSearchGuideView: UIView {
    /// 头
    var titleLable: UILabel!
    /// 引导内容层
    var guideView: UIView!
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // 头
        titleLable = UILabel()
        titleLable.text = "搜索感兴趣的内容"
        titleLable.textAlignment = .center
        titleLable.font = UIFont.systemFont(ofSize: 17.f)
        titleLable.textColor = .darkGray
        addSubview(titleLable)
        
        // 引导内容层
        guideView = UIView()
        addSubview(guideView)
        
        titleLable.snp.makeConstraints { make in
            make.top.equalTo(self).offset(40.px)
            make.left.right.equalTo(self)
            make.height.equalTo(17.px)
        }
        
        guideView.snp.makeConstraints { make in
            make.top.equalTo(titleLable.snp.bottom).offset(20.px)
            make.left.equalTo(self).offset(60.px)
            make.width.equalTo(BK_SCREEN_WIDTH-120.px)
            make.height.equalTo(80.px)
        }
        
        // 引导内容
        let width = (BK_SCREEN_WIDTH-120.px)/(BKSearchGuideViewModel.guideTitles.count).px
        for (i, v) in BKSearchGuideViewModel.guideTitles.enumerated() {
            let imageView = UIImageView(image: UIImage(named: BKSearchGuideViewModel.guideImages[i]))
            imageView.contentMode = .scaleAspectFit
            guideView.addSubview(imageView)
            
            let label = UILabel()
            label.text = v
            label.textColor = .lightGray
            label.font = UIFont.systemFont(ofSize: 15.f)
            label.textAlignment = .center
            guideView.addSubview(label)
            
            imageView.snp.makeConstraints { make in
                make.left.equalTo(guideView).offset(width*i.px)
                make.top.equalTo(guideView).offset(10.px)
                make.width.equalTo(width)
                make.height.equalTo(width-35.px)
            }
            
            label.snp.makeConstraints { make in
                make.left.equalTo(guideView).offset(width*i.px)
                make.width.equalTo(width)
                make.bottom.equalTo(guideView)
                make.height.equalTo(20.px)
            }
        }
        
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}


//MARK: ---------- 实时标签 ----------
protocol BKSearchNewMarkable: class {
    func searchNewMarkClearMarks()
}
class BKSearchNewMarkView: UIView {
    
    /// 标签底层View
    var markView: UIView!
    /// 清楚标签按钮
    var clearMarkButton: UIButton!
    /// 代理
    var delegate: BKSearchNewMarkable?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // 标签底层View
        markView = UIView()
        addSubview(markView)
        
        markView.snp.makeConstraints { make in
            make.top.equalTo(self).offset(20.px)
            make.left.equalTo(self).offset(10.px)
            make.right.equalTo(self).offset(-10.px)
            make.height.equalTo(200.px)
        }
        
        // 绘制实时标签
        var tempTotalWidth: CGFloat = 0.px
        BKSearchNewMarkViewModel.testNewMarks.forEach { value in
            let label = UILabel()
            label.text = value
            label.textAlignment = .center
            label.font = UIFont.systemFont(ofSize: 12.f)
            label.textColor = .lightGray
            label.backgroundColor = .white
            label.layer.cornerRadius = 10.px
            label.layer.masksToBounds = true
            markView.addSubview(label)
            
            let markWidth = BKSearchNewMarkViewModel.getLabelWidth(value.count)+10.px
            tempTotalWidth += markWidth
            if tempTotalWidth > (BK_SCREEN_WIDTH-20.px) {
                tempTotalWidth = markWidth
                BKSearchNewMarkViewModel.totalHeight += 30.px
                BKSearchNewMarkViewModel.totalWidth = 0.px
            }
            
            label.snp.makeConstraints { make in
                make.top.equalTo(markView).offset(BKSearchNewMarkViewModel.totalHeight)
                make.left.equalTo(markView).offset(BKSearchNewMarkViewModel.totalWidth)
                make.width.equalTo(BKSearchNewMarkViewModel.getLabelWidth(value.count))
                make.height.equalTo(20.px)
            }
            
            // 累加每行的总长度
            BKSearchNewMarkViewModel.totalWidth += markWidth
        }
        
        // 更新高度
        markView.snp.updateConstraints { make in
            make.height.equalTo(BKSearchNewMarkViewModel.totalHeight+20.px)
        }
        
        // 清除标签按钮
        clearMarkButton = UIButton(type: .custom)
        clearMarkButton.setTitle("清空标签", for: .normal)
        clearMarkButton.titleLabel?.font = UIFont.systemFont(ofSize: 13.f)
        clearMarkButton.setTitleColor(UIColor(32, 167, 250), for: .normal)
        clearMarkButton.addTarget(self, action: #selector(clearMarkButtonPressed), for: .touchUpInside)
        addSubview(clearMarkButton)
        
        clearMarkButton.snp.makeConstraints { make in
            make.centerX.equalTo(self)
            make.top.equalTo(markView.snp.bottom).offset(10.px)
            make.width.equalTo(100.px)
            make.height.equalTo(45.px)
        }
        
    }
    
    @objc private func clearMarkButtonPressed() {
        guard let delegate = delegate else { return }
        delegate.searchNewMarkClearMarks()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

BKSearchViewModel.swift

//MARK: ---------- 展示搜索的引导 文章 视频 自媒体 ----------
struct BKSearchGuideViewModel {
    /// 引导内容头
    static let guideTitles = ["文章", "视频", "自媒体"]
    /// 引导内容图片
    static let guideImages = ["icon_search_article", "icon_search_video", "icon_search_wemedia"]
}



//MARK: ---------- 实时标签 ----------
struct BKSearchNewMarkViewModel {
    /// 实时标签
    static let testNewMarks = ["还珠格格", "春运", "张学良",
                               "德云社相声", "水哥集锦", "水哥最强大脑",
                               "抖音短视频", "蜘蛛侠", "老梁说天下",
                               "郭德纲", "智行火车票", "58同城",
                               "快牙", "百词斩", "微博",
                               "虾米音乐", "淘宝大学", "千牛",
                               "阿里巴巴", "旺信", "工具",
                               "快手"]
    
    /// 一行的总长度
    static var totalWidth: CGFloat = 0.px
    /// 累加高度
    static var totalHeight: CGFloat = 0.px
    
    static func getLabelWidth(_ count: Int) -> CGFloat {
        switch count {
        case 1:
            return 40.px
        case 2:
            return 50.px
        case 3:
            return 60.px
        case 4:
            return 70.px
        case 5:
            return 80.px
        case 6:
            return 90.px
        default:
            return 100.px
        }
    }
}