iPhone: Adding a Background Image of UITabBar


Adding a Background Image of UITabBar

จากบทความที่แล้วเกี่ยวกับ UITabBar ผมได้นำโค้ดที่ใช้ในการเปลี่ยนสีของไอคอนในแท็บที่ถูกเลือกมาให้เพื่อนๆ ได้ศึกษากัน (iPhone: Change icon’s color of UITabBarItem) ในบทความนี้ก็ต่อเนื่องจากบทความดังกล่าวครับคือ เราจะมาเปลี่ยนพื้นหลังของ UITabBar กันให้เป็นสีและภาพตามที่เราต้องการ

หลักการของการเปลี่ยนสีหรือภาพพื้นหลังของ UITabBar นั้นง่ายนิดเดียว คือ การเซ็ต View ไปที่ indexที่ 0 ของ UITabBar ของเรา และ View ดังกล่าวเราสามารถตกแต่งได้อย่างอิสระ

code:

//change background tabbar
CGRect frameSize = CGRectMake(0, 0,self.tabBarController.tabBar.frame.size.width, 48);
UIView *bgView = [[UIView alloc] initWithFrame:frameSize];

//change background image
UIColor *bgColorPattern = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"tabbar_bg.png"]];

//change background color (เอาคอมเม้นด้านล่างออกแล้ว คอมเม้นในส่วนของโค้ดด้านบน)
//UIColor *bgColorPattern = [[UIColor alloc] initWithRed:0.2f green:0.8f blue:0.85f alpha:0.7f];

[bgView setBackgroundColor:bgColorPattern];
[self.tabBarController.tabBar insertSubview:bgView atIndex:0];

[tabbar_bg.png]

เป็นไงครับ ง่ายใช่มั้ยหละครับ ลองฝึกกันดูนะครับ การปรับแต่ง View เพื่อนำไปใช้กับส่วนต่างๆ ในโปรแกรม ยังจำเป็นอีกมาก หากเราชำนาญแล้วจะดัดแปลงไง ก็ไม่ใช่เรื่องยากอีกต่อไป

บทความที่เกี่ยวข้อง

Reference

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: