प्रोग्रामिंग के रूप में UIImage बनाकर मैं UITabBar शीर्ष सीमा का रंग कैसे बदल सकता हूं?

Question

मेरी समझ से, का एकमात्र तरीका शीर्ष सीमा के रंग को पृष्ठभूमि छवि (320x49, शीर्ष पर पिक्सेल लाइन के साथ) सेट करना है। ऐसा लगता है कि यह एकमात्र तरीका है (अगर मैं गलत हूं तो कृपया मुझे सही करें)।

क्या कोई छवि फ़ाइल का उपयोग कर के बिना करने का कोई तरीका है? उदाहरण के लिए, कोई मुझे कोड से एक UIImage बनाने के द्वारा NavigationBar निचली सीमा को बदलने में मदद की:

UINavigationBar.appearance().shadowImage = UIImage.colorForNavBar(UIColor.redColor()) 

extension UIImage { 
    class func colorForNavBar(color: UIColor) -> UIImage { 
     let rect = CGRectMake(0.0, 0.0, 1.0, 1.0) 
     UIGraphicsBeginImageContext(rect.size) 
     let context = UIGraphicsGetCurrentContext() 

     CGContextSetFillColorWithColor(context, color.CGColor) 
     CGContextFillRect(context, rect) 

     let image = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 

     return image 
    } 
} 

यह समाधान वास्तव में अच्छी तरह से काम करता है; यह मेरी निचली सीमा का रंग बदलता है।

मैंने इसे टैबबार पर लागू करने का प्रयास किया, लेकिन कुछ भी नहीं बदला।

UITabBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor())

Answer 1

आप काफी अपने खुद के सवाल का जवाब दे दिया है। आप अपने UITabBar के साथ वही काम कर सकते हैं जैसा आपने अपने UINavigationBar के साथ किया था। यदि आप छाया छवि को बदलना चाहते हैं (यानी "शीर्ष सीमा"), तो आपको पृष्ठभूमि छवि को बदलना होगा। Apple से सीधे:

टैब बार के लिए कस्टम छाया छवि। इस विशेषता को अनदेखा किया जाता है यदि टैब बार में कस्टम पृष्ठभूमि छवि भी नहीं है। इस विशेषता को प्रोग्रामेटिक रूप से सेट करने के लिए, छाया इमेज प्रॉपर्टी का उपयोग करें।

अपना स्वयं का प्रश्न में आप इस के बारे में पता होने लगते हैं:

शीर्ष बॉर्डर का रंग बदलने का एकमात्र तरीका (, 320x49 शीर्ष पर पिक्सेल लाइन के साथ) पृष्ठभूमि छवि स्थापित करने के लिए है

सिवाय इसके कि यह पृष्ठभूमि छवि नहीं है जिसमें शीर्ष पर एक रेखा है। आपको बस पृष्ठभूमि छवि को किसी भी चीज़ पर सेट करना होगा, फिर आप अपनी छवि को छाया छवि सेट कर सकते हैं।

// White background with red border on top 
UITabBar.appearance().backgroundImage = UIImage.colorForNavBar(.whiteColor()) 
UITabBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor()) 

Answer 2

आप UINavigationBar.appearance().backgroundImage के लिए एक अलग छवि प्रदान करने के लिए की जरूरत है।

उदाहरण के लिए:

UINavigationBar.appearance().backgroundImage = UIImage.colorForNavBar(.blackColor()) 
UINavigationBar.appearance().shadowImage = UIImage.colorForNavBar(.redColor()) 

Answer 3

:

आप को खोलते हैं, तो सरल, तो आप उस कोड के इन दो पंक्तियों (और अपने UIImage विस्तार कोड) जोड़ने मिल जाएगा वास्तव में काम "टैब किए गए आवेदन" Xcode भीतर टेम्पलेट

आम तौर पर, अन्य उत्तरों को यह सही मिला - आपको पृष्ठभूमि छवि और छाया छवि दोनों सेट करना होगा। हालांकि, ऐसा करने से बार अपने पारदर्शिता (धुंध) को छोड़ देगा; यहां तक ​​कि यदि आप एक पारदर्शी छवि सेट करते हैं, तो बार पारदर्शी नहीं होगा, पारदर्शी नहीं होगा।

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

my GitHub demo project देखें।

यहाँ परिणाम का एक स्क्रीनशॉट है:

के बाद आप अपनी परियोजना में मेरी subview में शामिल हैं, सिर्फ रंग सेट करने के निम्न पंक्ति का उपयोग करें:

if let tabBar = tabBarController?.tabBar as? ColoredHairlineTabBar { 
    tabBar.hairlineColor = ... //Your color 
} 

Answer 4

के बारे में बस क्या UITabBar को उपclassing और लेआउट Subviews में देखने के लिए एक नया sublayer जोड़ना।

स्विफ्ट उदाहरण:

override func layoutSubviews() { 
    super.layoutSubviews() 

    let topBorder = CALayer() 

    let borderHeight: CGFloat = 2 

    topBorder.borderWidth = borderHeight 
    topBorder.borderColor = UIColor.redColor().CGColor 
    topBorder.frame = CGRect(x: 0, y: -1, width: self.frame.width, height: borderHeight) 

    self.layer.addSublayer(topBorder) 
} 

Answer 5

यहाँ स्विफ्ट 3 समाधान है:

extension UIImage { 
    class func colorForNavBar(color: UIColor) -> UIImage { 
     let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 1.0) 
     // Or if you need a thinner border : 
     // let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 0.5) 
     UIGraphicsBeginImageContext(rect.size) 
     let context = UIGraphicsGetCurrentContext() 

     context!.setFillColor(color.cgColor) 
     context!.fill(rect) 

     let image = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 

     return image! 
    } 
} 

आप दोनों सेट किया है UITabBarController

UITabBar.appearance().backgroundImage = UIImage.colorForNavBar(color: .white) 
UITabBar.appearance().shadowImage = UIImage.colorForNavBar(color: .red)