วันศุกร์ที่ 8 เมษายน พ.ศ. 2554

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 ดังนี้



[sourcecode language="objc"]
@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
[/sourcecode]

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




[sourcecode language="objc"]
@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
[/sourcecode]

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



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



[sourcecode language="objc"]
[[[self tabBarController] tabBar] recolorItemsWithColor:[UIColor greenColor]
shadowColor:[UIColor blackColor]
shadowOffset:CGSizeMake(0.0f, -1.0f)
shadowBlur:3.0f];
[/sourcecode]

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



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


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


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




[sourcecode language="objc"]

// 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);

[/sourcecode]

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







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



Reference




adaydesign :)

ไม่มีความคิดเห็น:

แสดงความคิดเห็น