[解決済み】マップアプリの下部のシートを真似るにはどうしたらいいですか？

2022-04-03 05:26:18

質問

iOS 10の新しいApple Mapsアプリのボトムシートを模倣する方法をどなたか教えてください。

Androidでは BottomSheet しかし、iOSではそのようなものは見つかりませんでした。

それは、コンテンツが挿入された単純なスクロールビューで、検索バーが一番下にあるようなものでしょうか？

私はiOSプログラミングのかなり初心者なので、もし誰かがこのレイアウトを作るのを手伝ってくれるなら、それは非常にありがたいことです。

ボトムシートとは、このようなものです。

解決方法は？

新しいマップアプリのボトムシートが、ユーザーのインタラクションにどのように反応するのか、正確にはわかりません。しかし、スクリーンショットにあるようなカスタムビューを作成し、それをメインビューに追加することができます。

方法をご存じだと思いますが。

1- storyboards または xib ファイルを使用してビューコントローラを作成します。

2- googleMapsやAppleのMapKitを使用する。

使用例

1- ビューコントローラを2つ作成します。 MapViewController と BottomSheetViewController . 最初のコントローラはマップをホストし、2番目はボトムシートそのものです。

MapViewControllerの設定

ボトムシートビューを追加するためのメソッドを作成します。

func addBottomSheetView() {
    // 1- Init bottomSheetVC
    let bottomSheetVC = BottomSheetViewController()

    // 2- Add bottomSheetVC as a child view 
    self.addChildViewController(bottomSheetVC)
    self.view.addSubview(bottomSheetVC.view)
    bottomSheetVC.didMoveToParentViewController(self)

    // 3- Adjust bottomSheet frame and initial position.
    let height = view.frame.height
    let width  = view.frame.width
    bottomSheetVC.view.frame = CGRectMake(0, self.view.frame.maxY, width, height)
}

そして、viewDidAppear メソッドでそれを呼び出します。

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    addBottomSheetView()
}

BottomSheetViewControllerの設定

1) 背景を用意する

ぼかしやビビットな効果を加える方法を作成する

func prepareBackgroundView(){
    let blurEffect = UIBlurEffect.init(style: .Dark)
    let visualEffect = UIVisualEffectView.init(effect: blurEffect)
    let bluredView = UIVisualEffectView.init(effect: blurEffect)
    bluredView.contentView.addSubview(visualEffect)

    visualEffect.frame = UIScreen.mainScreen().bounds
    bluredView.frame = UIScreen.mainScreen().bounds

    view.insertSubview(bluredView, atIndex: 0)
}

このメソッドを viewWillAppear で呼び出します。

override func viewWillAppear(animated: Bool) {
   super.viewWillAppear(animated)
   prepareBackgroundView()
}

コントローラのビューの背景色がclearColorであることを確認します。

2) bottomSheetの外観をアニメーション化する

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)

    UIView.animateWithDuration(0.3) { [weak self] in
        let frame = self?.view.frame
        let yComponent = UIScreen.mainScreen().bounds.height - 200
        self?.view.frame = CGRectMake(0, yComponent, frame!.width, frame!.height)
    }
}

3) xibを好きなように修正する。

4) パンジェスチャーレコグナイザーをビューに追加します。

viewDidLoadメソッドにUIPanGestureRecognizerを追加します。

override func viewDidLoad() {
    super.viewDidLoad()

    let gesture = UIPanGestureRecognizer.init(target: self, action: #selector(BottomSheetViewController.panGesture))
    view.addGestureRecognizer(gesture)

}

そして、ジェスチャーの動作を実装してください。

func panGesture(recognizer: UIPanGestureRecognizer) {
    let translation = recognizer.translationInView(self.view)
    let y = self.view.frame.minY
    self.view.frame = CGRectMake(0, y + translation.y, view.frame.width, view.frame.height)
     recognizer.setTranslation(CGPointZero, inView: self.view)
}

スクロール可能なボトムシート。

カスタムビューがスクロールビューや他のビューを継承している場合、2つのオプションがありますので。

1つ目

ヘッダービューでビューを設計し、ヘッダにpanGestureを追加します。 (悪いユーザーエクスペリエンス) .

2番目

1 - 下部のシートビューにpanGestureを追加します。

2 - 実装する UIGestureRecognizerDelegate を作成し、コントローラにpanGestureデリゲートを設定します。

3- 実装 で認識する必要があります。 デリゲート関数と 無効にする スクロールビューの isScrollEnabled プロパティの2つのケースで

ビューが部分的に表示されています。
ビューが完全に表示されている、scrollView コンテンツオフセット プロパティが 0 で、ユーザーがビューを下方向にドラッグしています。

それ以外の場合は、スクロールを有効にします。

  func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
      let gesture = (gestureRecognizer as! UIPanGestureRecognizer)
      let direction = gesture.velocity(in: view).y

      let y = view.frame.minY
      if (y == fullView && tableView.contentOffset.y == 0 && direction > 0) || (y == partialView) {
          tableView.isScrollEnabled = false
      } else {
        tableView.isScrollEnabled = true
      }

      return false
  }

ノート

を設定した場合 .allowUserInteraction をアニメーションのオプションとして指定します。ので、ユーザーが上にスクロールしている場合は、アニメーションの完了クロージャでスクロールを有効にする必要があります。