सभी को नमस्कार, मेरा नाम डेनिस है, हम iOS एप्लिकेशन - Apphud के लिए एक सदस्यता विश्लेषण सेवा विकसित कर रहे हैं।

WWDC 2019 में, Apple ने आपके एप्लिकेशन के इंटरफ़ेस के साथ सहभागिता करने के लिए एक नया तरीका पेश किया: संदर्भ मेनू । वे इस तरह दिखते हैं:

इस लेख में हम उनके उपयोग की कुछ सूक्ष्मताओं पर विचार करेंगे और उन्हें बनाना सीखेंगे।

संदर्भ मेनू "पीक एंड पॉप" तकनीक का एक तार्किक निरंतरता है, जब उपयोगकर्ता किसी तत्व का पूर्वावलोकन बहुत मुश्किल से दबा सकता है। लेकिन उनके बीच कई महत्वपूर्ण अंतर हैं।

• आईओएस 13 पर चलने वाले किसी भी उपकरण पर संदर्भ मेनू काम करता है। डिवाइस से 3 डी टच समर्थन की आवश्यकता नहीं है। इसलिए, विशेष रूप से, उनका उपयोग सभी iPad पर किया जा सकता है।

  
  

• बटन जो आपको तत्व के साथ बातचीत करने की अनुमति देते हैं, तुरंत दिखाई देते हैं और उन्हें स्वाइप करने की आवश्यकता नहीं होती है।

  
  

संदर्भ मेनू खोलने के लिए, उपयोगकर्ता को बस वांछित वस्तु पर अपनी उंगली पकड़नी होगी या इसे मुश्किल से दबाएं (यदि डिवाइस 3 डी टच का समर्थन करता है)।

संदर्भ मेनू का उपयोग करते समय सिफारिशें

ऐप्पल के मानव इंटरफ़ेस दिशानिर्देशों की अनुशंसा करते हैं कि संदर्भ मेनू डिज़ाइन करते समय आप इन दिशानिर्देशों का पालन करते हैं।

सही ढंग से डिजाइन करें

यदि आप कुछ स्थानों पर कुछ तत्वों के लिए मेनू जोड़ते हैं और दूसरों में समान तत्वों के लिए नहीं जोड़ते हैं तो यह अच्छा नहीं होगा। तब उपयोगकर्ता सोचेंगे कि एप्लिकेशन सही तरीके से काम नहीं कर रहा है।

मेनू में केवल आवश्यक शामिल करें

संदर्भ मेनू सबसे अधिक इस्तेमाल किए जाने वाले आदेशों के लिए एक शानदार जगह है। "सबसे अधिक बार" एक महत्वपूर्ण वाक्यांश है। एक पंक्ति में सब कुछ न जोड़ें।

सबमेनस का उपयोग करें

उपयोगकर्ता को नेविगेट करने में आसान बनाने के लिए सबमेनस का उपयोग करें। मेनू आइटम को सरल और स्पष्ट नाम दें।

घोंसले के शिकार के 1 से अधिक स्तर का उपयोग न करें

इस तथ्य के बावजूद कि सबमेनस नेविगेशन को आसान बना सकता है, वे इसे आसानी से जटिल कर सकते हैं। सेब 1 से अधिक स्तर के घोंसले के शिकार की सिफारिश नहीं करता है।

सबसे अधिक इस्तेमाल की जाने वाली वस्तुओं को सबसे ऊपर रखें

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

ग्रुपिंग का प्रयोग करें

समूह समान मेनू आइटम

एक ही समय में एक ही आइटम पर संदर्भ मेनू और संपादन मेनू का उपयोग करने से बचें

वे एक-दूसरे के साथ संघर्ष कर सकते हैं, क्योंकि दोनों को एक लंबे टैप में कहा जाता है।

मेनू में एक अलग "ओपन" बटन न जोड़ें

उपयोगकर्ता केवल उस पर टैप करके एक आइटम खोल सकते हैं। एक अतिरिक्त "ओपन" बटन शानदार होगा।

UIView के लिए सबसे सरल संदर्भ मेनू

अब जब हमने संदर्भ मेनू का उपयोग करने के लिए बुनियादी नियम सीख लिए हैं, तो चलिए अभ्यास करते हैं। बेशक, मेनू केवल iOS 13 और इसके बाद के संस्करण पर काम करते हैं, और परीक्षण के लिए आपको Xcode 11 की आवश्यकता होगी। आप यहाँ Xcode 11 का बीटा संस्करण डाउनलोड कर सकते हैं ।

आप यहां से पूरी तरह से उदाहरण डाउनलोड कर सकते हैं ।

उदाहरण के लिए, ऊपर UIImageView पर, उदाहरण के लिए संदर्भ मेनू जोड़ें।

ऐसा करने के लिए, बस नियंत्रक में UIImageView ऑब्जेक्ट जोड़ें और कोड की कुछ पंक्तियाँ लिखें, उदाहरण के लिए, viewDidLoad विधि में:

 class SingleViewController: UIViewController { @IBOutlet var imageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() imageView.isUserInteractionEnabled = true let interaction = UIContextMenuInteraction(delegate: self) imageView.addInteraction(interaction) } } 

UIContextMenuInteraction , UIContextMenuInteraction वर्ग का एक ऑब्जेक्ट UIContextMenuInteraction जाता UIContextMenuInteraction । निर्माता को आपको प्रतिनिधि को निर्दिष्ट करने की आवश्यकता होती है जो मेनू के लिए जिम्मेदार होगा। चलिए थोड़ी देर बाद इस पर वापस आते हैं। और addInteraction विधि के साथ addInteraction हम अपने मेनू को चित्र में जोड़ते हैं।

अब यह UIContextMenuInteractionDelegate प्रोटोकॉल को लागू करने के लिए बनी हुई है। यह केवल एक अनिवार्य तरीका है जो मेनू बनाने के लिए जिम्मेदार है:

 extension SingleViewController: UIContextMenuInteractionDelegate { func contextMenuInteraction(_ interaction: UIContextMenuInteraction, configurationForMenuAtLocation location: CGPoint) -> UIContextMenuConfiguration? { let configuration = UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { actions -> UIMenu<UIAction>? in let save = UIAction(__title: "My Button", image: nil, options: []) { action in // Put button handler here } return configuration } } 

यदि इस विधि में nil वापस किया जाता है, तो संदर्भ मेनू को नहीं बुलाया जाएगा। विधि के अंदर, हम UIContextMenuConfiguration क्लास का एक ऑब्जेक्ट बनाते हैं। बनाते समय, हम इन मापदंडों को पास करते हैं:

• identifier - मेनू की पहचानकर्ता।

  
  

• previewProvider एक कस्टम नियंत्रक है जो मेनू में वर्तमान आइटम के बजाय वैकल्पिक रूप से प्रदर्शित किया जा सकता है। हम इस पर थोड़ा बाद में विचार करेंगे।

  
  

• actionProvider हम संदर्भ मेनू आइटम पास करते हैं।

  
  

तत्व स्वयं कहीं नहीं बनाए गए हैं: वे मेनू आइटम पर क्लिक करने के लिए नाम, एक वैकल्पिक आइकन और एक हैंडलर का संकेत देते हैं। वह सब है!

एक सबमेनू जोड़ें

चलिए चीजों को थोड़ा जटिल करते हैं। हमारी तस्वीर में दो मदों के साथ एक मेनू जोड़ें: "सहेजें" और "संपादित करें ..."। "संपादित करें ..." पर क्लिक करके एक सबमेनू आइटम "घुमाएँ" और "हटाएं" के साथ खुलता है। यह इस तरह दिखना चाहिए:

ऐसा करने के लिए, प्रोटोकॉल विधि को फिर से UIContextMenuInteractionDelegate निम्नानुसार है:

 func contextMenuInteraction(_ interaction: UIContextMenuInteraction, configurationForMenuAtLocation location: CGPoint) -> UIContextMenuConfiguration? { let configuration = UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { actions -> UIMenu<UIAction>? in // Creating Save button let save = UIAction(__title: "Save", image: UIImage(systemName: "tray.and.arrow.down.fill"), options: []) { action in // Just showing some alert self.showAlert(title: action.title) } // Creating Rotate button let rotate = UIAction(__title: "Rotate", image: UIImage(systemName: "arrow.counterclockwise"), options: []) { action in self.showAlert(title: action.title) } // Creating Delete button let delete = UIAction(__title: "Delete", image: UIImage(systemName: "trash.fill"), options: .destructive) { action in self.showAlert(title: action.title) } // Creating Edit, which will open Submenu let edit = UIMenu<UIAction>.create(title: "Edit...", children: [rotate, delete]) // Creating main context menu return UIMenu<UIAction>.create(title: "Menu", children: [save, edit]) } return configuration } 

यहां हम क्रमिक रूप से "सहेजें", "घुमाएं" और "हटाएं" बटन बनाते हैं, अंतिम दो को "एडिट ..." सबमेनू में जोड़ते हैं और मुख्य संदर्भ मेनू में सब कुछ लपेटते हैं।

संदर्भ मेनू को UICollectionView जोड़ें

आइए UICollectionView पर एक संदर्भ मेनू जोड़ें। सेल पर एक लंबे प्रेस के साथ, उपयोगकर्ता को इस तरह "पुरालेख" आइटम के साथ एक मेनू दिखाया जाएगा:

UICollectionView संदर्भ मेनू को जोड़ना सरल है: बस वैकल्पिक func collectionView(_ collectionView: UICollectionView, contextMenuConfigurationForItemAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? विधि func collectionView(_ collectionView: UICollectionView, contextMenuConfigurationForItemAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? UICollectionViewDelegate प्रोटोकॉल। यहाँ हमें क्या मिला है:

 override func collectionView(_ collectionView: UICollectionView, contextMenuConfigurationForItemAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? { let configuration = UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { actions -> UIMenu<UIAction>? in let action = UIAction(__title: "Archive", image: UIImage(systemName: "archivebox.fill"), options: .destructive) { action in // Put button handler here } return UIMenu<UIAction>.create(title: "Menu", children: [action]) } return configuration } 

यहां, पहले की तरह, तत्व और मेनू स्वयं बनाए जाते हैं। अब, एक सेल पर एक लंबे (मजबूत) क्लिक के साथ, उपयोगकर्ता को एक संदर्भ मेनू दिखाई देगा।

संदर्भ मेनू को UITableView जोड़ें

यहाँ सब कुछ UICollectionView समान है। आपको इस contextMenuConfigurationForRowAt को लागू करने की आवश्यकता है। इसके लिए contextMenuConfigurationForRowAt प्रोटोकॉल के contextMenuConfigurationForRowAt विधि को लागू करें:

 override func tableView(_ tableView: UITableView, contextMenuConfigurationForRowAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? { let configuration = UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { actions -> UIMenu<UIAction>? in let action = UIAction(__title: "Custom action", image: nil, options: []) { action in // Put button handler here } return UIMenu<UIAction>.create(title: "Menu", children: [action]) } return configuration } 

लेकिन क्या होगा यदि हम संदर्भ मेनू में एक कस्टम स्क्रीन का उपयोग करना चाहते हैं? उदाहरण के लिए, यह:

ऐसा करने के लिए, एक UIContextMenuConfiguration बनाते समय UIContextMenuConfiguration वांछित UIViewController को previewProvider पास करना होगा। यहाँ कोड का एक उदाहरण है जो इसे लागू करता है:

 class PreviewViewController: UIViewController { static func controller() -> PreviewViewController { let storyboard = UIStoryboard(name: "Main", bundle: nil) let controller = storyboard.instantiateViewController(withIdentifier: "PreviewViewController") as! PreviewViewController return controller } } extension TableViewController: UITableViewDelegate { override func tableView(_ tableView: UITableView, contextMenuConfigurationForRowAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? { let configuration = UIContextMenuConfiguration(identifier: nil, previewProvider: { () -> UIViewController? in // Return Preview View Controller here return PreviewViewController.controller() }) { _ -> UIMenu<UIAction>? in let action = UIAction(__title: "Custom action", image: nil, options: []) { action in // Put button handler here } return UIMenu<UIAction>.create(title: "Menu", children: [action]) } return configuration } } 

उदाहरण में, PreviewViewController स्टोरीबोर्ड से आरंभ किया जाता है और संदर्भ मेनू में प्रदर्शित किया जाता है।

यह इस ViewController पर क्लिक प्रसंस्करण जोड़ने के लिए बनी हुई है। ऐसा करने के लिए, UITableViewDelegate प्रोटोकॉल के willCommitMenuWithAnimator पद्धति को लागू करें। हैंडलर को ही animator.addCompletion अंदर रखा जाएगा:

 override func tableView(_ tableView: UITableView, willCommitMenuWithAnimator animator: UIContextMenuInteractionCommitAnimating) { animator.addCompletion { // Put handler here } } 

निष्कर्ष

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

10 मिनट में अपने iOS ऐप में सब्सक्रिप्शन लागू करना चाहते हैं? Apphud और एकीकृत करें:

• केवल एक विधि का उपयोग करके खरीदारी करें;
• स्वचालित रूप से प्रत्येक उपयोगकर्ता की सदस्यता की स्थिति को ट्रैक करता है;
• आसानी से सदस्यता प्रस्तावों को एकीकृत करें
• उपयोगकर्ता की स्थानीय मुद्रा को ध्यान में रखते हुए सदस्यता घटनाओं, मिक्सपैनल, स्लैक और टेलीग्राम को भेजें;
• अनुप्रयोगों में मंथन दर घटाएं और बिना सदस्यता वाले उपयोगकर्ताओं को लौटाएं।

क्या पढ़ना है?

• ऐप स्टोर में अपना सब्सक्रिप्शन ऐप पाने के लिए 15 टिप्स

  
  

• IOS के लिए Apple सदस्यता सूचनाएं गाइड। क्या वे वास्तव में अच्छे हैं?

  
  

• आईओएस सब्सक्रिप्शन के बारे में 7 महत्वपूर्ण बातें