【问题标题】:Is there a standard way to display a modal view indicator?是否有显示模态视图指示器的标准方法?
【发布时间】:2019-10-21 19:49:51
【问题描述】:

大多数 Apple iOS 应用的模态内容顶部都有一个小指示器:

我试着寻找它,但我什至不知道该叫什么。

【问题讨论】:

  • 似乎没有标准的方法来做到这一点。也许最简单的做法是使用 SF Symbols 的 minus

标签: ios uikit modalviewcontroller


【解决方案1】:

这是一个模态视图指示器

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

【讨论】:

    【解决方案2】:

    也许这里更好的方法是简单地使用一个矩形:

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

    【讨论】:

      【解决方案3】:

      我在 SwiftUI 中看到了一些很棒的答案,而且由于这个问题也有一个 UIKit 标签,我想我可能会添加一些想法来解决这个问题。

      首先要考虑的是您的视图层次结构,指示器是否会成为导航栏的一部分,或者您的视图可能没有导航栏 - 因此您可能需要一些代码来找到正确的视图来添加它指标。

      在我的场景中,我需要一个导航栏,因此我的视图控制器位于导航控制器中,但您可以直接在视图控制器中执行相同操作:

      1:子类化导航控制器

      这是可选的,但最好将所有这些自定义抽象到导航控制器中。

      我检查一下是否显示了 NavigationController。这可能不是最好的检查方法,但由于这不是问题的一部分,请参阅these answers 检查视图控制器是否以模态方式呈现

      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:呈现自定义导航控制器

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

      3:这将产生以下结果

      您可能需要根据您的场景/视图控制器层次结构在此处更改一些逻辑,但希望这能给您一些想法。

      【讨论】:

        猜你喜欢
        • 2016-09-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-02-10
        • 2011-05-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多