UIAPPEARANCE入门教程（上）

来源：互联网发布：pi补偿网络的设计编辑：程序博客网时间：2024/06/06 09:11

者注：这篇文章是使用UIAppearance定义UI界面的入门教程，上篇将介绍一些全局的方法，下篇将介绍一些具体的控件的自定义方法。

Didn't you wish you could customize your pets?

想知道怎么样自定义你的宠物界面吗？

虽然iOS的拟物设计已经成为了过去式，但是这并不代表你的iOS App的控件的外观被限制在系统自有的那几个。

当然，你可以重新定义自己的控件和App的外观，在这个时候，Apple推荐开发者使用标准的UIKit控件并利用iOS提供的各种自定义的方法来达到你的效果。这样做的原因是因为UIKit控件运行效率非常高，另外你的这些自定义的控件也会在未来的版本中表现更好的兼容性。

在这个UIAppearance的教程中，你会用一些基本的UI自定义技术美化一款寻找宠物的App使它由平常变得与众不同。

那么开始

点击这里下载本教程的所用到的源码。这个App使用了很多标准UIKit控件，配色是默认的vanilla。

打开这个项目，然后看看它的结构，编译运行后，宠物查找器的主界面是这样子的：

plain-600x500

这儿有一个导航栏和一个标签栏。主界面显示了宠物列表；点击一个宠物会显示他的详情。同时这里有一个查找界面-啊哈！一个可以让用户选择主题的界面好像是个不错的主意，我们可以从这里开始。

支持主题

很多Apps并不能让用户选择主题，在大多数时候也并不推荐开发者去发布一个具有主题选择功能的App。如果你的app显示得内容控制不好的话，你会很快发现你的App中的某些主题已经生成了并分析了某些东西，然而另外一个主题却与之冲突。然而，你也许在开发阶段会想对不同
的主题进行测试来看看哪个更适合你的App,或者做一个A/B 测试来看Beta版本的用户更喜欢哪种主题。

在这个UIAppearance 教程中，你会创建几个不同的主题，然后可以看看哪个更加符合你的审美。

选择 File\New\File…然后选择 iOS\Source\Swift File。 点击Next然后将文件命名为Theme。最后点击Next并点击Create，Xcode会自动打开你创建的新文件，这个文件里只有一行代码。

删除这行代码并且用如下代码替换：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import UIKit
 
enum Theme {
  case Default, Dark, Graphical
 
  var mainColor: UIColor {
    switch self {
    case .Default:
      return UIColor(red: 87.0/255.0, green: 188.0/255.0, blue: 95.0/255.0, alpha: 1.0)
    case .Dark:
      return UIColor(red: 242.0/255.0, green: 101.0/255.0, blue: 34.0/255.0, alpha: 1.0)
    case .Graphical:
      return UIColor(red: 10.0/255.0, green: 10.0/255.0, blue: 10.0/255.0, alpha: 1.0)
    }
  }
}

这段代码为你的App添加了一个包含不同的主题的枚举值。从现在起，所有的主题只有特定一个mainColor

然后，添加下面的struct:

1
2
3
structThemeManager{
 
}

这段代码让你可以在App中使用主题。它暂时是空的，但是马上会对他进行修改。

然后，将下面这行代码添加到enum的声明前。

1
let SelectedThemeKey = "SelectedTheme"

现在，给下面ThemeManager添加如下方法：

1
2
3
4
5
6
7
staticfunccurrentTheme()->Theme{
  ifletstoredTheme=NSUserDefaults.standardUserDefaults().valueForKey(SelectedThemeKey)?.integerValue{
    returnTheme(rawValue:storedTheme)!
  }else{
    return.Default
  }
}

这儿也没有太过复杂的代码：这是你将用到的控制app的样式的主方法。它使用NSUserDefaults来持久化存储你的当前主题，每次启动App时它都会被读取。

要测试这个是否可用，可以打开AppDelegate.swift然后将下面代码添加到application(_:didFinishLaunchingWithOptions):

1
println(ThemeManager.currentTheme().mainColor)

Build and run。你应该会在控制台看到下面的输出结果：

1
UIDeviceRGBColorSpace0.949020.3960780.1333331

那么从现在起，你已经有三个主题，并且你可以通过ThemeManager对他们进行管理。现在是时候在App中使用他们了。

将主题添加入控件

Back in Theme.swift, add the following method to ThemeManager:
回到Theme.swift，添加下面的方法到ThemeManager:

1
2
3
4
5
6
7
8
9
static func applyTheme(theme: Theme) {
  // 1 
  NSUserDefaults.standardUserDefaults().setValue(theme.rawValue, forKey: SelectedThemeKey)
  NSUserDefaults.standardUserDefaults().synchronize()
 
  // 2
  let sharedApplication = UIApplication.sharedApplication()
  sharedApplication.delegate?.window??.tintColor = theme.mainColor
}

这里我们过一遍上面的代码：

先使用NSUserDefaults持久化存储选中的主题
然后获取你选择的主题并且将主题的main color赋给 application’s window的tintColor 属性。关于tintColor稍后会详细讲解

然后你需要做的就是调用这个方法，在AppDelegate.swift中调用那必须是极好的。

将之前加的 println()语句替换成下面的代码：

1
2
lettheme=ThemeManager.currentTheme()
ThemeManager.applyTheme(theme)

Build and run。你会发现你的App明显看起来偏绿色调多了：

theme_applied1

在App中到处点点；会发现各种地方都已经是这种颜色了。但是你并没有在controller或者view上面做任何修改，这个黑 — 额，绿魔法到底是什么呢？

使用 TINT COLORS

从iOS7开始，UIView 就已经暴露了tintColor属性，一般这个属性被用在app的主色调选择器和某些可交互的界面元素的交互状态。

如果你为某个view指定一个tint，那么这个tint将会自动应用到这个view的所有的子view中，因为UIWindow继承于UIView，你可以通过设定window的tintColor来定义整个app的色彩。

点击左上角的齿轮图标；一个有分段控制的 table view将会显示出来，但是当你选择不同的主题并提交时，没有东西会发生改变，是时候修改它了。

打开SettingsTableViewController.swift 然后添加下面的代码到 applyTheme()，就在dismiss()方法上面；

1
2
3
if let selectedTheme = Theme(rawValue: themeSelector.selectedSegmentIndex) {
  ThemeManager.applyTheme(selectedTheme)
}

然后你就可以调用你在 ThemeManager中加入的方法了，这个方法会通过设置UIWindow的tintColor属性来设定主题的主色调。

下一步，添加下面这些代码到viewDidLoad()方法的底部，这样做了之后，选中的主题会在view controller第一次加载时就被存储到 NSUserDefaults中

1
themeSelector.selectedSegmentIndex=ThemeManager.currentTheme().rawValue

Build and run.点击设置按键，选择Dark主题然后提交修改。App的主色调将瞬间会从绿色变为橙色。

theme_applied2

眼尖的读者可能会注意到这些颜色是在ThemeType中就定义了这些颜色。

但是，当你选择了Dark主题，但是App的颜色看起来并不是特别的深。想要主题生效，你需要自定义一些更多的东西。

via Ray Wenderlich.

由创意应用翻译，转载请注明出处。

http://www.appccc.com/uiappearance-tutorial-below/

0 0