代码改变世界

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

2011-12-14 20:04  张智清  阅读(2440)  评论(0编辑  收藏  举报

      在iOS5推出之前,要实现标准界面的定制化设计,对于开发者来说不是那么简单的。尽管创建drawRect的子类或覆盖drawRect类是个不错的办法,但仍是项艰巨的任务。

      iOS5给我们带来了众多新API,其中有些可以让开发者轻松定制不同UIKit界面控制元素的外观。譬如:

  1. 给视图添加背景图片
     即在viewDidLoad方法中加入:
    [[self view] setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"background.png"]]];
    就是说对于UIView虽然没有backgroundImage这样的直接明义的属性,但是可使用backgroundColor属性来实现背景图片的添加。
     
  2.  定制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。
     
  3. 定制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];
  4. 定制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"]];
  5. 定制UISlider
    在iOS5中,只需要设置maximusTrackImage、minimumTrackImage和thumbImage属性即可轻松定制滑动控制的界面。