👩🏽‍🎓 😬 🤱🏼 IOS कार्ड में टैग पर क्लिक करने पर कस्टम पॉप-अप कैसे बनाया जाता है 😼 🧑🏿‍🤝‍🧑🏿 🧑🏾‍🤝‍🧑🏾

यह पोस्ट मुख्य रूप से शुरुआती (और ऐसा नहीं) आईओएस डेवलपर्स को संबोधित किया गया है।
अक्सर अनुप्रयोगों में, आपको कुछ स्थानों पर लेबल के साथ एक मानचित्र लगाने की आवश्यकता होती है। मानक तरीकों से, आप लेबल पर क्लिक करने पर, पॉप-अप विंडो में लेबल की तस्वीर बदल सकते हैं, आप शीर्षक, उपशीर्षक, छवि बदल सकते हैं, साथ ही दाईं ओर एक बटन जोड़ सकते हैं या कुछ और।
एक ही समय में, ये सभी तत्व केवल मानक आकार के हो सकते हैं और सही पर एक जैसे कुछ दिखेंगे।

लेकिन क्या होगा अगर आप एक कस्टम पॉप-अप विंडो बनाना चाहते हैं जिसमें आप अपनी पसंद के अनुसार कुछ भी रख सकते हैं (अच्छी तरह से, लगभग कुछ भी) जैसे कि बाईं ओर की तस्वीर?

यदि आप आगे पढ़ने के लिए बहुत आलसी हैं और तुरंत एक उदाहरण डाउनलोड करना चाहते हैं, तो नीचे github का लिंक है। आप अपने लिए डाउनलोड करके देख सकते हैं।

जो लोग पहले से ही इस तरह के कार्य का सामना कर चुके हैं, वे शायद https://github.com/nfarina/calloutview के बारे में जानते हैं। इस उदाहरण के आधार पर, मेरा समाधान बनाया गया है। Nfarina समाधान में दोष यह है कि इसका उदाहरण दिखाता है कि किसी एकल लेबल के लिए अपने स्वयं के पॉपअप का उपयोग कैसे किया जाए। और उदाहरण में बहुत सारे लेबलों को कैसे प्रदर्शित किया जाए, इस पर विचार नहीं किया गया है। किसी कारण से, उसने 2 कार्ड भी काट लिए और प्रत्येक पर एक लेबल लगा दिया और यह सब एक जगह लिखा। यह थोड़ा भ्रमित करने वाला हो सकता है। वैसे, रूसी में इसका कोई वर्णन नहीं है।

उपयोग के लिए चरण-दर-चरण निर्देश

आरंभ करने के लिए, आपको प्रोजेक्ट में दो मानक रूपरेखाएँ जोड़ने की आवश्यकता होगी - MapKit और QuartzCore। (दूसरा वैकल्पिक है, लेकिन इसका उपयोग मेरे उदाहरण में किया गया है)

अगला, प्रोजेक्ट में 2 फाइलें जोड़ी जानी चाहिए - SMCalloutView.h और SMCalloutView.m। यह क्लास पॉप-अप विंडो बनाएगी। मैंने इसे नफ़रीना से उधार लिया था। सबसे अधिक संभावना है, आपको इसमें कुछ भी संपादित नहीं करना होगा, इसलिए हम इस पर विचार नहीं करेंगे।

मुख्य ध्यान उस नियंत्रक को दिया जाएगा जो कार्ड और उस पर लेबल प्रदर्शित करता है।

जैसा कि nfarina उदाहरण में, फ़ाइल में मानचित्र प्रदर्शित करने वाले कंट्रोलर के साथ 2 MapAnnotation और CustomPinAnnotationView कक्षाएं भी होंगी। शायद यह बहुत सही नहीं है, लेकिन इस मामले में यह मुझे एक अधिक सुरुचिपूर्ण और सरल समाधान लग रहा था, क्योंकि ये कक्षाएं नियंत्रक से अटूट रूप से जुड़ी हुई हैं और इसके बाहर उपयोग किए जाने की संभावना नहीं है।

नियंत्रक फ़ाइल में, MapKit / MapKit.h लाइब्रेरी और SMCalloutView.h फ़ाइल आयात करें। मेरा नियंत्रक UIViewController से वारिस होगा और MKMapViewDelegate और SMCalloutViewDelegate प्रोटोकॉल का अनुपालन करेगा। इसके अलावा, कक्षा में एक चर होना चाहिए जो प्रदर्शित वस्तुओं के बारे में सभी जानकारी संग्रहीत करना चाहिए। मेरे मामले में यह NSArray जैसा स्टॉक होगा। तुम्हारा कुछ और ही होगा।

NewMapViewController.h नियंत्रक फ़ाइल के लिए मेरे हेडर का पूरा कोड:

#import <UIKit/UIKit.h> #import <MapKit/MapKit.h> #import "SMCalloutView.h" @interface NewMapViewController : UIViewController <MKMapViewDelegate, SMCalloutViewDelegate> @property (nonatomic, strong) NSArray *stocks; @end @interface MapAnnotation : NSObject <MKAnnotation> @property (nonatomic, copy) NSString *title, *subtitle; @property (nonatomic, assign) CLLocationCoordinate2D coordinate; @property int idAnn; @end @interface CustomPinAnnotationView : MKPinAnnotationView @property (strong, nonatomic) SMCalloutView *calloutView; @property int idAnn; @end

एक प्रकार का इंट का एक वैरिएबल लेबल की आईडी (या कुछ अन्य वस्तु) को स्टोर करेगा, जो वर्तमान में प्रदर्शित की गई पॉप-अप विंडो है। यानी लेबल पर क्लिक किया गया, एक विंडो पॉप अप हुई, आईडीएएनएन बदल गया। नियंत्रक के कार्यान्वयन पर अधिक विस्तार से विचार करें।

मेरे मामले में, क्वार्ट्जकोर लाइब्रेरी को NewMapViewController.m फ़ाइल में आयात किया गया है और कक्षा के लिए निम्नलिखित स्थानीय चर घोषित किए गए हैं:

 #import "NewMapViewController.h" #import <QuartzCore/QuartzCore.h> @implementation NewMapViewController{ SMCalloutView *calloutView; MKMapView *mapView; NSMutableArray *pins; int idAnn; }

कॉलआउट व्यू - पॉप-अप विंडो, मैप व्यू - मैप, पिन - प्रदर्शित लेबल की एक सरणी (स्टॉक के साथ भ्रमित नहीं होना) , आईडीएएनएन - आईडी का लेबल जो पॉप-अप विंडो प्रदर्शित करता है।

मेरे मामले में, स्टॉक सरणी को इनिट फ़ाइल में आरंभीकृत किया गया है, जिसमें प्रदर्शित लेबल (चित्र, शीर्षक, मूल्य, निर्देशांक) के बारे में जानकारी होगी।

 - (id)init { self = [super init]; if (self) { pins = [NSMutableArray array]; self.stocks = @[ @{@"img" : @"1.jpg", @"title" : @", ,          «DAL's Burger»  «Gold'n'Brown».  50%", @"price" : @"50%  99 .", @"lat" : @"43.20138", @"lng" : @"76.90597"}, //... @{@"img" : @"6.jpg", @"title" : @"        «Del Papa».  50%", @"price" : @"3000 . - 50% = 1499 .", @"lat" : @"43.25417", @"lng" : @"76.94035"} ]; } return self; }

आपके मामले में, आप यह जानकारी किसी अन्य स्थान (json, xml, अन्य कक्षाएं, आदि) से प्राप्त कर सकते हैं ।

मेरे विचार में केवल 2 विधियाँ शामिल हैं:

 - (void)viewDidLoad { [super viewDidLoad]; [self setMap]; [self drawMarkers]; }

setMap - नक्शे को इनिशियलाइज़ करता है और वांछित क्षेत्र दिखाता है। drawMarkers - नक्शे पर लेबल खींचता है। आपको इन तरीकों को अपनी आवश्यकताओं में बदलना होगा। (मैं नीचे दिए गए सभी कोड नहीं दे सकता हूं। यदि आवश्यक हो, तो आप हमेशा नीचे दिए गए उदाहरण को जीथब लिंक पर डाउनलोड कर सकते हैं और देख सकते हैं)

सेटपॉप विधि यह भी इंगित करती है कि सभी पॉप-अप विंडो दाईं ओर एक बटन जोड़ देंगी, जिस पर क्लिक करके एक घटना इस लेबल से जुड़ी होनी चाहिए:

  //... UIButton *bottomDisclosure = [UIButton buttonWithType:UIButtonTypeDetailDisclosure]; [bottomDisclosure addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(goToMarker)]]; calloutView.rightAccessoryView = bottomDisclosure; }

GoToMarker विधि को आपको अपनी आवश्यकताओं के अनुरूप बदलना होगा। मेरे मामले में, एक UIAlertView सिर्फ दबाए गए लेबल के बारे में जानकारी देता है:

 - (void)goToMarker { // Change this for your case NSDictionary *item = [self.stocks objectAtIndex:idAnn]; UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"!" message:[item objectForKey:@"title"] delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil]; [alert show]; }

अपने पॉपअप के डिज़ाइन को बदलने के लिए, आपको popupMapCalloutView फ़ंक्शन को बदलना होगा

 - (void)popupMapCalloutView { UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 260, 88)]; NSDictionary *item = [self.stocks objectAtIndex:idAnn]; UIImageView *photo = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 88.0, 88.0)]; photo.image = [UIImage imageNamed:[item objectForKey:@"img"]]; photo.contentMode = UIViewContentModeScaleAspectFit; photo.layer.cornerRadius = 15.0; photo.layer.masksToBounds = YES; [customView addSubview:photo]; //... }

मेरे मामले में, डेटा स्टॉक ऐरे से लिया जाएगा। जो तत्व दिखाया गया है वह idAnn वैरिएबल द्वारा संग्रहित है।

निष्कर्ष

बेशक, मुझे नहीं लगता है कि मैंने कुछ सरल और नफीना उदाहरण से बहुत अलग किया है, लेकिन फिर भी, मेरा गाइड रूसी बोलने वालों के लिए है (और रूसी में आईओएस के विकास के बारे में बहुत कम जानकारी है) । और मेरा उदाहरण मूल उदाहरण की कार्यक्षमता का विस्तार करता है। (इसके अलावा, मैंने अपने नियंत्रक विधियों और मूल nfarina विधियों के बीच कुछ अंतरों पर विचार नहीं किया, जिन्हें आपको संपादित करना होगा। या शायद वे करेंगे।)

मैं डेवलपर्स से अपनी गलतियों (जहां उनके बिना?) को इंगित करने के लिए कहता हूं, और इस समस्या के अन्य समाधान भी साझा करता हूं (यदि कोई नेटवर्क पर है) । और टिप्पणियों में सब कुछ पर चर्चा करें।

आप इस लिंक पर github पर मेरा उदाहरण डाउनलोड कर सकते हैं - https://github.com/IbrahimKZ/CustomCoutoutViews

IOS कार्ड में टैग पर क्लिक करने पर कस्टम पॉप-अप कैसे बनाया जाता है

उपयोग के लिए चरण-दर-चरण निर्देश

निष्कर्ष

More articles: