最終效果
要求：
- Platform: iOS8.0+
- Language: Swift3.2
- Editor: Xcode8+
UIApplication Key Window
// 主色
UIApplication.shared.delegate?.window??.tintColor = mainColor
UINavigaitonBar
- 導航欄的樣式
barStyle有2中:default和black，default情況下，status bar的顏色為black，black情況下為white；
barStyle = .default
barStyle = .black
-
black樣式適用于在設置了barTintColor為非黑色的實色的導航欄上； - 設置導航欄統一的默認返回按鈕icon時，要注意設置其
maskicon為如下樣式：
backIndicatorImage
backIndicatorTransitionMaskImage
- mask圖組合原理：
正確的backIndicatorImage和backIndicatorTransitionMaskImage組合模式
INavigationBar.appearance().barStyle = barStyle
UINavigationBar.appearance().setBackgroundImage(navigationBarBackgroundImage, for: .default)
UINavigationBar.appearance().backIndicatorImage = UIImage(named: "backArrow")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "backArrowMaskFixed")
UITaBar
- tab bar的
barStyle和導航欄的顯示一樣； - 可以設置tab選中的指示圖
selectionIndicatorImage；
selectionIndicatorImage
UITabBar.appearance().barStyle = barStyle
UITabBar.appearance().backgroundImage = tabBarBackgroundImage
let tabIndicator = UIImage(named: "tabBarSelectionIndicator")?
.withRenderingMode(.alwaysTemplate)
.resizableImage(withCapInsets: .init(top: 0, left: 2, bottom: 0, right: 2))
UITabBar.appearance().selectionIndicatorImage = tabIndicator
UISegmentedControl
- 主要是默認背景圖的和選中背景圖的設置
setBackgroundImage()； - 也可以設置某個item的圖片
setImage(, forSegmentAt:)；
UISegmentedControl
let controlBgImage = UIImage(named: "controlBackground")?
.withRenderingMode(.alwaysTemplate)
.resizableImage(withCapInsets: .init(top: 3, left: 3, bottom: 3, right: 3))
let controlSelectedBgImage = UIImage(named: "controlSelectedBackground")?
.withRenderingMode(.alwaysTemplate)
.resizableImage(withCapInsets: .init(top: 3, left: 3, bottom: 3, right: 3))
UISegmentedControl.appearance().setBackgroundImage(controlBgImage, for: .normal, barMetrics: .default)
UISegmentedControl.appearance().setBackgroundImage(controlSelectedBgImage, for: .selected, barMetrics: .default)
UIStepper
- 主要可以設置
normal、disabled和highlighted的背景圖setBackgroundImage()； - 可以設置加減按鈕的圖片
setIncrementImage()和setDecrementImage()；
UIStepper
let controlBgImage = UIImage(named: "controlBackground")?
.withRenderingMode(.alwaysTemplate)
.resizableImage(withCapInsets: .init(top: 3, left: 3, bottom: 3, right: 3))
UIStepper.appearance().setBackgroundImage(controlBgImage, for: .normal)
UIStepper.appearance().setBackgroundImage(controlBgImage, for: .highlighted)
UIStepper.appearance().setBackgroundImage(controlBgImage, for: .disabled)
UIStepper.appearance().setDecrementImage(UIImage.init(named: "fewerPaws")!, for: .normal)
UIStepper.appearance().setIncrementImage(UIImage.init(named: "morePaws")!, for: .normal)
UISlider
- 主要可以設置拇指按鈕的圖片
setThumbImage()； - 主要可以設最大/最小軌道的圖片
setMaximumTrackImage()和setMinimumTrackImage()；
UISlider
UISlider.appearance().setThumbImage(UIImage(named: "sliderThumb"), for: .normal)
UISlider.appearance().setMaximumTrackImage(UIImage(named: "maximumTrack")?
.resizableImage(withCapInsets:UIEdgeInsets(top: 0, left: 0.0, bottom: 0, right: 6.0)), for: .normal)
UISlider.appearance().setMinimumTrackImage(UIImage(named: "minimumTrack")?
.withRenderingMode(.alwaysTemplate)
.resizableImage(withCapInsets:UIEdgeInsets(top: 0, left: 6.0, bottom: 0, right: 0)), for: .normal)
UIProgressView
- 主要可以設置默認軌道的圖片
trackImage和進度軌跡的圖片progressImage；
UIProgressView
UIProgressView.appearance().trackImage = UIImage(named: "controlBackground")?
.withRenderingMode(.alwaysTemplate)
.resizableImage(withCapInsets: .init(top: 3, left: 3, bottom: 3, right: 3))
UIProgressView.appearance().progressImage = UIImage(named: "maximumTrack")?
.withRenderingMode(.alwaysTemplate)
.resizableImage(withCapInsets:UIEdgeInsets(top: 0, left: 0.0, bottom: 0, right: 6.0))
UISwitch
- 主要可以開狀態的顏色
onTintColor和拇指按鈕的顏色thumbTintColor； - 也可以設置開關狀態的圖片
onImage和offImage（不過設置這兩個屬性后沒什么效果，不建議使用）；
UISwitch on
UISwitch.appearance().onTintColor = .red
UISwitch.appearance().thumbTintColor = mainColor
其他
- 其實UIAppearance是一個協議，主要作用是返回一個
Self類，然后通過這個代理對象設置的所有UI元素實例對象，都會保留appearance()擁有的屬性值； - 一旦設置，對所有Self類對象起作用，如果要過濾某些UI類的樣式不生效，可以使用
appearance(whenContainedInInstancesOf: [])方法；
一個夜間主題Demo
定義一個Theme枚舉
- 定義樣式類型；
enum Theme: Int {
case `default`, dark, graphical
private enum Keys: String{
case selected = "ThemeSelected"
}
}
- 定義一個單例對象current，返回選擇的樣式；
static var current: Theme {
return Theme.init(rawValue: UserDefaults.standard.integer(forKey: Keys.selected.rawValue)) ?? .default
}
- 定義mainColor、textColor等屬性；
var mainColor: UIColor{
switch self {
case .default:
return .blue
case .dark:
return .orange
case .graphical:
return .darkGray
}
}
var barStyle: UIBarStyle{
switch self {
case .default, .graphical:
return .default
case .dark:
return .black
}
}
var navigationBarBackgroundImage: UIImage?{
return self == .graphical ? UIImage.init(named: "navBarBackground") : nil
}
var tabBarBackgroundImage: UIImage?{
return self == .graphical ? UIImage.init(named: "tabBarBackground") : nil
}
var backgroundColor: UIColor{
switch self {
case .default, .graphical:
return .white
case .dark:
return UIColor(white: 0.4, alpha: 1)
}
}
var textColor: UIColor{
switch self {
case .default, .graphical:
return .black
case .dark:
return .white
}
}
- 定義一個實例方法apply()來讓選擇的主題生效
func apply(){
UserDefaults.standard.set(rawValue, forKey: Keys.selected.rawValue)
UserDefaults.standard.synchronize()
updateMainColor()
updateNavigationBarAppearance()
updateTableViewAppearance()
updateLabelAppearance()
updateTabBarAppearance()
updateSegmentedControlAppearance()
updateStepperAppearance()
updateSliderAppearance()
updateProgressAppearance()
updateSwitchAppearance()
updateActivityIndicatorAppearance()
}
- 設置各種UI元素的appearance（此處只舉一個導航欄例子）
private func updateNavigationBarAppearance(){
UINavigationBar.appearance().barStyle = barStyle
UINavigationBar.appearance().setBackgroundImage(navigationBarBackgroundImage, for: .default)
UINavigationBar.appearance().backIndicatorImage = UIImage(named: "backArrow")
UINavigationBar.appearance().backIndicatorTransitionMaskImage = UIImage(named: "backArrowMaskFixed")
}
使用主題
- 本例中通過segmented control來切換主題
@IBAction func changeTheme(_ sender: UISegmentedControl) {
// 存儲并設置主題
Theme(rawValue: sender.selectedSegmentIndex)!.apply()
// TODO: 讓主題立即生效
}
- 為了讓app的window上的所有元素對主題立即生效，就務必要做到remove所有的subview，然后再addSubview，因為appearance的應用，一定是在add subview時才能起作用的
// TODO: 讓主題立即生效
let window = UIApplication.shared.delegate?.window
window??.subviews.forEach{
view in
view.removeFromSuperview()
window??.addSubview(view)
}
自動設置夜間主題
- 這里用到了一個第三方的庫Solar，它是根據設置的地點的經緯度，判斷應用啟動時是日出還是日落，如果是日落時間段，則設置主題為dark；
// 北京
private let solar = Solar(latitude: 39.9047253699, longitude: 116.4072154982)!
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
initializeTheme()
return true
}
func initializeTheme(){
if solar.isDaytime {
Theme.current.apply()
scheduleThemeTimer()
}
else{
Theme.dark.apply()
}
}
- 如果應用啟動時是白天時間，則啟動一個定時器，并加到Runloop.main隊列中，一旦判斷時間點為日落，則自動切換為夜間主題；
func scheduleThemeTimer(){
let timer = Timer.init(fire: solar.sunset!, interval: 0, repeats: false) { [weak self] _ in
Theme.dark.apply()
self?.window?.subviews.forEach{
view in
view.removeFromSuperview()
self?.window?.addSubview(view)
}
}
RunLoop.main.add(timer, forMode: .commonModes)
}
Github
https://github.com/BackWorld/NightThemeDemo
如果對你有幫助，別忘了加個 關注 或 點個 贊 哦??
