[SWIFT] [IOS] Afficher une vue semi-modale à l'aide du panneau flottant

But de cette fois

Vue semi-modale FloatingPanel.gif

C'est une histoire pour les personnes qui veulent l'afficher.

environnement

Xcode 12.0.1 Swift5 CocoaPods 1.10.0

Cadre environnemental

Ajoutez ce qui suit au fichier pod et installez

pod 'FloatingPanel'

Sujet principal

Faisons-le maintenant Storyboard Le but cette fois est qu'une vue semi-modale apparaisse lorsque vous appuyez sur le bouton comme dans le gif. Tout d'abord, préparez deux écrans et installez un bouton sur un. (Aucune suite requise)

ViewController: Ceux qui ont placé le bouton SemiModalViewController: modal à afficher. Fabriqué en orange pour une visualisation facile スクリーンショット 2020-10-21 20.51.06.png

ViewController

ViewController.swift


import UIKit
import FloatingPanel

class ViewController: UIViewController,FloatingPanelControllerDelegate{
    var floatingPanelController: FloatingPanelController!
    @IBOutlet weak var button: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        //C'est le traitement habituel des boutons
        button.addTarget(self,action: #selector(self.tapButton(_ :)),for: .touchUpInside)
        floatingPanelController = FloatingPanelController()
        self.delegate = SemiModalViewController()
    }
    
    @objc func tapButton(_ sender: UIButton){
        //Créez un contrôleur de vue qui sera une vue semi-modale et définissez-le comme contrôleur de vue de contenu
        let semiModalViewController = self.storyboard?.instantiateViewController(withIdentifier: "fpc") as? SemiModalViewController
        floatingPanelController.set(contentViewController: semiModalViewController)
        //Afficher la vue semi-modale
        floatingPanelController.addPanel(toParent: self, belowView: nil, animated: false)
        floatingPanelController.delegate = self
        floatingPanelController.addPanel(toParent: self, belowView: nil, animated: false)
    }
    //Masquer la vue semi-modale en quittant l'écran
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        //Masquer la vue semi-modale
        floatingPanelController.removePanelFromParent(animated: true)
    }
    
    //Passer à une mise en page personnalisée(Non requis lors de l'utilisation par défaut)
    func floatingPanel(_ vc: FloatingPanelController, layoutFor newCollection: UITraitCollection) -> FloatingPanelLayout? {
        return CustomFloatingPanelLayout()
    }

    //Masquer la vue semi-modale lorsque vous atteignez la position de pointe
    func floatingPanelDidEndDragging(_ vc: FloatingPanelController, withVelocity velocity: CGPoint, targetPosition: FloatingPanelPosition) {
        if targetPosition == .tip{
            vc.removePanelFromParent(animated: true)
        }
    }
    
}

SemiModalViewController Pas besoin d'écrire CustomFloatingPanelLayout

CustomFloatingPanelLayout.swift


import Foundation
import FloatingPanel

class CustomFloatingPanelLayout: FloatingPanelLayout {
    //Hauteur personnalisée
       func insetFor(position: FloatingPanelPosition) -> CGFloat? {
           switch position {
           case .full: return 16.0
           case .half: return 216.0
           case .tip: return 44.0
           default: return nil
           }
       }
    
   
   //Position initiale
   var initialPosition: FloatingPanelPosition {
       //Partir de la demi-position
       return .half
   }
 
   //Position de soutien
   var supportedPositions: Set<FloatingPanelPosition> {
    //full,half.Il existe 3 types de pointes. Cette fois, les 3 types sont configurés pour être utilisés.
    return [.full,.half,.tip]
   }
}

Sommaire

A réussi à afficher une superbe vue semi-modale Ensuite, écrivez comment passer par valeur à la vue semi-modale

référence

https://qiita.com/dotrikun/items/369f5c0730f444d97cf1

Recommended Posts

[IOS] Afficher une vue semi-modale à l'aide du panneau flottant