如何模糊分段控件的背景？答案

【问题标题】：How to blur the background of a segmented control?如何模糊分段控件的背景？
【发布时间】：2020-02-05 20:00:21
【问题描述】：

我在 UITableViewDelegate 的tableView(_:viewForHeaderInSection:) 中定义了一个分段控件。由于我使用的是UITableView.Style.plain，所以当表格滚动时，带有分段控件的标题保持在固定位置。

我想创建一些上下文，以便未选择的分段控件的背景模糊在其后面滚动的表格。这是 ios 13 分段控件的外观：

有没有办法模糊分段控件的未选中段的背景？

我可以像这样创建分段控件

let items = ["First", "Second"]
let customSC = UISegmentedControl(items: items)
customSC.selectedSegmentIndex = 0

而且我可以用这个 https://stackoverflow.com/a/25706250/784637 来创建模糊效果

let blurEffect = UIBlurEffect(style: .dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
//always fill the view
blurEffectView.frame = self.view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

但我不知道如何把所有东西放在一起

【问题讨论】：

只是猜测，但可能不是。您在问题中提到了 iOS 13……这是否意味着您可以在 iOS 12 及更早版本中执行此操作？
@dfd - 我刚刚提到它是因为分段控件在 ios 13 和 12 中看起来不同。我并不是暗示这只能在以后的版本中完成。
请检查这个网址，如果你想要那样的模糊。您可以轻松添加。imgur.com/QdupT6e
不，我一直在寻找模糊效果来提供 tableview 滚动的上下文

标签： ios swift iphone

【解决方案1】：

这是一种可能的方法...想法是将模糊效果视图放置在某些包装视图中的分段控件后面，并将该视图作为表头提供。

这里是演示（只是我的一些设置看起来如何，但这些都是可配置的），当然 gif 不是很好，但可以看到模糊效果。

接近演示代码：

class HeaderView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)

        let blurEffect = UIBlurEffect(style: .dark) // .light looks better as for me, so used in demo
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.translatesAutoresizingMaskIntoConstraints = false

        let items = ["First", "Second"]
        let customSC = UISegmentedControl(items: items)
        customSC.selectedSegmentIndex = 0
        customSC.translatesAutoresizingMaskIntoConstraints = false

        self.addSubview(customSC)
        customSC.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
        customSC.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
        customSC.widthAnchor.constraint(equalToConstant: 200).isActive = true
        customSC.heightAnchor.constraint(equalToConstant: 60).isActive = true

        self.insertSubview(blurEffectView, belowSubview: customSC)
        blurEffectView.leadingAnchor.constraint(equalTo: customSC.leadingAnchor).isActive = true
        blurEffectView.trailingAnchor.constraint(equalTo: customSC.trailingAnchor).isActive = true
        blurEffectView.topAnchor.constraint(equalTo: customSC.topAnchor).isActive = true
        blurEffectView.bottomAnchor.constraint(equalTo: customSC.bottomAnchor).isActive = true
        blurEffectView.layer.cornerRadius = 8
        blurEffectView.layer.masksToBounds = true
    }

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

【讨论】：

【解决方案2】：

您可以使用下面的 tableView 委托来创建自定义标题视图。

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    //Create header view and add blur effect
    let headerView = UITableViewHeaderFooterView()
    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    headerView.backgroundView = blurEffectView

    //Add Segmented Control ot headerView
    let items = ["first", "second"]
    let segmentedControl = UISegmentedControl(items: items)
    segmentedControl.frame = CGRect(x: 0, y: 0, width: tableView.frame.width, height: 50)
    segmentedControl.backgroundColor = .clear
    segmentedControl.selectedSegmentIndex = 0
    segmentedControl.selectedSegmentTintColor = .red
    headerView.contentView.addSubview(segmentedControl)
    return headerView
}

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 50
}

【讨论】：