iOS5版本中定制用户界面的代码片段

转自:http://www.cnblogs.com/lovecode/articles/2288014.html
感觉是翻译的:http://www.altinkonline.nl/tutorials/xcode/uinavigationbar/customizing-background-tintcolor-and-selected-image/

在iOS5推出之前,要实现标准界面的定制化设计,对于开发者来说不是那么简单的。尽管创建drawRect的子类或覆盖drawRect类是个不错的办法,但仍是项艰巨的任务。
iOS5给我们带来了众多新API,其中有些可以让开发者轻松定制不同UIKit界面控制元素的外观。譬如:
给视图添加背景图片
即在viewDidLoad方法中加入:

[[self view] setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"background.png"]]];


就是说对于UIView虽然没有backgroundImage这样的直接明义的属性,但是可使用backgroundColor属性来实现背景图片的添加。
定制UINavigationBar
a. UINavigationBar现在可以直接设置backgroundImage属性
b. UIImage还提供了新的resizableImageWithCapInsets方法,让开发者方便地创建可调整大小的图片
当然,若是在一个视图控制器文件代码中使用以上API只能直接设置当前视图自身导航栏的背景图片,其他视图中仍然要手动修改才能实现。iOS5允许我们一次性定制“同一级别的”界面元素使用类似的外观。即在应用程序委托文件中,application:didFinishedLaunchingWithOptions:方法的上面添加一个新的方法用于定制界面外观:

- (void)customizeAppearance {
    //创建可调整大小的图像
    UIImage *navbgpic1 = [[UIImage imageNamed:@"bgpic_44"] resizableImageWithCapInsets:UIEdgeInsetsMake(0,0,0,0)];
   
    UIImage *navbgpic2 = [[UIImage imageNamed:@"bgpic_32"] resizableImageWithCapInsets:UIEdgeInsetsMake(0,0,0,0)];

    //为所有导航栏设置背景图片
    [[UINavigationBar appearance] setBackgroundImage:navbgpic1  forBarMetrics:UIBarMetricsDefault];
   
     [[UINavigationBar appearance] setBackgroundImage:navbgpic2  forBarMetrics:UIBarMetricsLandscapePhone];

    // 为所有导航栏设置标题文本样式
    [[UINavigationBar appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0], UITextAttributeTextColor, [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8],UITextAttributeTextShadowColor,[NSValue valueWithUIOffset:UIOffsetMake(0, -1)],UITextAttributeTextShadowOffset,[UIFont fontWithName:@"Arial-Bold" size:0.0],UITextAttributeFont,nil]];
}

这里我们要知道,resizableImageWithCapInsets:方法是创建可伸缩的图像,此方法取代了先前版本中使用的stretchableImageWithLeftCapWidth: topCapHeight:方法。关于Cap Insets,只需简单的设置指定图像在顶部、左端、右端和下部的固定区域即可。因为要图片都伸缩,所以上例代码中每个端都设置为0。

定制UIBarButtonItem
与UINavigationBar的定制方法相同,其中按钮宽度是取决于其文本长度而伸缩,且在设置Cap Insets时往往不需要按钮最左端和最右端5px以内有伸缩。

但是其”Back”按钮是需要特殊定制的,UIBarButtonItem类有一个专门的backButtonBackgroundImage属性用于定制这个Back按钮的背景图片。
// 定义导航栏上的Back按钮外观

UIImage *buttonBack30 = [[UIImage imageNamed:@"button_back_textured_30.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 5)];

UIImage *buttonBack24 = [[UIImage imageNamed:@"button_back_textured_24.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 12, 0, 5)];

[[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonBack30 forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

[[UIBarButtonItem appearance] setBackButtonBackgroundImage:buttonBack24 forState:UIControlStateNormal barMetrics:UIBarMetricsLandscapePhone];

定制UITabBar
在iOS5中提供了一个API来设置UITabBar的背景图片,以及表示选中的图片。

UIImage *tabBackground = [[UIImage imageNamed:@"tab_bg.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UITabBar appearance] setBackgroundImage:tabBackground];
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tab_select_indicator.png"]];

定制UISlider
在iOS5中,只需要设置maximusTrackImage、minimumTrackImage和thumbImage属性即可轻松定制滑动控制的界面。


相关博文

    分享到:

About rainbird

IOS攻城狮
This entry was posted in IOS开发, 转载 and tagged , , , , . Bookmark the permalink.

发表评论