UIPopoverController की उपस्थिति को अनुकूलित करना

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

एक लेख केवल Apple प्रलेखन का अनुवाद या पुनर्प्रकाशन नहीं है। मैं एक वास्तविक परियोजना में एक समस्या में भाग गया, सामग्री को खुद के माध्यम से पारित किया (शब्द के अच्छे अर्थ में), एक अच्छी तरह से चबाया गया स्पष्टीकरण तैयार किया, और आखिरकार, यह सब एक ठोस कार्यान्वयन के साथ अनुभवी किया, जो आपके लिए काम आ सकता है।

इसकी आवश्यकता क्यों है?

जैसा कि मैंने ऊपर लिखा था, एक विशिष्ट परियोजना के उदाहरण के लिए मुझे इस तरह की आवश्यकता का सामना करना पड़ा। प्रारंभ में, आवेदन iPhone के लिए लिखा गया था और लाल रंग में "पूरा", अर्थात्, UINavigationBar क्लास की appearance विधि का उपयोग किया गया था

 [[UINavigationBar appearance] setTintColor: [UIColor colorWithRed:0.481 green:0.065 blue:0.081 alpha:1.000]]; [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navbar"] forBarMetrics:UIBarMetricsDefault]; 

परिणाम कुछ इस प्रकार था:

जब उन्होंने मौजूदा एप्लिकेशन के आधार पर एक iPad संस्करण बनाना शुरू किया, तो उन्हें UINavigationController अंदर UINavigationController डालने की आवश्यकता थी।

यदि आप पॉपओवर के अंदर प्रदर्शित होते हैं, तो आप निश्चित रूप से UINavigationBar वर्ग के लिए डिफ़ॉल्ट उपस्थिति लौटा सकते हैं

 [[UINavigationBar appearanceWhenContainedIn:[UIPopoverController class], nil] setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; [[UINavigationBar appearanceWhenContainedIn:[UIPopoverController class], nil] setTintColor:[UIColor clearColor]]; 

सिद्धांत रूप में, यह घातक नहीं है, लेकिन, कहते हैं, ग्राहक (और वह हमेशा सही है) ने कहा कि यह उस तरह से नहीं जाएगा और "पॉपओवर को फिर से याद करेगा!" यह वह popoverBackgroundViewClass है popoverBackgroundViewClass वर्ग popoverBackgroundViewClass संपत्ति UIPopoverController । हमारा कार्य UIPopoverBackgroundView वर्ग को विरासत में UIPopoverBackgroundView , स्पष्ट रूप से प्रलेखन के बाद।

एक UIPopoverBackgroundView

प्रलेखन, ज़ाहिर है, विस्तार से वर्णन करता है कि क्या और कैसे करना है, ओवरराइड करने के तरीके और क्यों। इसके अलावा, व्यावहारिक सिफारिशें दी गई हैं - पृष्ठभूमि और तीर खींचने के लिए छवियों और UIImageView वर्ग का उपयोग करना बेहतर है। यह सब "शब्दों में" है, मैं व्यक्तिगत रूप से पाठ को अधिक आसानी से अनुभव करता हूं यदि चित्र इसके साथ संलग्न हैं, तो मैं इस "अंतर" को भरने की कोशिश करूंगा। समानांतर में, हम UIPopoverBackgroundView के हमारे विशिष्ट उपवर्ग के कार्यान्वयन को लिखना शुरू करेंगे। पहली चीज जो हम करेंगे, वह केवल इसे विरासत में मिली है और इसे लागू करने के बिना अब के लिए छोड़ दें।

 #import <UIKit/UIPopoverBackgroundView.h> @interface MBPopoverBackgroundView : UIPopoverBackgroundView @end 

एक UIPopoverController शरीर रचना UIPopoverController

UIPopoverController में एक एरो (एरो), बैकग्राउंड (बैकग्राउंड), कंटेंट या कंटेंट (कंटेंट व्यू), और यूआईवाईयूवाई शामिल होता है जिसमें यह सारा सामान समाहित और रेंडर होता है।

तीर

वास्तव में, इस संदर्भ में "तीर" एक विशुद्ध रूप से आलंकारिक शब्द है। हम केवल अपनी कल्पना और सामान्य ज्ञान द्वारा सीमित हैं, तीर की उपस्थिति का चयन करते हैं। यह एक धराशायी रेखा, एक वक्र, एक मनमाना चित्र हो सकता है। हम ओवरराइड draw पद्धति के साथ सिर्फ UIView उपयोग कर सकते हैं और gl*** फ़ंक्शन के साथ ड्रा कर सकते हैं, हम एनिमेटेड UIImageView आदि का उपयोग कर सकते हैं। याद रखने वाली एकमात्र चीज़ तीर के आधार ( arrowBase ) की चौड़ाई है और इसकी ऊंचाई ( arrowHeight ) हमारी कक्षा के सभी उदाहरणों के लिए अपरिवर्तित रहती है। हालांकि इस प्रतिबंध को कुछ हद तक दरकिनार किया जा सकता है, लेकिन बाद में उस पर और अधिक।

अभी के लिए, UIImageView Apple की सलाह के बाद, तीर का प्रतिनिधित्व करने UIImageView लिए एक UIImageView चुनें। इसके अलावा, वर्ग +(CGFloat)arrowBase और +(CGFloat)arrowHeight के तरीकों पर ध्यान +(CGFloat)arrowHeight । डिफ़ॉल्ट रूप से, वे दोनों एक अपवाद को फेंक देते हैं, इसलिए हमें उन्हें अपने उपवर्ग में पुनर्परिभाषित करना चाहिए।

प्रस्तुति की सादगी के लिए, हम केवल इस बात से सहमत हैं कि हमारे पास तीर की छवि है और इसे "popover-arrow.ng" फ़ाइल में संग्रहीत किया गया है। अब आप सुरक्षित रूप से यह सब कोड कर सकते हैं

 @interface MBPopoverBackgroundView () // image view   @property (nonatomic, strong) UIImageView *arrowImageView; @end @implementation MBPopoverBackgroundView @synthesize arrowImageView = _arrowImageView; //   (arrow base) + (CGFloat)arrowBase { //    return [UIImage imageNamed:@"popover-arrow.png"].size.width; } //   (arrow height) + (CGFloat)arrowHeight { //    return [UIImage imageNamed:@"popover-arrow.png"].size.height; } //  - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (!self) return nil; //  image view   self.arrowImageView = [[UIImageView alloc] initWithImage:@"popover-arrow.png"]; [self addSubview:_arrowImageView]; return self; } @end 

लेकिन यह सब तीर के बारे में नहीं है। हमारी ज़िम्मेदारियों में दो संपत्तियों को पछाड़ना भी शामिल है।

 @property (nonatomic, readwrite) UIPopoverArrowDirection arrowDirection; @property (nonatomic, readwrite) CGFloat arrowOffset; 

अन्यथा, हम उनमें से किसी के लिए सेटर या गेट्टर को कॉल करने की कोशिश करते समय एक ही अपवाद को पकड़ लेंगे।

तीर की दिशा ( arrowDirection ) हमें बताती है कि तीर कहाँ (ऊपर, नीचे, बाएँ, दाएँ) इंगित करता है और कहाँ वास्तव में है। एरो ऑफसेट ( arrowOffset ) हमारे दृश्य के केंद्र से तीर की केंद्र के माध्यम से गुजरने वाली रेखा तक की दूरी है, सामान्य तौर पर, चित्रण को देखें, वहां सब कुछ स्पष्ट रूप से दिखाया गया है, ऑफसेट नीले रंग में चिह्नित हैं। ऑफसेट और बाईं ओर नकारात्मक मान है।


प्रलेखन इन संपत्तियों के लिए सेटर और गेट्टर को लागू करने की सिफारिश करता है। लेकिन व्यवहार में, मुझे पता चला कि आप इन गुणों की घोषणा कर सकते हैं और आवश्यक तरीकों को संश्लेषित कर सकते हैं

 @interface MBPopoverBackgroundView () //       @property (nonatomic, readwrite) UIPopoverArrowDirection arrowDirection; @property (nonatomic, readwrite) CGFloat arrowOffset; @end @implementation MBPopoverBackgroundView @synthesize arrowDirection = _arrowDirection; @synthesize arrowOffset = _arrowOffset; @end 

इनमें से किसी भी गुण को बदलना एक संकेत है जिसे आपको तीर और पृष्ठभूमि के आकार और स्थान को बदलने की आवश्यकता है। हम इन उद्देश्यों के लिए कुंजी-मूल्य अवलोकन तंत्र का उपयोग करेंगे। जैसे ही संपत्ति बदल गई है - हमें हमारे MBPopoverBackgroundView को MBPopoverBackgroundView कि यह समय है कि बच्चों को ( MBPopoverBackgroundView - MBPopoverBackgroundView ) को उनके स्थानों पर साफ किया जाए, यानी। कॉल setNeedsLayout यह, बदले में, अगले उपयुक्त क्षण (जब वास्तव layoutSubviews ओएस निर्णय लेता है) पर layoutSubviews को कॉल करेगा। layoutSubviews क्रियान्वयन के बारे में विस्तार से चर्चा की जाएगी।

 - (id)initWithFrame:(CGRect)frame { // ***   *** [self addObserver:self forKeyPath:@"arrowDirection" options:0 context:nil]; [self addObserver:self forKeyPath:@"arrowOffset" options:0 context:nil]; return self; } - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context { //         //         setNeedsLayout [self setNeedsLayout]; } - (void)dealloc { [self removeObserver:self forKeyPath:@"arrowDirection"]; [self removeObserver:self forKeyPath:@"arrowOffset"]; // ***  "" *** [super dealloc]; } 

पृष्ठभूमि

तीर के बारे में जो कहा जाता है, वह ज्यादातर पृष्ठभूमि पर लागू होता है। हम एक विशिष्ट कार्यान्वयन के लिए UIImageView भी चुनेंगे। लेकिन, जबकि तीर अपना आकार नहीं बदलता है, पृष्ठभूमि पूरी तरह से अलग तरीके से व्यवहार करती है। आपके आवेदन में, आप कई उद्देश्यों के लिए और विभिन्न आकारों की सामग्री के अंदर पॉपओवर का उपयोग करेंगे। छोटे टूलटिप और स्क्रीन के फर्श पर अकल्पनीय पॉपओवर दोनों के लिए पृष्ठभूमि समान रूप से अच्छी दिखनी चाहिए। Apple resizableImageWithCapInsets:(UIEdgeInsets)capInsets इमेज का उपयोग करने की सलाह देता है; UIImageView वर्ग इन उद्देश्यों के लिए resizableImageWithCapInsets:(UIEdgeInsets)capInsets विधि प्रदान करता है। उदाहरण के लिए, मैंने एक साधारण पृष्ठभूमि बनाई, गोल कोनों के साथ एक 128x128 आयत और ग्रेडिएंट, छाया और अन्य प्रभावों के बिना एक रंग से भरा। फ़ाइल को "popover-background.png" नाम दें।

 @property (nonatomic, strong) UIImageView *backgroundImageView; // *** @synthesize backgroundImageView = _backgroundImageView; - (id)initWithFrame:(CGRect)frame { // *** UIEdgeInsets bgCapInsets = UIEdgeInsetsMake(12, 12, 12, 12); UIImage *bgImage = [[UIImage imageNamed:@"popover-backgroung.png"] resizableImageWithCapInsets:bgCapInsets]; self.backgroundImageView = [[UIImageView alloc] initWithImage:bgImage]; [self addSubview:_backgroundImageView]; // *** } 

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

सामग्री

सामग्री या सामग्री वह है जो पॉपओवर के अंदर प्रदर्शित होती है। UIPopoverBackgroundView के संदर्भ में UIPopoverBackgroundView हमारे पास सामग्री और उसके आकार पर कोई प्रभाव नहीं है, इसके विपरीत, सामग्री का आकार UIPopoverBackgroundView के आकार को निर्धारित करता है, और इसलिए UIPopoverBackgroundView का आकार।

यहाँ है कि यह कैसे जाता है। जब UIPopoverController तैयार करने के लिए तैयार है, तो यह बिल्कुल जानता है कि सामग्री का आकार और कहां से UIPopoverController को आकर्षित करना है, यह केवल यह जानने के लिए है कि तीर और पृष्ठभूमि को फिट करने के लिए किनारों पर कितना अधिक जोड़ना है, दूसरे शब्दों में, हमारे MBPopoverBackgroundView लिए frame संपत्ति की गणना करें।

यह इन उद्देश्यों के लिए है कि +(CGFloat)arrowHeight और +(UIEdgeInsets)contentViewInsets । पहला तीर की ऊँचाई को बताता है, दूसरा कहता है कि पृष्ठभूमि में कितनी अधिक सामग्री है, सामग्री के किनारों से पृष्ठभूमि के किनारों तक संकेतक लौटाता है। इस सभी जानकारी का उपयोग करते हुए, UIPopoverController तीर के लिए दिशा का चयन करेगी और UIPopoverBackgroundView वर्ग (अधिक सटीक रूप से, हमारे विशेष उपवर्ग) के ऑब्जेक्ट को इनिशियलाइज़ UIPopoverBackgroundView , इसे विशिष्ट आकार UIPopoverBackgroundView , जिसके बाद हमें अपना तीर और बैकग्राउंड जैसा होना चाहिए।

सामग्री को फिर से परिभाषित contentViewInsets । एक उदाहरण के लिए हम सभी किनारों पर समान 10 का संकेत देंगे। आप नकारात्मक संकेत भी सेट कर सकते हैं, मुझे नहीं लगता कि कुछ अच्छा होगा, लेकिन आप कर सकते हैं ...

 + (UIEdgeInsets)contentViewInsets { //        return UIEdgeInsetsMake(10, 10, 10, 10); } 

अब हमारी सामग्री के चारों ओर 10 पिक्सेल मोटी पृष्ठभूमि से एक फ्रेम होगा।

स्थान (लेआउट)

और अंत में, अंतिम चरण तीर और पृष्ठभूमि को सही ढंग से स्थिति देने के लिए है, तीर की दिशा, इसके ऑफसेट और हमारे UIPopoverBackgroundView के विशिष्ट आयामों को UIPopoverBackgroundView ।
ऐसा करने के लिए, हम layoutSubviews विधि को लागू करते हैं।

 #pragma mark - Subviews Layout //  ,     setNeedsLayout    - (void)layoutSubviews { //          //  CGRect bgRect = self.bounds; //   ,       ""  // ,  / ,    BOOL cutWidth = (_arrowDirection == UIPopoverArrowDirectionLeft || _arrowDirection == UIPopoverArrowDirectionRight); //     ,       bgRect.size.width -= cutWidth * [self.class arrowHeight]; BOOL cutHeight = (_arrowDirection == UIPopoverArrowDirectionUp || _arrowDirection == UIPopoverArrowDirectionDown); //     ,       bgRect.size.height -= cutHeight * [self.class arrowHeight]; // ,   origin point (  ) //      ( )   ( ) if (_arrowDirection == UIPopoverArrowDirectionUp) { bgRect.origin.y += [self.class arrowHeight]; } else if (_arrowDirection == UIPopoverArrowDirectionLeft) { bgRect.origin.x += [self.class arrowHeight]; } //        _backgroundImageView.frame = bgRect; //  -    (arrowDirection)   (arrowOffset)    //   ,     image view      //      (  transformations),      // :          CGRect arrowRect = CGRectZero; UIEdgeInsets bgCapInsets = UIEdgeInsetsMake(12, 12, 12, 12); //      switch (_arrowDirection) { case UIPopoverArrowDirectionUp: _arrowImageView.transform = CGAffineTransformMakeScale(1, 1); //  -  // :  frame,   bounds,   bounds     arrowRect = _arrowImageView.frame; //     origin arrowRect.origin.x = self.bounds.size.width / 2 + _arrowOffset - arrowRect.size.width / 2; arrowRect.origin.y = 0; break; case UIPopoverArrowDirectionDown: _arrowImageView.transform = CGAffineTransformMakeScale(1, -1); //    () arrowRect = _arrowImageView.frame; //     origin arrowRect.origin.x = self.bounds.size.width / 2 + _arrowOffset - arrowRect.size.width / 2; arrowRect.origin.y = self.bounds.size.height - arrowRect.size.height; break; case UIPopoverArrowDirectionLeft: _arrowImageView.transform = CGAffineTransformMakeRotation(-M_PI_2); //   90     arrowRect = _arrowImageView.frame; //     origin arrowRect.origin.x = 0; arrowRect.origin.y = self.bounds.size.height / 2 + _arrowOffset - arrowRect.size.height / 2; //   -        //       ,      // ,    bgCapInsets.bottom,      //    arrowRect.origin.y = fminf(self.bounds.size.height - arrowRect.size.height - bgCapInsets.bottom, arrowRect.origin.y); //           arrowRect.origin.y = fmaxf(bgCapInsets.top, arrowRect.origin.y); break; case UIPopoverArrowDirectionRight: _arrowImageView.transform = CGAffineTransformMakeRotation(M_PI_2); //   90     arrowRect = _arrowImageView.frame; arrowRect.origin.x = self.bounds.size.width - arrowRect.size.width; arrowRect.origin.y = self.bounds.size.height / 2 + _arrowOffset - arrowRect.size.height / 2; //     UIPopoverArrowDirectionLeft arrowRect.origin.y = fminf(self.bounds.size.height - arrowRect.size.height - bgCapInsets.bottom, arrowRect.origin.y); arrowRect.origin.y = fmaxf(bgCapInsets.top, arrowRect.origin.y); break; default: break; } //       _arrowImageView.frame = arrowRect; } 

छू मंतर

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

मैं अधिक लचीलापन रखना चाहूंगा, जिसे मैंने करने की कोशिश की।
मैंने बोलने के नाम के साथ कुछ वर्ग विधियाँ जोड़ी हैं

 @interface MBPopoverBackgroundView : UIPopoverBackgroundView //     + (void)initialize; //  (  ) + (void)cleanup; //    (  ) + (void)setArrowImageName:(NSString *)imageName; //       + (void)setBackgroundImageName:(NSString *)imageName; //      + (void)setBackgroundImageCapInsets:(UIEdgeInsets)capInsets; //      + (void)setContentViewInsets:(UIEdgeInsets)insets; //      @end 

बेशक, इस वर्ग के सभी ऑब्जेक्ट एक ही तीर और पृष्ठभूमि को आकर्षित करेंगे, लेकिन आपके पास इसे बदलने के बिना विभिन्न परियोजनाओं में एक ही कोड का उपयोग करने का अवसर है। यदि एक आवेदन के भीतर आपको अलग-अलग रंगों और रंगों के MBPopoverBackgroundView की आवश्यकता होती है - तो बस एक ही MBPopoverBackgroundView , प्रत्येक उपस्थिति के लिए एक उत्तराधिकारी या कॉल करें set*** पिछले एक से अलग एक MBPopoverBackgroundView बनाने से पहले हर बार MBPopoverBackgroundView लिए कॉल करें। संक्षेप में, लचीलापन ...

 //   @interface MBPopoverBackgroundViewBlue : MBPopoverBackgroundView @end //    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { //  [MBPopoverBackgroundView initialize]; //     [MBPopoverBackgroundView setArrowImageName:@"popover-arrow-red.png"]; [MBPopoverBackgroundView setBackgroundImageName:@"popover-background-red.png"]; [MBPopoverBackgroundView setBackgroundImageCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)]; [MBPopoverBackgroundView setContentViewInsets:UIEdgeInsetsMake(10, 10, 10, 10)]; //     "" [MBPopoverBackgroundViewBlue setArrowImageName:@"popover-callout-dotted-blue.png"]; [MBPopoverBackgroundViewBlue setBackgroundImageName:@"popover-background-blue.png"]; [MBPopoverBackgroundViewBlue setBackgroundImageCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)]; [MBPopoverBackgroundViewBlue setContentViewInsets:UIEdgeInsetsMake(20, 20, 20, 20)]; // *** } //    { UIPopoverController *popoverCtl = ...; popoverCtl.popoverBackgroundViewClass = [MBPopoverBackgroundView class]; //  popoverCtl.popoverBackgroundViewClass = [MBPopoverBackgroundViewBlue class]; //   // *** } 

स्पष्ट परिणाम

MBPopoverBackgroundView स्रोत और उपयोग उदाहरण github पर हैं ।
कार्यान्वयन एआरसी का उपयोग नहीं करता है , इसलिए फ्लैग -fno-objc-arc को मत भूलना यदि आप ARC सक्षम के साथ एक परियोजना में इसका उपयोग करते हैं, या कोड में हैं जो कुछ -fno-objc-arc , release और dealloc कॉल को हटा दें। बाद के मामले में, मुझे नहीं पता कि स्थैतिक शब्दकोश s_customValuesDic कितनी देर तक जीवित रहेगा, क्योंकि s_customValuesDic इसे स्पष्ट रूप s_customValuesDic नहीं s_customValuesDic जाएगा, हालांकि एआरसी के तर्क के अनुसार, यह तब तक स्थिर वस्तु को नहीं s_customValuesDic जब तक कि आवेदन समाप्त नहीं हो जाता। और मुझे बिल्कुल नहीं लगता कि इस तरह से मूल्यों को संग्रहीत करना सबसे अच्छा समाधान है, हालांकि यह स्थिर और मज़बूती से काम करता है।

सामग्री का इस्तेमाल किया

• UIPopover कक्षा संदर्भ
• UIPopoverBackgroundView क्लास संदर्भ
• IOS के लिए कंट्रोलर कैटलॉग देखें - पॉपओवर
• iPad- विशिष्ट नियंत्रक