iPhone: Change icon’s color of UITabBarItem


Change icon’s color of UITabBarItem

เพื่อนๆ เคยคิดจะเปลี่ยนสีของ Icon ที่แสดงบน TabBar กันหรือป่าวครับ?? จากไอคอนสีฟ้า เป็นสีอื่นตามต้องการ …. จากการเซิสวิธีทำการเปลี่ยนสีของ Icon บน TabBar ร้อยละ 90 เปอร์เซ็น บอกว่า “มันเปลี่ยนไม่ได้หรอก!!!” อีก 6 เปอร์เซ็น มักจะตอบไม่ตรงคำถาม บ้างก้อแสดงวิธีการเปลี่ยนรูปภาพ บ้างก้อแสดงวิธีการเปลี่ยนพื้นหลัง ส่วนเปอร์เซ็นที่เหลือ ผมก็ไม่ทราบเช่นกัน แต่ก้อไปเจอโค้ดที่น่าสนอันนึงเลยนำมาลองดู ปรากฏว่ามันสามารถเปลี่ยนสี Icon ได้จริง เลยนำให้เพื่อนๆ ได้เปิดหูเปิดตากันบ้าง …

โค้ดนี้ผมได้มาจากบล็อก muzammilazmi.wordpress.com บทความ Customize TabBar in iPhone และนำมาปรับแต่งเล็กน้อยให้สวยงาม สิ่งที่ผมจะนำเสนอคือ โค้ดที่ต้องเพิ่มเข้ามาในไฟล์ของเรา ฟังก์ชั่นที่นำมาใช้งาน และวิธีการปรับแต่งเพิ่มเติม ดังนี้ครับ

1) เริ่มต้นด้วยการสร้างโปรเจ็ค ด้วยเทมเพจ Tab Bar Application

2) ไปที่ไฟล์ MainWindow.xib เพิ่ม TabBarItem และเลือกรูป icon ตามใจชอบ

3) กลับมายังโค้ด ไฟล์ FirstViewController.h เพิ่มโค้ดต่อจาก @end ของ @interface FirstViewController ดังนี้

@interface UITabBar (ColorExtensions)
   -(void)recolorItemsWithColor:(UIColor *)color shadowColor:(UIColor *)shadowColor
                                                shadowOffset:(CGSize)shadowOffset
                                                  shadowBlur:(CGFloat)shadowBlur;
@end
@interface UITabBarItem (Private)
   @property(retain, nonatomic) UIImage *selectedImage;
   -(void)_updateView;
@end

4) ไปยังโค้ด FirstViewController.m เพิ่มโค้ดต่อจาก @end ของ @implement FirstViewController ดังนี้

@implementation UITabBar (ColorExtensions)
-(void)recolorItemsWithColor:(UIColor *)color shadowColor:(UIColor *)shadowColor
                                             shadowOffset:(CGSize)shadowOffset
                                               shadowBlur:(CGFloat)shadowBlur{
   CGColorRef cgColor = [color CGColor];
   CGColorRef cgShadowColor = [shadowColor CGColor];
   for (UITabBarItem *item in [self items])
       if ([item respondsToSelector:@selector(selectedImage)] &&
           [item respondsToSelector:@selector(setSelectedImage:)] &&
           [item respondsToSelector:@selector(_updateView)])
       {
           CGRect contextRect;
           contextRect.origin.x = 0.0f;
           contextRect.origin.y = 0.0f;
           contextRect.size = [[item selectedImage] size];
           // Retrieve source image and begin image context
           UIImage *itemImage = [item image];
           CGSize itemImageSize = [itemImage size];
           CGPoint itemImagePosition;
           itemImagePosition.x = ceilf((contextRect.size.width - itemImageSize.width) / 2);
           itemImagePosition.y = ceilf((contextRect.size.height - itemImageSize.height) / 2);
           UIGraphicsBeginImageContext(contextRect.size);
           CGContextRef c = UIGraphicsGetCurrentContext();
           // Setup shadow
           CGContextSetShadowWithColor(c, shadowOffset, shadowBlur, cgShadowColor);
           // Setup transparency layer and clip to mask
           CGContextBeginTransparencyLayer(c, NULL);
           CGContextScaleCTM(c, 1.0, -1.0);
           CGContextClipToMask(c,
                               CGRectMake(itemImagePosition.x, -itemImagePosition.y, itemImageSize.width, -itemImageSize.height),
                               [itemImage CGImage]);
           // Fill and end the transparency layer
           CGContextSetFillColorWithColor(c, cgColor);
           contextRect.size.height = -contextRect.size.height;
           CGContextFillRect(c, contextRect);
           CGContextEndTransparencyLayer(c);
           // Set selected image and end context
           [item setSelectedImage:UIGraphicsGetImageFromCurrentImageContext()];
           UIGraphicsEndImageContext();
           // Update the view
           [item _updateView];
       }//end if
}
@end

5) ถ้ารันโปรแกรมดูก่อน หากไม่มีเออเรอ แสดงว่าใช้ได้ แต่โปรแกรมเมื่อรันออกมาแล้ว สีของ icon ของแท็บที่ถูกเลือกจะยังเป็นสีฟ้าอยู่

6) เพิ่มโค้ดเพื่อเรียกใช้ฟังก์ชั่นของ UITabBar ที่เราได้ประกาศและเขียนเพิ่มเติมใน ฟังก์ชั่น viewDidLoad ในไฟล์ FirstViewController.m ดังนี้

[[[self tabBarController] tabBar] recolorItemsWithColor:[UIColor greenColor]
                                            shadowColor:[UIColor blackColor]
                                           shadowOffset:CGSizeMake(0.0f, -1.0f)
                                             shadowBlur:3.0f];

ผลลัพธ์เมื่อรันดูจะสีของไอคอนของแท็บที่เลือกเป็นสีเขียว

7) อธิบายโค้ดการใช้ฟังก์ชั่นกันสักหน่อย

recolorItemsWithColor  คือ สีที่ต้องการจะเปลี่ยนให้กับแท็บที่ถูกเลือก   ใส่ค่า UIColor
shadowColor                    คือ สีของเงา                                                            ใส่ค่า UIColor
shadowOffset                   คือ การแสดงขนาดของเงา                                    ใส่ค่า CGSize
shadowBlur                      คือ ค่าความเบลอของเงา                                       ใส่ค่า CGFloat

8) Bonus!! เพิ่ม overlay สีโปร่งใส่ให้กับ icon โดยเพิ่มเติมต่อจากส่วนของ // Fill and end the transparency layer โดยแทรกที่บรรทัดก่อน CGContextEndTransparencyLayer(c); ด้วยโค้ดดังต่อไปนี้


// Fill the overlay layer
CGContextSetFillColorWithColor(c, [[[UIColor alloc] initWithWhite:1.0f alpha:0.5f] CGColor]);
contextRect.size.height = contextRect.size.height/2;
CGContextFillRect(c, contextRect);

//end
CGContextEndTransparencyLayer(c);

ผลลัพธ์เราจะได้ สีขาวโปร่งมาทับบนไอคอนของเราทำให้ ไอคอนดูมีมิติยิ่งขึ้น

จากตัวอย่างเป็นเพียงแค่การนำโค้ดมาพัฒนาต่อเท่านั้นเอง ในส่วนตัวแล้วยังไม่คล่องกับการใช้งานด้านกราฟฟิคฟังก์ชั่นมากนัก จึงอธิบายแต่ละฟังก์ชั่นไม่ได้ แต่อีกไม่นานเดี๋ยวจะมีตัวอย่างเกี่ยวกับเรื่องของกราฟฟิคฟังก์ชั่นต่างๆ ที่ใช้ใน iPhone พร้อมตัวอย่างการใช้งานมาให้ศึกษากันนะครับ รอติดตามชมกันได้

Reference

คำเตือน โค้ดข้างต้นนี้เป็นโค้ดแบบ Private API หรือเรียกว่า Non Public API ดังนั้นหากเราเขียนโค้ดนี้ แล้วอัพเข้า app store จะถูก Reject ทันทีนะครับ

เนื่องจากฟังก์ชั่น _updateView ไม่ปรากฏการ implement ฟังก์ชั่นนี้ ดังนั้นอาจจะเป็นการแอบแฝงโค้ดที่ทำอันตรายกับทาง apple เอาไว้ ดังนั้นเขาจึง Reject แอพที่เขียนด้วย Non Public API ด้วยการแจ้งเตือนดังนี้

2.5: Apps that use non-public APIs will be rejected

ดังนั้น หากต้องการอัพเข้า app store จึงไม่ควรใช้โค้ดข้างต้นที่ผมนำมาเสนอนี้นะครับ แต่สามารถใช้ทดสอบโปรแกรมได้เฉยๆ

สนใจอ่านต่อได้ที่ http://stackoverflow.com/questions/1355480/preventing-a-uitabbar-from-applying-a-gradient-to-its-icon-images

adaydesign :)

About adaydesign

นักพัฒนาแอพพลิเคชั่นบนโมบาย [iPhone Android] คนหนึ่งซึ่งอยากจะบันทึกเรื่องราวของเส้นทางนักพัฒนาโมบายแอพพลิเคชั่นเอาไว้ในบล็อคน้อยๆ แห่งนี้ เผื่อจะแบ่งบันและแลกเปลี่ยนความรู้ให้กับคนอื่นๆ ได้บ้าง :) Mobile Application Developer; Flash Mobile, iPhone/iPad, Android Mobile Phone/Tablet and Blackberry Playbook.

Posted on เมษายน 8, 2011, in [Dev] iOS, [Link] iOS and tagged , , , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: