iOS Review | UIAppearance夜間主題配置

最終效果

要求：

  • Platform: iOS8.0+
  • Language: Swift3.2
  • Editor: Xcode8+
UIApplication Key Window
// 主色
UIApplication.shared.delegate?.window??.tintColor = mainColor

UINavigaitonBar

  • 導(dǎo)航欄的樣式barStyle有2中: default和black，default情況下，status bar的顏色為black，black情況下為white；
barStyle = .default
barStyle = .black
  • black樣式適用于在設(shè)置了barTintColor為非黑色的實(shí)色的導(dǎo)航欄上；
  • 設(shè)置導(dǎo)航欄統(tǒng)一的默認(rèn)返回按鈕icon時(shí)，要注意設(shè)置其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和導(dǎo)航欄的顯示一樣；
  • 可以設(shè)置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
  • 主要是默認(rèn)背景圖的和選中背景圖的設(shè)置setBackgroundImage()；
  • 也可以設(shè)置某個(gè)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
  • 主要可以設(shè)置normal、disabled和highlighted的背景圖setBackgroundImage()；
  • 可以設(shè)置加減按鈕的圖片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
  • 主要可以設(shè)置拇指按鈕的圖片setThumbImage()；
  • 主要可以設(shè)最大/最小軌道的圖片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
  • 主要可以設(shè)置默認(rèn)軌道的圖片trackImage和進(jìn)度軌跡的圖片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
  • 主要可以開(kāi)狀態(tài)的顏色onTintColor和拇指按鈕的顏色thumbTintColor；
  • 也可以設(shè)置開(kāi)關(guān)狀態(tài)的圖片onImage和offImage（不過(guò)設(shè)置這兩個(gè)屬性后沒(méi)什么效果，不建議使用）；
UISwitch on
UISwitch.appearance().onTintColor = .red
UISwitch.appearance().thumbTintColor = mainColor
其他
  • 其實(shí)UIAppearance是一個(gè)協(xié)議，主要作用是返回一個(gè)Self類，然后通過(guò)這個(gè)代理對(duì)象設(shè)置的所有UI元素實(shí)例對(duì)象，都會(huì)保留appearance()擁有的屬性值；
  • 一旦設(shè)置，對(duì)所有Self類對(duì)象起作用，如果要過(guò)濾某些UI類的樣式不生效，可以使用appearance(whenContainedInInstancesOf: [])方法；

一個(gè)夜間主題Demo

定義一個(gè)Theme枚舉
  • 定義樣式類型；
enum Theme: Int {
    case `default`, dark, graphical
    
    private enum Keys: String{
        case selected = "ThemeSelected"
    }
}
  • 定義一個(gè)單例對(duì)象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
        }
    }
  • 定義一個(gè)實(shí)例方法apply()來(lái)讓選擇的主題生效
func apply(){
    UserDefaults.standard.set(rawValue, forKey: Keys.selected.rawValue)
    UserDefaults.standard.synchronize()
    
    updateMainColor()
    
    updateNavigationBarAppearance()
    
    updateTableViewAppearance()
    
    updateLabelAppearance()
    
    updateTabBarAppearance()
    
    updateSegmentedControlAppearance()
    
    updateStepperAppearance()
    
    updateSliderAppearance()
    
    updateProgressAppearance()
    
    updateSwitchAppearance()
    
    updateActivityIndicatorAppearance()
}
  • 設(shè)置各種UI元素的appearance（此處只舉一個(gè)導(dǎo)航欄例子）
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")
    }
使用主題
  • 本例中通過(guò)segmented control來(lái)切換主題
@IBAction func changeTheme(_ sender: UISegmentedControl) {
// 存儲(chǔ)并設(shè)置主題
    Theme(rawValue: sender.selectedSegmentIndex)!.apply()
// TODO: 讓主題立即生效
}
  • 為了讓app的window上的所有元素對(duì)主題立即生效，就務(wù)必要做到remove所有的subview，然后再addSubview，因?yàn)閍ppearance的應(yīng)用，一定是在add subview時(shí)才能起作用的
// TODO: 讓主題立即生效
let window = UIApplication.shared.delegate?.window
window??.subviews.forEach{
    view in
    view.removeFromSuperview()
    window??.addSubview(view)
}
自動(dòng)設(shè)置夜間主題
  • 這里用到了一個(gè)第三方的庫(kù)Solar，它是根據(jù)設(shè)置的地點(diǎn)的經(jīng)緯度，判斷應(yīng)用啟動(dòng)時(shí)是日出還是日落，如果是日落時(shí)間段，則設(shè)置主題為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()
    }
}
  • 如果應(yīng)用啟動(dòng)時(shí)是白天時(shí)間，則啟動(dòng)一個(gè)定時(shí)器，并加到Runloop.main隊(duì)列中，一旦判斷時(shí)間點(diǎn)為日落，則自動(dòng)切換為夜間主題；
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

如果對(duì)你有幫助，別忘了加個(gè) 關(guān)注 或 點(diǎn)個(gè) 贊 哦??

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 大眾創(chuàng)業(yè)，萬(wàn)眾創(chuàng)新，人人都是創(chuàng)業(yè)者，人人也都是消費(fèi)者。 近年來(lái)，隨著創(chuàng)業(yè)的低門檻，熱潮不減，任何一個(gè)公司或生意人，...
    推爺閱讀 297評(píng)論 0贊 0
  • 大后天就是除夕了，如果待在公會(huì)里不出去的話，感受不到什么年味。一來(lái)是因?yàn)樘鞖獠焕?。從小到大，過(guò)年的印象都是和...
    雪xl梨閱讀 445評(píng)論 2贊 1
  • 他很努力，經(jīng)常加班到深夜。 噢。我還在加班啊 你經(jīng)常加班，只是假裝自己態(tài)度良好 工作后，聯(lián)系同學(xué)和朋友聽(tīng)得最多的一...
    維生素B2毫克閱讀 654評(píng)論 0贊 0
  • 如果這份感情不是我一個(gè)人的，我寧可什么也不要，一點(diǎn)也不要。 他心里有人，心外也有人。 我不能讓自己沉迷。
    以夢(mèng)為馬的牙云云閱讀 263評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容