पॉप मत करो! आईओएस में इंटरप्टेबल ट्रांजिशन

क्या आप अनुप्रयोगों में पॉप-अप से भी नाराज हैं? इस लेख में मैं दिखाऊंगा कि कैसे इंटरैक्टिव तरीके से छिपाने और पॉप-अप दिखाने के लिए, एनीमेशन को रुकावट बनाने और अपने ग्राहकों को संक्रमित नहीं करने के लिए।

पिछले लेख में, मैंने देखा कि आप एक नए नियंत्रक के प्रदर्शन को कैसे चेतन कर सकते हैं।

हम इस तथ्य पर बसे हैं कि viewController एनिमेटेड रूप से दिखा और छिपा सकता है:

अब हम उसे छुपाने के इशारे पर जवाब देना सिखाएँगे।

संवादात्मक संक्रमण

एक करीबी इशारा जोड़ें

नियंत्रक को अंतःक्रियात्मक रूप से बंद करने के लिए सिखाने के लिए, आपको एक इशारा जोड़ने और इसे संसाधित करने की आवश्यकता है। सभी काम TransitionDriver वर्ग में होंगे:

 class TransitionDriver: UIPercentDrivenInteractiveTransition { func link(to controller: UIViewController) { presentedController = controller panRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handle(recognizer:))) presentedController?.view.addGestureRecognizer(panRecognizer!) } private var presentedController: UIViewController? private var panRecognizer: UIPanGestureRecognizer? } 

आप पैनल संचालक के अंदर, DimmPresentationController के स्थान पर एक हैंडलर संलग्न कर सकते हैं:

 private let driver = TransitionDriver() func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? { driver.link(to: presented) let presentationController = DimmPresentationController(presentedViewController: presented, presenting: presenting) return presentationController } 

उसी समय, आपको यह इंगित करने की आवश्यकता है कि छिपाई प्रबंधनीय हो गई है (हमने पहले से ही पिछले लेख में ऐसा किया है):

 // PanelTransition.swift func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? { return driver } 

इशारा संभालो

चलो समापन इशारे के साथ शुरू करते हैं: यदि आप पैनल को नीचे खींचते हैं, तो समापन एनीमेशन शुरू हो जाएगा, और उंगली की गति बंद होने की डिग्री को प्रभावित करेगी।
UIPercentDrivenInteractiveTransition संक्रमण एनीमेशन को पकड़ने और मैन्युअल रूप से नियंत्रित करने की अनुमति देता है। इसमें update , finish , cancel तरीके हैं। इसके उपवर्ग में जेस्चर प्रोसेसिंग करना सुविधाजनक है।

जेस्चर प्रसंस्करण

 private func handleDismiss(recognizer r: UIPanGestureRecognizer) { switch r.state { case .began: pause() //   percentComplete   0 let isRunning = percentComplete != 0 if !isRunning { presentingController?.present(presentedController!, animated: true) } case .changed: update(percentComplete + r.incrementToBottom(maxTranslation: maxTranslation)) case .ended, .cancelled: if r.isProjectedToDownHalf(maxTranslation: maxTranslation) { finish() } else { cancel() } case .failed: cancel() default: break } } 

.begin
सबसे सामान्य तरीके से प्रवेश शुरू करें। हमने लिंक में link(to:) विधि link(to:) विधि में सहेजा है

.changed
वेतन वृद्धि की गणना करें और इसे update विधि में पास करें। स्वीकृत मान 0 से 1 तक भिन्न हो सकता है, इसलिए हम interactionControllerForDismissal(using:) एनीमेशन interactionControllerForDismissal(using:) विधि से एनीमेशन के पूरा होने की डिग्री को नियंत्रित करेंगे। गणना इशारों के विस्तार में की गई थी, ताकि कोड क्लीनर हो जाए।

 private extension UIPanGestureRecognizer { func incrementToBottom(maxTranslation: CGFloat) -> CGFloat { let translation = self.translation(in: view).y setTranslation(.zero, in: nil) let percentIncrement = translation / maxTranslation return percentIncrement } } 

 var maxTranslation: CGFloat { return presentedController?.view.frame.height ?? 0 } 

.end
हम इशारे की पूर्णता को देखते हैं। पूर्णता का नियम: यदि आधे से अधिक स्थानांतरित हो गया है, तो बंद करें। इस मामले में, ऑफसेट को न केवल वर्तमान समन्वय द्वारा, बल्कि velocity भी माना जाना चाहिए। इसलिए हम उपयोगकर्ता के इरादे को समझते हैं: वह बीच में समाप्त नहीं हो सकता है, लेकिन बहुत नीचे स्वाइप करें। या इसके विपरीत: नीचे ले, लेकिन वापस लौटने के लिए स्वाइप करें।

 private extension UIPanGestureRecognizer { func isProjectedToDownHalf(maxTranslation: CGFloat) -> Bool { let endLocation = projectedLocation(decelerationRate: .fast) let isPresentationCompleted = endLocation.y > maxTranslation / 2 return isPresentationCompleted } func projectedLocation(decelerationRate: UIScrollView.DecelerationRate) -> CGPoint { let velocityOffset = velocity(in: view).projectedOffset(decelerationRate: .normal) let projectedLocation = location(in: view!) + velocityOffset return projectedLocation } } extension CGPoint { func projectedOffset(decelerationRate: UIScrollView.DecelerationRate) -> CGPoint { return CGPoint(x: x.projectedOffset(decelerationRate: decelerationRate), y: y.projectedOffset(decelerationRate: decelerationRate)) } } extension CGFloat { // Velocity value func projectedOffset(decelerationRate: UIScrollView.DecelerationRate) -> CGFloat { // Magic formula from WWDC let multiplier = 1 / (1 - decelerationRate.rawValue) / 1000 return self * multiplier } } extension CGPoint { static func +(left: CGPoint, right: CGPoint) -> CGPoint { return CGPoint(x: left.x + right.x, y: left.y + right.y) } } 

.cancelled - यदि आप फोन स्क्रीन को लॉक करते हैं या यदि वे कॉल करते हैं तो क्या होगा। आप इसे एक .ended ब्लॉक के रूप में संभाल सकते हैं या एक कार्रवाई को रद्द कर सकते हैं।
.failed - अगर इशारे को दूसरे इशारे से रद्द कर दिया जाए तो क्या होगा। इसलिए, उदाहरण के लिए, एक ड्रैग जेस्चर एक टैप जेस्चर को रद्द कर सकता है।
.possible - इशारा की प्रारंभिक स्थिति, आमतौर पर बहुत काम की आवश्यकता नहीं होती है।

अब पैनल को एक स्वाइप के साथ भी बंद किया जा सकता है, लेकिन dismiss बटन dismiss । यह इसलिए हुआ क्योंकि TransitionDriver में एक wantsInteractiveStart वाला wantsInteractiveStart गुण है, डिफ़ॉल्ट रूप से यह true । यह एक स्वाइप के लिए सामान्य है, लेकिन यह सामान्य dismiss अवरुद्ध करता है।

आइए इशारे की स्थिति के आधार पर व्यवहार को तोड़ दें। यदि इशारा शुरू हुआ है, तो यह एक इंटरएक्टिव करीब है, और अगर यह शुरू नहीं हुआ, तो सामान्य एक:

 override var wantsInteractiveStart: Bool { get { let gestureIsActive = panRecognizer?.state == .began return gestureIsActive } set { } } 

अब उपयोगकर्ता छिपाने को नियंत्रित कर सकता है:

रुकावट संक्रमण

माना कि हमने अपना कार्ड बंद करना शुरू कर दिया है, लेकिन अपना विचार बदल दिया है और वापस लौटना चाहते हैं। यह सरल है: एक .began राज्य में, .began pause() कहते हैं।

लेकिन आपको दो परिदृश्यों को अलग करने की आवश्यकता है:

• जब हम इशारे से छिपना शुरू करते हैं;
• जब हम वर्तमान को बाधित करते हैं।

ऐसा करने के लिए, रोकने के बाद, percentComplete: जांच करें percentComplete: यदि यह 0 है, तो हम कार्ड को मैन्युअल रूप से बंद करना शुरू करते हैं, साथ ही हमें dismiss करने की आवश्यकता है। यदि यह 0 नहीं है, तो छिपाना पहले ही शुरू हो गया है, यह सिर्फ एनीमेशन को रोकने के लिए पर्याप्त है:

 case .began: pause() // Pause allows to detect percentComplete if percentComplete == 0 { presentedController?.dismiss(animated: true) } 

मैं बटन दबाता हूं और तुरंत छिपाने के लिए रद्द करता हूं:

नियंत्रक प्रदर्शित करना बंद करें

रिवर्स स्थिति: कार्ड दिखाई देने लगा, लेकिन हमें इसकी आवश्यकता नहीं है। हम इसे पकड़ते हैं और इसे नीचे स्वाइप करके भेजते हैं। आप एक ही चरणों में नियंत्रक प्रदर्शन के एनीमेशन को बाधित कर सकते हैं।

ड्राइवर को एक इंटरैक्टिव डिस्प्ले कंट्रोलर के रूप में लौटाएँ:

 func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? { return driver } 

इशारे को संसाधित करें, लेकिन रिवर्स पूर्वाग्रह और पूर्णता मूल्यों के साथ:

 private func handlePresentation(recognizer r: UIPanGestureRecognizer) { switch r.state { case .began: pause() case .changed: let increment = -r.incrementToBottom(maxTranslation: maxTranslation) update(percentComplete + increment) case .ended, .cancelled: if r.isProjectedToDownHalf(maxTranslation: maxTranslation) { cancel() } else { finish() } case .failed: cancel() default: break } } 

अलग दिखाने और छिपाने के लिए, मैंने वर्तमान एनीमेशन दिशा के साथ एनम में प्रवेश किया:

 enum TransitionDirection { case present, dismiss } 

संपत्ति TransitionDriver में संग्रहीत की जाती है और यह प्रभावित करती है कि कौन सा इशारा हैंडलर इस्तेमाल किया जाएगा:

 var direction: TransitionDirection = .present @objc private func handle(recognizer r: UIPanGestureRecognizer) { switch direction { case .present: handlePresentation(recognizer: r) case .dismiss: handleDismiss(recognizer: r) } } 

यह wantsInteractiveStart भी असर wantsInteractiveStart । हम नियंत्रक को इशारे से दिखाने की योजना नहीं बनाते हैं, इसलिए हम।

 override var wantsInteractiveStart: Bool { get { switch direction { case .present: return false case .dismiss: let gestureIsActive = panRecognizer?.state == .began return gestureIsActive } } set { } } 

खैर, यह उस दिशा की दिशा बदलने के लिए रहता है जब नियंत्रक पूरी तरह से दिखाया गया था। सबसे अच्छा स्थान PresentationController :

 override func presentationTransitionDidEnd(_ completed: Bool) { super.presentationTransitionDidEnd(completed) if completed { driver.direction = .dismiss } } 

अब आप शो के एनीमेशन को बाधित कर सकते हैं। मैं बटन दबाता हूं और तुरंत नीचे स्वाइप करता हूं:

इशारे से दिखाना

यदि आप किसी एप्लिकेशन के लिए एक हैमबर्गर मेनू बना रहे हैं, तो सबसे अधिक संभावना है कि आप इसे इशारे से दिखाना चाहेंगे। यह इंटरेक्टिव छिपाने की तरह काम करता है, लेकिन एक इशारा में, dismiss बजाय dismiss present कहते present ।
चलिए अंत से शुरू करते हैं। handlePresentation(recognizer:) नियंत्रक दिखाएं:

 case .began: pause() let isRunning = percentComplete != 0 if !isRunning { presentingController?.present(presentedController!, animated: true) } 

अंतःक्रियात्मक रूप से दिखाएं:

 override var wantsInteractiveStart: Bool { get { switch direction { case .present: let gestureIsActive = screenEdgePanRecognizer?.state == .began return gestureIsActive case .dismiss: … } 

कोड को काम करने के लिए, presentingController और presentedController presentingController लिए पर्याप्त लिंक नहीं हैं। इशारे बनाते समय हम उन्हें पास करेंगे, UIScreenEdgePanGestureRecognizer जोड़ें:

 func linkPresentationGesture(to presentedController: UIViewController, presentingController: UIViewController) { self.presentedController = presentedController self.presentingController = presentingController //    panRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handle(recognizer:))) presentedController.view.addGestureRecognizer(panRecognizer!) //    screenEdgePanRecognizer = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(handlePresentation(recognizer:))) screenEdgePanRecognizer!.edges = .bottom presentingController.view.addGestureRecognizer(screenEdgePanRecognizer!) } 

PanelTransition बनाते समय आप कंट्रोलर ट्रांसफर कर सकते हैं:

 class PanelTransition: NSObject, UIViewControllerTransitioningDelegate { init(presented: UIViewController, presenting: UIViewController) { driver.linkPresentationGesture(to: presented, presentingController: presenting) } private let driver = TransitionDriver() } 

यह PanelTransition से बनाने के लिए बना PanelTransition :

1. आइए viewDidLoad में एक child कंट्रोलर बनाएं, क्योंकि हमें किसी भी समय कंट्रोलर की आवश्यकता हो सकती है।
2. PanelTransition बनाएं। उनके निर्माता में, इशारा नियंत्रक से बंधा हुआ है।
3. बच्चे नियंत्रक के लिए ट्रांजीशनिंगडेलगेट नीचे रखें।

4. प्रशिक्षण उद्देश्यों के लिए, मैं नीचे से स्वाइप करता हूं, लेकिन यह iPhone X और नियंत्रण केंद्र पर एप्लिकेशन को बंद करने के साथ संघर्ष करता है। वरीयस्क्रीनस्क्रीन का उपयोग preferredScreenEdgesDeferringSystemGestures सिस्टमसिस्टमगैस्ट ने सिस्टम को नीचे से स्वाइप करने में अक्षम कर दिया।

   
   

    class ParentViewController: UIViewController { private var child: ChildViewController! private var transition: PanelTransition! override func viewDidLoad() { super.viewDidLoad() child = ChildViewController() // 1 transition = PanelTransition(presented: child, presenting: self) // 2 // Setup the child child.modalPresentationStyle = .custom child.transitioningDelegate = transition // 3 } override var preferredScreenEdgesDeferringSystemGestures: UIRectEdge { return .bottom // 4 } } 

   
   

   परिवर्तन के बाद, यह पता चला कि एक समस्या थी: पैनल के पहले समापन के बाद, यह हमेशा के लिए TransitionDirection.dismiss की स्थिति में रहता है। PresentationController में नियंत्रक को छिपाने के बाद सही स्थिति सेट करें:

   
   

    override func dismissalTransitionDidEnd(_ completed: Bool) { super.dismissalTransitionDidEnd(completed) if completed { driver.direction = .present } } 

   
   

   इंटरएक्टिव डिस्प्ले कोड को एक अलग थ्रेड में देखा जा सकता है। यह इस तरह दिखता है:

   
   

निष्कर्ष

नतीजतन, हम नियंत्रक को बाधित एनीमेशन के साथ दिखा सकते हैं, और उपयोगकर्ता को स्क्रीन पर क्या हो रहा है, इस पर नियंत्रण है। यह बहुत अच्छा है, क्योंकि एनीमेशन अब इंटरफ़ेस को ब्लॉक नहीं करता है, इसे रद्द या त्वरित भी किया जा सकता है।

एक उदाहरण गितुब पर देखा जा सकता है ।

डोडो पिज्जा मोबाइल चैनल की सदस्यता लें ।