Как размыть фон сегментированного элемента управления?

Question

Я определяю сегментированный элемент управления внутри tableView(_:viewForHeaderInSection:) UITableViewDelegate. Поскольку я использую UITableView.Style.plain, при прокрутке таблицы заголовок с сегментированным элементом управления остается в фиксированной позиции.

Я хотел бы создать некоторый контекст, чтобы фон невыбранного сегментированного элемента управления размылся стол, который прокручивается за ним. Вот как выглядит ios 13 сегментированный элемент управления:

Можно ли размыть фон невыделенных сегментов сегментированного элемента управления?

Я могу создать сегментированный элемент управления вот так

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

И я могу создать размытие с помощью этого { ссылка }

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

Но я не знаю, как собрать все вместе

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

Answer 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
}