Is there a standard way to display a modal view indicator?

Question

Most of the Apple iOS app have a small indicator at the top of their modal content:

I tried looking for it but I can't even figure out what to call that item.

Answer 1

Here is a Modal View Indicator

import SwiftUI

struct ModalViewIndicator: View {
    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "minus")
                .imageScale(.large)
                .font(Font.title.weight(.heavy))
                .foregroundColor(Color(UIColor.tertiaryLabel))
            Spacer()
        }.padding(4)
    }
}

struct ModalViewIndicator_Previews: PreviewProvider {
    static var previews: some View {
        Text("ModalViewIndicator")
            .sheet(isPresented: .constant(true)) {
                VStack {
                    ModalViewIndicator()
                    GeometryReader { geometry in
                        Image(systemName: "sun.dust.fill")
                            .resizable()
                            .frame(
                                width: geometry.size.width/2,
                                height: geometry.size.width/2,
                                alignment: .center
                        )
                    }
                }
        }
    }
}

Answer 2

Perhaps a better approach here is to simply use a rectangle:

HStack {
  Spacer()
  RoundedRectangle(cornerRadius: CGFloat(5.0) / 2.0)
    .frame(width: 40, height: 5)
    .foregroundColor(Color(UIColor.tertiaryLabel))
  Spacer()
}.padding(4)

Answer 3

I see a couple of great answers in SwiftUI and since the question also has a UIKit tag, I thought I might add some ideas to solve this for UIKit.

The first thing to think about is your view hierarchy, is the indicator going to be part of your navigation bar or perhaps your view does not have navigation bar - so accordingly you probably need some code to find the correct view to add this indicator to.

In my scenario, I needed a navigation bar so my view controllers were within a navigation controller but you could do the same inside your view controllers directly:

1: Subclass a Navigation Controller

This is optional but it would be nice to abstract away all of this customization into the navigation controller.

I do a check to see if the NavigationController is being presented. This might not be the best way to check but since this is not part of the question, refer to these answers to check if a view controller was presented modally or not

class CustomNavigationController: UINavigationController {
  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    // this checks if the ViewController is being presented
    if presentingViewController != nil {
      addModalIndicator()
    }
  }

  private func addModalIndicator() {
    let indicator = UIView()
    indicator.backgroundColor = .tertiaryLabel
    let indicatorSize = CGSize(width: 30, height: 5)
    let indicatorX = (navigationBar.frame.width - indicatorSize.width) / CGFloat(2)
    indicator.frame = CGRect(origin: CGPoint(x: indicatorX, y: 8), size: indicatorSize)
    indicator.layer.cornerRadius = indicatorSize.height / CGFloat(2.0)
    navigationBar.addSubview(indicator)
  }
}

2: Present the Custom Navigation Controller

let someVC = UIViewController()
let customNavigationController = CustomNavigationController()
customNavigationController.setViewControllers([stationsVC], animated: false)
present(playerNavigationController, animated: true) { }

3: This will produce the following results

You might need to alter some logic here based on your scenario / view controller hierarchy but hopefully this gives you some ideas.