代码改变世界

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

  张智清  阅读(2444)  评论(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属性即可轻松定制滑动控制的界面。 
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示