UIAppearance入門教程

譯者注:這篇文章是使用UIAppearance定義UI界面的入門教程或听,介紹了一些具體的控件的自定義方法顷啼。

想知道怎么樣自定義你的寵物界面嗎汰瘫?

雖然iOS的擬物設(shè)計(jì)已經(jīng)成為了過(guò)去式晤郑,但是這并不代表你的iOS App的控件的外觀被限制在系統(tǒng)自有的那幾個(gè)。 當(dāng)然神妹,你可以重新定義自己的控件和App的外觀,在這個(gè)時(shí)候盖桥,Apple推薦開發(fā)者使用標(biāo)準(zhǔn)的UIKit控件并利用iOS提供的各種自定義的方法來(lái)達(dá)到你的效果灾螃。這樣做的原因是因?yàn)閁IKit控件運(yùn)行效率非常高, 另外你的這些自定義的控件也會(huì)在未來(lái)的版本中表現(xiàn)更好的兼容性揩徊。 在這個(gè)UIAppearance的教程中腰鬼,你會(huì)用一些基本的UI自定義技術(shù)美化一款尋找寵物的App使它由平常變得與眾不同。

那么開始

點(diǎn)擊這里 下載本教程的所用到的源碼塑荒。這個(gè)App使用了很多標(biāo)準(zhǔn)UIKit控件熄赡,配色是默認(rèn)的vanilla。 打開這個(gè)項(xiàng)目齿税,然后看看它的結(jié)構(gòu)彼硫,編譯運(yùn)行后,寵物查找器的主界面是這樣子的:

plain-600x500
這兒有一個(gè)導(dǎo)航欄和一個(gè)標(biāo)簽欄凌箕。主界面顯示了寵物列表拧篮;點(diǎn)擊一個(gè)寵物會(huì)顯示他的詳情。同時(shí)這里有一個(gè)查找界面-啊哈牵舱!一個(gè)可以讓用戶選擇主題的界面好像是個(gè)不錯(cuò)的主意串绩,我們可以從這里開始。

支持主題

很多Apps并不能讓用戶選擇主題芜壁,在大多數(shù)時(shí)候也并不推薦開發(fā)者去發(fā)布一個(gè)具有主題選擇功能的App礁凡。如果你的app顯示得內(nèi)容控制不好的話高氮,你會(huì)很快發(fā)現(xiàn)你的App中的某些主題已經(jīng)生成了并分析了某些東西,然而另外一個(gè)主題卻與之沖突顷牌。然而剪芍,你也許在開發(fā)階段會(huì)想對(duì)不同 的主題進(jìn)行測(cè)試來(lái)看看哪個(gè)更適合你的App,或者做一個(gè)A/B 測(cè)試來(lái)看Beta版本的用戶更喜歡哪種主題。 在這個(gè)UIAppearance 教程中窟蓝,你會(huì)創(chuàng)建幾個(gè)不同的主題罪裹,然后可以看看哪個(gè)更加符合你的審美。 選擇 File\New\File…然后選擇 _iOS\Source\Swift File疗锐。 _點(diǎn)擊Next然后將文件命名為Theme坊谁。最后點(diǎn)擊Next并點(diǎn)擊Create,Xcode會(huì)自動(dòng)打開你創(chuàng)建的新文件滑臊,這個(gè)文件里只有一行代碼贿条。 刪除這行代碼并且用如下代碼替換:

<pre class="">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)
}
}
}</pre>
這段代碼為你的App添加了一個(gè)包含不同的主題的枚舉值斜脂。從現(xiàn)在起拨齐,所有的主題只有特定一個(gè)mainColor 然后鲸睛,添加下面的struct:

<pre class="">struct ThemeManager {

}</pre>

這段代碼讓你可以在App中使用主題。它暫時(shí)是空的关划,但是馬上會(huì)對(duì)他進(jìn)行修改小染。 然后,將下面這行代碼添加到enum的聲明前贮折。

<pre>let SelectedThemeKey = "SelectedTheme"</pre>

現(xiàn)在裤翩,給下面ThemeManager添加如下方法:

<pre >static func currentTheme() -> Theme {
if let storedTheme = NSUserDefaults.standardUserDefaults().valueForKey(SelectedThemeKey)?.integerValue {
return Theme(rawValue: storedTheme)!
} else {
return .Default
}
}</pre>

這兒也沒有太過(guò)復(fù)雜的代碼:這是你將用到的控制app的樣式的主方法。它使用NSUserDefaults來(lái)持久化存儲(chǔ)你的當(dāng)前主題调榄,每次啟動(dòng)App時(shí)它都會(huì)被讀取踊赠。 要測(cè)試這個(gè)是否可用,可以打開AppDelegate.swift然后將下面代碼添加到 application(_:didFinishLaunchingWithOptions):

<pre>println(ThemeManager.currentTheme().mainColor)</pre>

Build and run每庆。你應(yīng)該會(huì)在控制臺(tái)看到下面的輸出結(jié)果:

<pre>UIDeviceRGBColorSpace 0.94902 0.396078 0.133333 1</pre>

那么從現(xiàn)在起筐带,你已經(jīng)有三個(gè)主題,并且你可以通過(guò)ThemeManager對(duì)他們進(jìn)行管理$土椋現(xiàn)在是時(shí)候在App中使用他們了伦籍。

將主題添加入控件

回到Theme.swift,添加下面的方法到ThemeManager:

<pre>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
}</pre>

這里我們過(guò)一遍上面的代碼:

  1. 先使用NSUserDefaults持久化存儲(chǔ)選中的主題
  2. 然后獲取你選擇的主題并且將主題的main color賦給 application's window的tintColor 屬性腮出。關(guān)于tintColor稍后會(huì)詳細(xì)講解

然后你需要做的就是調(diào)用這個(gè)方法帖鸦,在AppDelegate.swift中調(diào)用那必須是極好的。 將之前加的 println()語(yǔ)句替換成下面的代碼:

<pre>let theme = ThemeManager.currentTheme()
ThemeManager.applyTheme(theme)</pre>

Build and run胚嘲。你會(huì)發(fā)現(xiàn)你的App明顯看起來(lái)偏綠色調(diào)多了:

在App中到處點(diǎn)點(diǎn)富蓄;會(huì)發(fā)現(xiàn)各種地方都已經(jīng)是這種顏色了。但是你并沒有在controller或者view上面做任何修改慢逾,這個(gè)黑 — 額立倍,綠魔法到底是什么呢?

使用 Tint Colors

從iOS7開始侣滩,UIView 就已經(jīng)暴露了tintColor屬性口注,一般這個(gè)屬性被用在app的主色調(diào)選擇器和某些可交互的界面元素的交互狀態(tài)。 如果你為某個(gè)view指定一個(gè)tint君珠,那么這個(gè)tint將會(huì)自動(dòng)應(yīng)用到這個(gè)view的所有的子view中寝志,因?yàn)閁IWindow繼承于UIView,你可以通過(guò)設(shè)定window的tintColor來(lái)定義整個(gè)app的色彩策添。 點(diǎn)擊左上角的齒輪圖標(biāo)材部;一個(gè)有分段控制的 table view將會(huì)顯示出來(lái),但是當(dāng)你選擇不同的主題并提交時(shí)唯竹,沒有東西會(huì)發(fā)生改變乐导,是時(shí)候修改它了。 打開SettingsTableViewController.swift 然后添加下面的代碼到 applyTheme()浸颓,就在dismiss()方法上面物臂;

<pre>if let selectedTheme = Theme(rawValue: themeSelector.selectedSegmentIndex) {
ThemeManager.applyTheme(selectedTheme)
}</pre>

然后你就可以調(diào)用你在 ThemeManager中加入的方法了,這個(gè)方法會(huì)通過(guò)設(shè)置UIWindow的tintColor屬性來(lái)設(shè)定主題的主色調(diào)产上。 下一步棵磷,添加下面這些代碼到viewDidLoad()方法的底部,這樣做了之后晋涣,選中的主題會(huì)在view controller第一次加載時(shí)就被存儲(chǔ)到 NSUserDefaults

<pre>themeSelector.selectedSegmentIndex = ThemeManager.currentTheme().rawValue</pre>

Build and run.點(diǎn)擊設(shè)置按鍵仪媒,選擇Dark主題然后提交修改。App的主色調(diào)將瞬間會(huì)從綠色變?yōu)槌壬?

眼尖的讀者可能會(huì)注意到這些顏色是在ThemeType中就定義了這些顏色谢鹊。 但是算吩,當(dāng)你選擇了Dark主題,但是App的顏色看起來(lái)并不是特別的深撇贺。想要主題生效赌莺,你需要自定義一些更多的東西。

Customizing the Navigation Bar 自定義導(dǎo)航欄

打開 Theme.swift 然后添加下面的兩個(gè)方法到Theme中:

<pre>var barStyle: UIBarStyle {
switch self {
case .Default, .Graphical:
return .Default
case .Dark:
return .Black
}
}

var navigationBackgroundImage: UIImage? {
return self == .Graphical ? UIImage(named: "navBackground") : nil
}</pre>

這些方法簡(jiǎn)單的為導(dǎo)航欄獲取了獲取了主題對(duì)應(yīng)的bar style和背景圖 然后松嘶,將下面語(yǔ)句添加到applyTheme():

<pre>UINavigationBar.appearance().barStyle = theme.barStyle
UINavigationBar.appearance().setBackgroundImage(theme.navigationBackgroundImage, forBarMetrics: .Default)</pre>

好了——為什么這些現(xiàn)在生效了艘狭,但是之前設(shè)置UINavigationBar的barStyle卻沒有呢? UIKit有一個(gè)通知機(jī)制叫UIAppearance翠订,大部分的控件都使用了它巢音。當(dāng)你調(diào)用通過(guò)UIKit的類(非實(shí)例)調(diào)用appearance(),它就會(huì)返回一個(gè)UIAppearance代理尽超。當(dāng)你修改了這個(gè)代理的屬性官撼,所有的這個(gè)類的實(shí)例都會(huì)被賦予相同的值。這個(gè)機(jī)制就使得你無(wú)須在修改主題時(shí)手動(dòng)修改所有控件的樣式似谁。 Build and run傲绣,選擇Dark主題掠哥,導(dǎo)航欄現(xiàn)在的顏色就深多了。

現(xiàn)在看起來(lái)好多了秃诵,但是還是有一些工作要做续搀。 下一步,你將自定義后退按鈕菠净。iOS的默認(rèn)后退按鈕是一個(gè)箭頭禁舷,但是你可以碼出一些更加令人興奮的東西。

自定義后退按鈕

這個(gè)修改會(huì)對(duì)所有主題生效毅往,所有你只需要將下面的幾行加入到Themes.swift 的applyTheme()方法中:

<pre>UINavigationBar.appearance().backIndicatorImage = UIImage(named: "backArrow")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "backArrowMask")</pre>

在這里你設(shè)置了后退按鈕的圖片和遮罩圖牵咙。 Build and run.選擇一個(gè)寵物你會(huì)看見新的后退按鈕:

打開Images.xcassets 然后在Navigation組里面找到backArrow的圖片,這個(gè)圖片是純黑色的攀唯,但是在App里面他會(huì)采取你的window的色板顏色然后并使之生效(it just works)洁桌。
just_works
但是為什么iOS只是修改了工具欄按鈕的圖片顏色,為什么其他地方它不這么做呢革答? 原來(lái)战坤,iOS中得圖像有3種渲染方式

  • Original:總是使用圖片的原來(lái)的顏色。
  • Template:忽略顏色残拐,只是把圖片看做一個(gè)模板途茫。在這個(gè)模式下,iOS只用到圖片的形狀溪食,然后自己渲染圖片的顏色囊卜。所以當(dāng)一個(gè)控件有tint color時(shí),iOS取了你提供的圖片的形狀错沃,然后用tint color繪制他了栅组。
  • Automatic:看你在什么環(huán)境下使用圖片,系統(tǒng)會(huì)自己決定使用“original”或者“template”方式枢析。對(duì)后退按鈕玉掸,導(dǎo)航欄上的按鈕和標(biāo)簽欄上的按鈕,iOS會(huì)默認(rèn)的忽略他們的圖片顏色除非你修改了他們的渲染模式醒叁。

回到App司浪,點(diǎn)擊一個(gè)寵物并點(diǎn)擊Adopt進(jìn)行領(lǐng)養(yǎng)。仔細(xì)看這個(gè)后退按鈕的動(dòng)畫把沼。有看出問題嗎啊易?

當(dāng)Back文件往左移動(dòng)時(shí),文字和按鈕的重疊看起來(lái)非常怪: 為了改正這個(gè)饮睬,你需要修改遮罩圖: 在_Themes.swift 中的_applyTheme()方法中租谈,修改設(shè)置backIndicatorTransitionMaskImage的代碼為以下這一行:

<pre>UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "backArrow")</pre>

Build and run. 重新點(diǎn)擊寵物并點(diǎn)擊Adopt進(jìn)行領(lǐng)養(yǎng)。這次效果看起來(lái)好多了捆愁。

這些文字沒有后退標(biāo)切斷割去,看起來(lái)就像藏在了后退按鈕下一樣窟却。這中間到底發(fā)生了什么呢? 當(dāng)iOS使用非透明后退圖片繪制圖標(biāo)劫拗,如果添加了過(guò)渡遮罩層间校,它將給非透明的后退圖標(biāo)添加一個(gè)蒙版層。這個(gè)圖標(biāo)也只在那個(gè)區(qū)域可見页慷。 在最開始的實(shí)現(xiàn)方法中,你提供了一個(gè)覆蓋整個(gè)后退按鈕的圖片胁附,那樣的話文字將會(huì)一致可見【品保現(xiàn)在你將圖片設(shè)置成了蒙版,然后文件將在蒙版的右側(cè)就不見了控妻,而不是在重疊在圖標(biāo)下方顯示州袒。 看看這個(gè)箭頭圖和它在圖片assets目錄下得原始蒙版圖;你就會(huì)發(fā)現(xiàn)他們配合得非常棒弓候。
indicator_mask
黑色的圖形是后退箭頭郎哭,紅色的是蒙版。你會(huì)希望文字在紅色區(qū)域下面能夠顯示而在該圖標(biāo)的其他地方隱藏菇存。 修改applyTheme的最后一行夸研,并使用這個(gè)修改過(guò)的蒙版:

<pre>UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "backArrowMaskFixed")</pre>

Build and run. 最后一次點(diǎn)擊寵物并點(diǎn)擊Adopt進(jìn)行領(lǐng)養(yǎng),你會(huì)發(fā)現(xiàn)文字在蒙版層才顯示依鸥,達(dá)到了想要的效果亥至。

現(xiàn)在你的導(dǎo)航欄已經(jīng)是像素級(jí)別的效果了,現(xiàn)在是時(shí)候給標(biāo)簽欄一點(diǎn)點(diǎn)愛了(- -!)

Customizing the Tab Bar自定義標(biāo)簽欄

還是在Theme.swift贱迟,添加下面的屬性到Theme中:

<pre>var tabBarBackgroundImage: UIImage? {
return self == .Graphical ? UIImage(named: "tabBarBackground") : nil
}

var backgroundColor: UIColor {
switch self {
case .Default, .Graphical:
return UIColor(white: 0.9, alpha: 1.0)
case .Dark:
return UIColor(white: 0.8, alpha: 1.0)
}
}

var secondaryColor: UIColor {
switch self {
case .Default:
return UIColor(red: 242.0/255.0, green: 101.0/255.0, blue: 34.0/255.0, alpha: 1.0)
case .Dark:
return UIColor(red: 34.0/255.0, green: 128.0/255.0, blue: 66.0/255.0, alpha: 1.0)
case .Graphical:
return UIColor(red: 140.0/255.0, green: 50.0/255.0, blue: 48.0/255.0, alpha: 1.0)
}
}</pre>

這些屬性提供了與主題相配的背景圖姐扮,背景色和次要的顏色。 要應(yīng)用這些樣式衣吠,添加項(xiàng)目的這幾行代碼到applyTheme().

<pre class="">UITabBar.appearance().barStyle = theme.barStyle
UITabBar.appearance().backgroundImage = theme.tabBarBackgroundImage

let tabIndicator = UIImage(named: "tabBarSelectionIndicator")?.imageWithRenderingMode(.AlwaysTemplate)
let tabResizableIndicator = tabIndicator?.resizableImageWithCapInsets(
UIEdgeInsets(top: 0, left: 2.0, bottom: 0, right: 2.0))
UITabBar.appearance().selectionIndicatorImage = tabResizableIndicator</pre>

設(shè)置barStyle和backgroundImage大家應(yīng)該很熟悉了茶敏;這和之前在UINavigationBar所做的是一樣的。 在最后三行代碼中缚俏,你使用了asset目錄下得一個(gè)圖片作為標(biāo)簽圖片然后設(shè)置他的渲染模式為.AlwaysTemplate惊搏。這是一個(gè)iOS沒有自動(dòng)使用template rendering mode的例子。 最后袍榆,你創(chuàng)建了一個(gè)可以拉伸的圖片胀屿,并且設(shè)置它為標(biāo)簽欄的selectionIndicatorImage Build and run. 你會(huì)看見最新帶主題的標(biāo)簽欄:

這個(gè)dark主題看起來(lái)更加出色了。 看見選中標(biāo)簽下得那條線了嗎包雀?那是你的指示圖片宿崭。雖然它的高度只有6,寬度只有49才写,iOS會(huì)把它拉升到標(biāo)簽欄的全寬葡兑。 下一個(gè)章節(jié)會(huì)聊到這些可拉升的圖片和它們的工作原理奖蔓。

自定義分段控件

還有一個(gè)組件沒有被修改就是選中主題的分段控件還沒有被修改。是時(shí)候?qū)⑺矌刖实闹黝}世界了讹堤。 添加下面的代碼到Theme.swift的applyTheme()方法的底部:

<pre>let controlBackground = UIImage(named: "controlBackground")?
.imageWithRenderingMode(.AlwaysTemplate)
.resizableImageWithCapInsets(UIEdgeInsets(top: 3, left: 3, bottom: 3, right: 3))
let controlSelectedBackground = UIImage(named: "controlSelectedBackground")?
.imageWithRenderingMode(.AlwaysTemplate)
.resizableImageWithCapInsets(UIEdgeInsets(top: 3, left: 3, bottom: 3, right: 3))

UISegmentedControl.appearance().setBackgroundImage(controlBackground, forState: .Normal,
barMetrics: .Default)
UISegmentedControl.appearance().setBackgroundImage(controlSelectedBackground, forState: .Selected,
barMetrics: .Default)</pre>

為了理解上面的代碼吆鹤,首先看一下asset目錄下的controlBackground圖片。這個(gè)圖片也許很小洲守,但是iOS知道如何使用它來(lái)繪制UISegmentedControl的邊框疑务,就像它預(yù)先切好展好的那樣。 切好是什么意思呢梗醇?看一看下面的放大的圖吧:

這有4個(gè)33的正方形知允,每個(gè)角一個(gè)。這些正方形將會(huì)在拉升圖片時(shí)被保留原樣叙谨。然而灰色的部分將會(huì)被拉升温鸽。 在圖片中,黑色部分將呈現(xiàn)為控件的配色手负。你將通過(guò)UIEdgeInsets()告訴iOS如何拉升這個(gè)圖片然后會(huì)給top涤垫、left、bottom和right4個(gè)參數(shù)傳值為3竟终,因?yàn)槟愕?個(gè)角是33蝠猬。 Build and run.點(diǎn)擊設(shè)置圖片,你將會(huì)發(fā)現(xiàn)UISegmentedControl有了新的樣式:
segmented
圓角被替換成了3*3的方形角衡楞。 現(xiàn)在已經(jīng)給分段控件配了色吱雏,剩下的工作就是繪制其他控件的樣式了。 關(guān)閉設(shè)置界面瘾境,點(diǎn)擊右上角的放大鏡歧杏;你將看見另外的分段控件,還有UIStepper, UISlider, and UISwitch需要加上主題迷守。 抓起刷子犬绒,穿上廢舊的衣服開始畫畫吧!

自定義累加器兑凿、滑塊和開關(guān)

將下面行加入到Theme.swift的applyTheme()

<pre>UIStepper.appearance().setBackgroundImage(controlBackground, forState: .Normal)
UIStepper.appearance().setBackgroundImage(controlBackground, forState: .Disabled)
UIStepper.appearance().setBackgroundImage(controlBackground, forState: .Highlighted)
UIStepper.appearance().setDecrementImage(UIImage(named: "fewerPaws"), forState: .Normal)
UIStepper.appearance().setIncrementImage(UIImage(named: "morePaws"), forState: .Normal)</pre>

你使用了和UISegmentedControl相同可以拉升的圖片凯力;唯一的不同是UIStepper會(huì)在值達(dá)到上限或下限時(shí)變成不可用,所以也需要為這種情況做準(zhǔn)備礼华。簡(jiǎn)單起見這里用之前的圖咐鹤。 這里不僅修改了累加器的顏色,還替換了單調(diào)的+和-的符號(hào)按鈕 Build and run.打開查找界面去看看了累加器變成什么樣了圣絮。

stepper
UISliderUISwitch 同樣也缺愛 將下面代碼加入到applyTheme():

<pre>UISlider.appearance().setThumbImage(UIImage(named: "sliderThumb"), forState: .Normal)
UISlider.appearance().setMaximumTrackImage(UIImage(named: "maximumTrack")?
.resizableImageWithCapInsets(UIEdgeInsets(top: 0, left: 0.0, bottom: 0, right: 6.0)),
forState: .Normal)
UISlider.appearance().setMinimumTrackImage(UIImage(named: "minimumTrack")?
.imageWithRenderingMode(.AlwaysTemplate)
.resizableImageWithCapInsets(UIEdgeInsets(top: 0, left: 6.0, bottom: 0, right: 0)),
forState: .Normal)

UISwitch.appearance().onTintColor = theme.mainColor.colorWithAlphaComponent(0.3)
UISwitch.appearance().thumbTintColor = theme.mainColor</pre>

UISlider 有3個(gè)主要的自定義的敵方:滑動(dòng)塊祈惶,最大值印記和最小值印記。 滑動(dòng)塊應(yīng)用了來(lái)自你的assets 目錄的圖片,最大值印記用了一個(gè)可伸縮的圖片捧请,初始模式無(wú)論在哪個(gè)主題下下它會(huì)是黑色凡涩、最小值印記也是一個(gè)可伸縮圖片,但是他使用了template渲染方法疹蛉,所以它繼承了模板的顏色活箕。 你設(shè)定thumbTintColor為主色調(diào),并且設(shè)置了onTintColor為一個(gè)稍微淡一點(diǎn)的顏色可款。這樣也就修改了UISwitch的樣式育韩。 Build and run.打開查找界面去滑動(dòng)塊和開關(guān)變成這樣了。
slider-switch

與你看到的UISegmentedControl一樣筑舅,外觀代理自定義了所有的代理類的實(shí)體座慰。但是有個(gè)時(shí)候你并不想要所有控件一個(gè)樣--這樣的話,你可以自定義某一個(gè)控件實(shí)體翠拣。

自定義控件實(shí)體

打開SearchTableViewController.swift然后添加下面的行到viewDidLoad():

<pre>speciesSelector.setImage(UIImage(named: "dog"), forSegmentAtIndex: 0)
speciesSelector.setImage(UIImage(named: "cat"), forSegmentAtIndex: 1)</pre>

在這里你只是設(shè)置了種類選擇器的segment的圖片。 Build and run. 打開搜索界面游盲,種族選擇器會(huì)變成這樣

你無(wú)須做任何事情误墓,iOS便會(huì)倒反選中項(xiàng)的圖片的顏色,這是因?yàn)檫@里的圖片會(huì)自動(dòng)以Template模式進(jìn)行渲染益缎。 如何選擇性的修改控件的字體谜慌?這個(gè)也很簡(jiǎn)單 打開 PetTableViewController.swift 并添加下面兩行到 viewWillAppear()的底部:

<pre>view.backgroundColor = ThemeManager.currentTheme().backgroundColor
tableView.separatorColor = ThemeManager.currentTheme().secondaryColor</pre>

然后, 將下面這行添加到 tableView(_:cellForRowAtIndexPath:)的末尾,在return之前:

<pre>cell.textLabel!.font = UIFont(name: "Zapfino", size: 14.0)</pre>

這樣就會(huì)修改顯示動(dòng)物名字的label的字體了莺奔。 Build and run. 進(jìn)行一下比較欣范。
theme_applied5-580x500

下面的圖片顯示除了查找界面的不同效果;新的版本就沒有用到iOS的vanilla主題令哟,并且顯得更加有趣:
theme_applied6-580x500

下面還有些什么?

點(diǎn)擊這里可以下載這篇教程的完成版的項(xiàng)目恼琼。 在Objective-C里,你可以指定特定的自定義設(shè)置應(yīng)用到只有當(dāng)他們包含在特定類的其他控件里屏富。例如晴竞,您可以將自定義的UITextField放到UINavigationBar里。 但悲劇的是狠半,swift不能這么干噩死。不過(guò)有個(gè)好消息是,iOS9將添加此功能神年,請(qǐng)期待稍后更新本教程已维。 我希望你喜歡這篇UIAppearance的教程,并且學(xué)習(xí)到調(diào)整你的UI的方法已日。其實(shí)它真的很簡(jiǎn)單垛耳。 via Ray Wenderlich. 由創(chuàng)意應(yīng)用翻譯,轉(zhuǎn)載請(qǐng)注明出處。 http://www.appccc.com/uiappearance-tutorial-below/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末艾扮,一起剝皮案震驚了整個(gè)濱河市既琴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌泡嘴,老刑警劉巖甫恩,帶你破解...
    沈念sama閱讀 212,542評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異酌予,居然都是意外死亡磺箕,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門抛虫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)松靡,“玉大人,你說(shuō)我怎么就攤上這事建椰〉衿郏” “怎么了?”我有些...
    開封第一講書人閱讀 158,021評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵棉姐,是天一觀的道長(zhǎng)屠列。 經(jīng)常有香客問我,道長(zhǎng)伞矩,這世上最難降的妖魔是什么笛洛? 我笑而不...
    開封第一講書人閱讀 56,682評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮乃坤,結(jié)果婚禮上苛让,老公的妹妹穿的比我還像新娘。我一直安慰自己湿诊,他們只是感情好狱杰,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,792評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著枫吧,像睡著了一般浦旱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上九杂,一...
    開封第一講書人閱讀 49,985評(píng)論 1 291
  • 那天颁湖,我揣著相機(jī)與錄音,去河邊找鬼例隆。 笑死甥捺,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的镀层。 我是一名探鬼主播镰禾,決...
    沈念sama閱讀 39,107評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼皿曲,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了吴侦?” 一聲冷哼從身側(cè)響起屋休,我...
    開封第一講書人閱讀 37,845評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎备韧,沒想到半個(gè)月后劫樟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,299評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡织堂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,612評(píng)論 2 327
  • 正文 我和宋清朗相戀三年叠艳,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片易阳。...
    茶點(diǎn)故事閱讀 38,747評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡附较,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出潦俺,到底是詐尸還是另有隱情拒课,我是刑警寧澤,帶...
    沈念sama閱讀 34,441評(píng)論 4 333
  • 正文 年R本政府宣布事示,位于F島的核電站捕发,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏很魂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,072評(píng)論 3 317
  • 文/蒙蒙 一檐涝、第九天 我趴在偏房一處隱蔽的房頂上張望遏匆。 院中可真熱鬧,春花似錦谁榜、人聲如沸幅聘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)帝蒿。三九已至,卻和暖如春巷怜,著一層夾襖步出監(jiān)牢的瞬間葛超,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工延塑, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留绣张,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,545評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親奢方。 傳聞我的和親對(duì)象是個(gè)殘疾皇子瀑罗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,658評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)缩举、插件蜀变、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,066評(píng)論 4 62
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,848評(píng)論 25 707
  • 本章節(jié)主要講基于風(fēng)險(xiǎn)的測(cè)試是如何進(jìn)行棒旗,從風(fēng)險(xiǎn)識(shí)別誓篱、風(fēng)險(xiǎn)分析嗦明、風(fēng)險(xiǎn)控制三個(gè)方面進(jìn)行講解笼沥,三個(gè)活動(dòng)是連續(xù)的,不是說(shuō)做完...
    灼灼2015閱讀 481評(píng)論 0 0
  • 秋風(fēng)遇雨涼招狸,無(wú)影落西窗敬拓。 悠水從容遠(yuǎn),孤橋寂寞長(zhǎng)裙戏。 林溪花草木乘凸,清夢(mèng)月荷塘。 白露芬芳醒累榜,青苗野地香营勤。 (中華新韻)
    文山鹿閱讀 531評(píng)論 21 34
  • 人生就是一個(gè)項(xiàng)目,假如一個(gè)人的一生有70歲壹罚,他的時(shí)間是這樣度過(guò):睡覺23年占33%葛作,職場(chǎng)16年占23%。所以除了睡...
    柚子兀閱讀 335評(píng)論 0 2