iOS Review | UIAppearance夜间主题配置

2017-09-21 本文已影响120人清無

最终效果

要求：

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

如果对你有帮助，别忘了加个关注或点个赞哦😁

iOS Review | UIAppearance夜间主题配置

要求：

UIApplication Key Window

UINavigaitonBar

UITaBar

UISegmentedControl

UIStepper

UISlider

UIProgressView

UISwitch

其他

定义一个Theme枚举

使用主题

自动设置夜间主题

Github

猜你喜欢

热点阅读