UIImage और resizableImageWithCapInsets

मैंने हाल ही में iOS 5 अपीयरेंस API और UINavigationBar के कस्टमाइज़ेशन का बेहतर पता लगाने के लिए एक छोटा सा उदाहरण लिखना शुरू किया। लक्ष्य नेविगेशन बार में अपनी पृष्ठभूमि, शीर्षक और पाठ जोड़ना था। जब मैंने इसे पूरा कर लिया, तो मैंने उसी Appearance API का उपयोग करके नेविगेशन बार में बटनों को सुधारने का निर्णय लिया।
जब मैं बटन अनुकूलन में डूबा हुआ था, तो मैंने iOS 5 में शुरू की गई UIImage विधि, resizableImageWithCapInsets की खोज की। मैंने तय सीमा पर काम करने के तरीके को समझने के लिए नेविगेशन बार का मजाक उड़ाने के मूल विचार से खुद को विचलित करने का फैसला किया।
( नोट अनुवादक - मुझे बेहतर अनुवाद नहीं मिला, उधार?)
यह पोस्ट मैंने जो सीखा है उसके बारे में है।

UIButton के लिए सीमाएँ निर्धारित करना

दस्तावेज़ में लिखा गया है, resizableImageWithCapInsets छवि में निश्चित सीमाएँ जोड़ता है, और जब इसे आकार दिया जाता है या स्केल किया जाता है, तो ये सीमाएँ परिवर्तित नहीं होती हैं। इसे एक उदाहरण से सबसे अच्छा समझा जा सकता है। आइए कल्पना करें कि मैं अपने इंटरफ़ेस के सभी बटन समान दिखना चाहता हूं: एक सफेद सीमा के साथ एक ढाल। नीचे इस पोस्ट के उदाहरणों के लिए एक छवि है (सफेद सीमा को बेहतर ढंग से उजागर करने के लिए एक ग्रे पृष्ठभूमि पर छवि):

उपयोग के संदर्भ के आधार पर, बटन कहीं भी दिखाई दे सकता है, और इसका आकार भिन्न हो सकता है। निम्न कोड आमतौर पर एक पृष्ठभूमि छवि के साथ एक बटन बनाने के लिए उपयोग किया जाता है:

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(80, 130, 160, 44)]; [button setTitle:@"Test Button" forState:UIControlStateNormal]; //     UIImage *buttonImage = [UIImage imageNamed:@"blueButton"]; [button addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside]; [button setBackgroundImage:buttonImage forState:UIControlStateNormal]; [[self view] addSubview:button]; 

जैसा कि आप देख सकते हैं, बटन सभी दिशाओं में फैला हुआ है। अब निश्चित सीमाओं को शामिल करने के लिए कोड बदलें। लेकिन पहले, आइए इस पद्धति के हस्ताक्षर देखें:

 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets 

थोड़ा और देखने पर, हम पाते हैं कि UIEdgeInserts को एक संरचना के रूप में परिभाषित किया गया है:

 typedef struct { CGFloat top, left, bottom, right; } UIEdgeInsets; 

UIEdgeInsets एक संरचना है जो प्रत्येक निश्चित सीमा के लिए फ्लोट मान को परिभाषित करती है: छवि के ऊपरी, बाएं, निचले और दाएं क्षेत्र। इसे हमारे बटन पर लागू करने के लिए, आपको निम्नलिखित कार्य करने होंगे:

 //     UIImage *buttonImage = [[UIImage imageNamed:@"blueButton"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)]; 

यह एक ऐसी छवि बनाएगा जिसमें मूल छवि के बाएं और दाएं 16 पिक्सेल को छोटा या आकार परिवर्तन नहीं किया जाता है जब छवि को एक बटन के आकार तक बढ़ाया जाता है। अंतिम परिणाम:

UIBarButtonItem के साथ कैप इनसेट

हम नेविगेशन बार में बटन के लिए उसी छवि का उपयोग कर सकते हैं। सीमाओं की स्थापना के बिना, बटन इस तरह दिखता है:

नीचे दिया गया कोड पूरे फ्रेम में छवि के 12 पिक्सेल के साथ एक बटन के निर्माण को प्रदर्शित करता है:

 UIImage *backButton = [[UIImage imageNamed:@"blueButton"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)]; 

अंतिम परिणाम:


लगभग। अनुवादक - इस तकनीक का उपयोग एंड्रॉइड में 9-पैच तकनीक के उपयोग के समान है, सिवाय इसके कि यहां आपको पहले से एक छवि तैयार करने की आवश्यकता नहीं है।