How to make a navigation bar like that of Bumble

Question

In mumble's Setting page there exists this navigation bar/tab bar that allows you to switch between profile and settings. Can you please give me an idea how I can imitate that in my app?

score 6 · Accepted Answer · answered Sep 03 '15 at 19:57

6

You can customize UINavigationItem's titleView property with custom view for starters. Adding UISegmentedControl to that custom view could be your solution.

answered Sep 03 '15 at 19:57

Sabrican Ozan

738
3
9

Thanks! UISegmentedControl is what I was looking for. Can you tell me what you mean by customizing UINavigationItem's titleView property? Is it more than removing the title and adding the segmented control at its position? – amir-f Sep 03 '15 at 20:08
1

Actually it isn't like that. You may check [here](http://stackoverflow.com/questions/8433016/customize-navigation-bar-with-title-view) You may add UISegmentedControl as a subview that you are gonna add to titleView. – Sabrican Ozan Sep 03 '15 at 20:12

score 1 · Answer 2 · answered Sep 03 '15 at 20:02

The UINavigationBar has 3 properties called leftBarButtonItem, rightBarButtonItem and titleView.

Create the leftBarButtonItem and rightBarButtonItem using [[UIBarButtonItem alloc] initWithCustomView:aCustomView].

For the titleView, you can use a UISegmentedControl, but if you want to achieve that kind of custom look you're going to have to implement your own segmented control.

score 0 · Answer 3 · answered Jun 06 '16 at 14:58

Just built this - check it out and let me know what you think.

import UIKit

class CDSlideView: UIView {

    var leftBackView: UIView!
    var leftBackLabel: UILabel!
    var leftFrontView: UIView!
    var leftFrontLabel: UILabel!

    var rightBackView: UIView!
    var rightBackLabel: UILabel!
    var rightFrontView: UIView!
    var rightFrontLabel: UILabel!

    var foregroundView: UIView!
    var backgroundView: UIView!

    var slideGesture: UIPanGestureRecognizer!

    let lightColor: UIColor = UIColor.whiteColor()
    let darkColor: UIColor = UIColor.blueColor()
    let leftText: String = "Search"
    let rightText: String = "New"

    var viewWidth: CGFloat!
    var viewHeight: CGFloat!
    var leftOrigin: CGFloat!
    var rightOrigin: CGFloat!
    var foregroundPadding: CGFloat = 4

    override init(frame: CGRect) {
        super.init(frame: frame)

        // Init variables variables
        viewWidth = self.frame.size.width
        viewHeight = self.frame.size.height
        leftOrigin = foregroundPadding / 2
        rightOrigin = (viewWidth - foregroundPadding) / 2 + foregroundPadding / 2

        backgroundView = UIView()
        backgroundView.frame = CGRectMake(0, 0, viewWidth, viewHeight)
        backgroundView.layer.cornerRadius = backgroundView.frame.size.height / 2
        self.addSubview(backgroundView)

        leftBackView = UIView()
        leftBackView.frame = CGRectMake(0, 0, backgroundView.frame.size.width / 2, backgroundView.frame.size.height)
        self.backgroundView.addSubview(leftBackView)

        leftBackLabel = UILabel()
        leftBackLabel.frame = CGRectMake(0, 0, leftBackView.frame.size.width, leftBackView.frame.size.height)
        leftBackLabel.font = UIFont.systemFontOfSize(13, weight: UIFontWeightSemibold)
        leftBackLabel.backgroundColor = UIColor.clearColor()
        leftBackLabel.lineBreakMode = .ByClipping
        leftBackLabel.textAlignment = .Center
        self.leftBackView.addSubview(leftBackLabel)

        rightBackView = UIView()
        rightBackView.frame = CGRectMake(backgroundView.frame.size.width / 2, 0, backgroundView.frame.size.width / 2, backgroundView.frame.size.height)
        self.backgroundView.addSubview(rightBackView)

        rightBackLabel = UILabel()
        rightBackLabel.frame = CGRectMake(0, 0, rightBackView.frame.size.width, rightBackView.frame.size.height)
        rightBackLabel.font = UIFont.systemFontOfSize(13, weight: UIFontWeightSemibold)
        rightBackLabel.backgroundColor = UIColor.clearColor()
        rightBackLabel.lineBreakMode = .ByClipping
        rightBackLabel.textAlignment = .Center
        self.rightBackView.addSubview(rightBackLabel)

        foregroundView = UIView()
        foregroundView.frame = CGRectMake(foregroundPadding / 2, foregroundPadding / 2, (backgroundView.frame.size.width - foregroundPadding) / 2, backgroundView.frame.size.height - foregroundPadding)
        foregroundView.clipsToBounds = true
        foregroundView.layer.cornerRadius = (foregroundView.frame.size.height - foregroundPadding / 2) / 2
        self.addSubview(foregroundView)

        slideGesture = UIPanGestureRecognizer(target: self, action: #selector(CDSlideView.slideAction))
        self.foregroundView.addGestureRecognizer(slideGesture)

        leftFrontView = UIView()
        leftFrontView.frame = CGRectMake(0, 0, backgroundView.frame.size.width / 2, backgroundView.frame.size.height)
        self.foregroundView.addSubview(leftFrontView)

        leftFrontLabel = UILabel()
        leftFrontLabel.font = UIFont.systemFontOfSize(13, weight: UIFontWeightSemibold)
        leftFrontLabel.backgroundColor = UIColor.clearColor()
        leftFrontLabel.translatesAutoresizingMaskIntoConstraints = false
        leftFrontLabel.lineBreakMode = .ByClipping
        leftFrontLabel.textAlignment = .Center
        self.leftFrontView.addSubview(leftFrontLabel)

        let leftFrontLabelLeadingConstraint = NSLayoutConstraint(item: leftFrontLabel, attribute: .Leading, relatedBy: .Equal, toItem: self, attribute: .Leading, multiplier: 1, constant: self.backgroundView.frame.origin.x)
        self.addConstraint(leftFrontLabelLeadingConstraint)

        let leftFrontLabelTopConstraint = NSLayoutConstraint(item: leftFrontLabel, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: self.backgroundView.frame.origin.y)
        self.addConstraint(leftFrontLabelTopConstraint)

        let leftFrontLabelWidthConstraint = NSLayoutConstraint(item: leftFrontLabel, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: leftFrontView.frame.size.width)
        self.addConstraint(leftFrontLabelWidthConstraint)

        let leftFrontLabelHeightConstraint = NSLayoutConstraint(item: leftFrontLabel, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: leftFrontView.frame.size.height)
        self.addConstraint(leftFrontLabelHeightConstraint)

        rightFrontView = UIView()
        rightFrontView.frame = CGRectMake(backgroundView.frame.size.width / 2, 0, backgroundView.frame.size.width / 2, backgroundView.frame.size.height)
        self.foregroundView.addSubview(rightFrontView)

        rightFrontLabel = UILabel()
        rightFrontLabel.font = UIFont.systemFontOfSize(13, weight: UIFontWeightSemibold)
        rightFrontLabel.backgroundColor = UIColor.clearColor()
        rightFrontLabel.translatesAutoresizingMaskIntoConstraints = false
        rightFrontLabel.lineBreakMode = .ByClipping
        rightFrontLabel.textAlignment = .Center
        self.rightFrontView.addSubview(rightFrontLabel)

        let rightFrontLabelTrailingConstraint = NSLayoutConstraint(item: self, attribute: .Trailing, relatedBy: .Equal, toItem: rightFrontLabel, attribute: .Trailing, multiplier: 1, constant: self.backgroundView.frame.origin.x)
        self.addConstraint(rightFrontLabelTrailingConstraint)

        let rightFrontLabelTopConstraint = NSLayoutConstraint(item: rightFrontLabel, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: self.backgroundView.frame.origin.y)
        self.addConstraint(rightFrontLabelTopConstraint)

        let rightFrontLabelWidthConstraint = NSLayoutConstraint(item: rightFrontLabel, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: rightFrontView.frame.size.width)
        self.addConstraint(rightFrontLabelWidthConstraint)

        let rightFrontLabelHeightConstraint = NSLayoutConstraint(item: rightFrontLabel, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: rightFrontView.frame.size.height)
        self.addConstraint(rightFrontLabelHeightConstraint)

        let leftTapGesture: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(CDSlideView.leftTap(_:)))
        self.leftBackView.addGestureRecognizer(leftTapGesture)

        let rightTapGesture: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(CDSlideView.rightTap(_:)))
        self.rightBackView.addGestureRecognizer(rightTapGesture)

        self.setLabelText(leftText, rightText: rightText)
        self.setLightColor(lightColor)
        self.setDarkColor(darkColor)
    }

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

    // MARK: Setup
    func setLightColor(lightColor: UIColor) {
        let lightColor = lightColor
        self.foregroundView.backgroundColor = lightColor
        self.leftBackLabel.textColor = lightColor
        self.rightBackLabel.textColor = lightColor
    }

    func setDarkColor(darkColor: UIColor) {
        let darkColor = darkColor
        self.backgroundView.backgroundColor = darkColor
        self.leftFrontLabel.textColor = darkColor
        self.rightFrontLabel.textColor = darkColor
    }

    func setLabelText(leftText: String, rightText: String) {
        self.leftFrontLabel.text = leftText
        self.leftBackLabel.text = leftText
        self.rightFrontLabel.text = rightText
        self.rightBackLabel.text = rightText
    }

    // MARK: Actions
    func slideAction(sender: UIPanGestureRecognizer) {
        if sender.state == .Began || sender.state == .Changed {
            let translation = sender.translationInView(self)
            // note: 'view' is optional and need to be unwrapped

            // Figure out where the user is trying to drag
            var newCenter: CGPoint = CGPointMake(sender.view!.center.x + translation.x, sender.view!.center.y)

            // Limit the bounds & update the center
            newCenter.x = max(self.frame.size.width * 0.25 + foregroundPadding / 2, newCenter.x)
            newCenter.x = min(self.frame.size.width * 0.75 - foregroundPadding / 2, newCenter.x)

            // Set new center
            sender.view!.center = newCenter
            sender.setTranslation(CGPointMake(0,0), inView: self)
        } else if sender.state == .Ended {
            let senderVCX = sender.view?.center.x

            // Snap to side
            if senderVCX <= viewWidth / 2 {
                print("called left")
                sender.view?.frame.origin.x = self.leftOrigin
            } else {
                print("called right")
                sender.view?.frame.origin.x = self.rightOrigin
            }
        }
    }

    func leftTap(sender: UITapGestureRecognizer) {
        UIView.animateWithDuration(0.05) {
            self.foregroundView.frame.origin.x = self.leftOrigin
        }
    }

    func rightTap(sender: UITapGestureRecognizer) {
        UIView.animateWithDuration(0.05) {
            self.foregroundView.frame.origin.x = self.rightOrigin
        }
    }
}

This is a tremendous amount of undocumented code. I'm not going to claim to know Swift. But the idea of reading through all of this in the hope of finding a relevant solution makes my head spin. — Jonathan Mee, Jun 06 '16 at 15:27

How to make a navigation bar like that of Bumble

3 Answers3