如何模糊分段控件的背景? [英] How to blur the background of a segmented control?

问题描述

我正在UITableViewDelegate的 tableView(_:viewForHeaderInSection:)内定义分段控件.由于我使用的是 UITableView.Style.plain ，因此当表格滚动时，带有分段控件的标题将保持在固定位置.

I'm defining a segmented control inside of a UITableViewDelegate's tableView(_:viewForHeaderInSection:). Since I'm using UITableView.Style.plain, when the table scrolls, the header with the segmented control stays in a fixed position.

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

I'd like to create some context so that the background of the unselected segmented control blurs the table that is scrolling behind it. Here is what an ios 13 segmented control looks like:

是否有一种方法可以模糊分段控件未选择的分段的背景?

Is there a way to blur the background of a segmented control's unselected segments?

我能够创建这样的分段控件

I'm able to created a segmented control like this

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]

但我不知道如何将所有内容整合在一起

But I don't know how to bring everything together

推荐答案

这是一种可行的方法...这个想法是将模糊效果视图放在某些包装器视图中的分段控件后面，并将该视图提供为表的标题.

Here is possible approach... the idea is to place blur-effect view behind the segmented control in some wrapper view and provide that view as header for table.

这里是演示(仅使用我的一些设置就可以看到，但是这些都是可配置的)，当然gif对此不是很好，但是可见模糊效果有效.

Here is demo (how it looks with just some my settings, but those are all configurable), of course gif is not very good for this, but it is visible that blur effect works.

方法演示代码:

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")
    }
}

这篇关于如何模糊分段控件的背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！