How to blur the background of a segmented control?

Question

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.

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

And I'm able to create a blur with this 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

Just a guess, but probably not. You mention iOS 13 in your question... does that imply that you can do this in iOS 12 and older? — , Jan 21 '20 at 06:28
@dfd - I just mentioned it because segmented controls look different in ios 13 vs 12. I wasn't implying that this can only be done in later version. — user784637, Jan 21 '20 at 06:48
Please check this url, If you want like that blur. you can add easily.https://imgur.com/QdupT6e — Abdul Hoque Nuri, Feb 05 '20 at 05:16
No I was looking for a blur effect to give context of the tableview scrolling — user784637, Feb 07 '20 at 01:43

score 2 · Answer 1 · edited Aug 23 '22 at 14:50

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.

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.

enter image description here

Approach demo code:

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

score 0 · Answer 2 · answered Feb 05 '20 at 12:00

You can use the below tableView delegates to create custom header view.

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
}

How to blur the background of a segmented control?

2 Answers2