Как настроить темный режим в приложениях iOS с iOS 13

Что вы узнаете в этом уроке

1. Что такое iOS Dark Mode и что он делает.
2. Преимущества использования Dark Mode в iOS.
3. Основные соображения при реализации Dark Mode в приложении для iPhone.

Прежде чем мы перейдем к уроку, давайте проверим некоторую основную информацию о темном режиме в iOS 13.

Темный режим

Темный режим — это темный общесистемный вид, который использует более темную цветовую палитру для всех экранов, меню и элементов управления. Подобно Android Dark Mode, он меняет яркую тему на более темную. Он также поддерживает яркость и контрастность, выделяя содержимое переднего плана на темном фоне.

Преимущества темного режима

• Темный режим очень полезен, когда вокруг темно; это меньше напрягает глаза по сравнению с Light Mode.
• Вы можете выбрать Dark Mode в качестве стиля интерфейса по умолчанию.
• Вы также можете использовать настройки, чтобы устройство автоматически выбирало темный режим при слабом освещении.

• Темный режим поддерживает все специальные возможности.

Как было объявлено Apple во время конференции разработчиков в 2019 году, предустановленные приложения Apple, такие как Notes, News, TV, Music, Reminders, Mail и другие, уже будут иметь ее.

Тем не менее, разработчики iPhone смогут использовать новые инструменты Apple, чтобы добавить темный режим в свои приложения. Будучи компанией по разработке приложений для iPhone, у нас было много клиентов, которые хотели интегрировать функцию темного режима в свои приложения для iOS.

Наши опытные разработчики приложений для iPhone решили помочь другим разработчикам, описав функцию темного режима на простом примере iOS. Прежде чем мы увидим, как интегрировать функцию Dark Mode, давайте разберемся с некоторыми соображениями, которые следует учитывать при интеграции функций.

Важные соображения 

Сосредоточьтесь на контенте : убедитесь, что ваш контент выделяется и окружающий пользовательский интерфейс отходит на задний план. Цель Dark Mode — сосредоточить внимание на контенте в интерфейсе.

Проверьте наличие светлых и темных изображений : проверьте, как интерфейс выглядит в обоих случаях. Возможно, вам придется скорректировать дизайн, чтобы приспособить каждый из них, так как дизайн может хорошо работать в одном виде, но не в другом.

Тестирование с изменениями контрастности и прозрачности : вам необходимо проверять содержимое, когда включены функции увеличения контрастности и уменьшения прозрачности. Убедитесь, что ваш контент отличается в темном режиме при настройке контрастности и прозрачности.

Теперь, когда у вас есть четкие соображения, давайте настроим цветовую схему для вашего приложения iOS для различных тем.

Для этого нам нужно создать демонстрационный проект в Xcode.

Шаг 1: Создайте новый проект в Xcode.

Шаг 2. Добавьте новый набор цветов в папку assets.xcassets, как показано на изображениях.

Шаг 3: Перейдите в раскадровку и перетащите элементы управления, которые вы хотели бы добавить в свой проект.

Шаг 4: Перейдите к контроллеру представления и создайте выход (ы) для элементов управления пользовательского интерфейса.

@IBOutlet weak var lblDarkMode: UILabel!
    @IBOutlet weak var tblEmployeeDetails : UITableView!
    @IBOutlet weak var swDarkMode : UISwitch!
    @IBOutlet weak var lblTableHeader : UILabel!
    @IBOutlet weak var btnDarkImage : UIButton!

struct Employee {
    var employeeName : String?
    var employeeID : Int?

    init(empName : String, empID : Int) {
        self.employeeName = empName
        self.employeeID = empID
    }
}

var arrEmployee = [Employee]()

// appending employee details to employee array to bind with table view
        arrEmployee.append(Employee(empName: "John", empID: 101))
        arrEmployee.append(Employee(empName: "Mable", empID: 102))
        arrEmployee.append(Employee(empName: "Korney", empID: 103))
        arrEmployee.append(Employee(empName: "Lilas", empID: 104))
        arrEmployee.append(Employee(empName: "Rycca", empID: 105))
        arrEmployee.append(Employee(empName: "Gasper", empID: 106))

tblEmployeeDetails.dataSource = self

class employeeTableViewCell: UITableViewCell {

    @IBOutlet weak var lblEmployeeName : UILabel!
    @IBOutlet weak var lblEmployeeCode : UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

extension ViewController : UITableViewDataSource {

    //the method returning size of the list
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return arrEmployee.count
    }


    //the method returning each cell of the list
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! employeeTableViewCell
        let employee = arrEmployee[indexPath.row]
        cell.lblEmployeeName.text = "Emp Name : \(employee.employeeName ?? "NA")"
        cell.lblEmployeeCode.text = "Emp Code : \(employee.employeeID ?? 000)"
        return cell
    }
}

@IBAction func swDarkMode(_ sender: UISwitch) {
        if sender.isOn {
            lblDarkMode.textColor = UIColor(named: "colorDemo")
            lblTableHeader.textColor = UIColor(named: "colorDemo")
        }
        else {
            lblDarkMode.textColor = .red
            lblTableHeader.textColor = .red
        }
    }