iOS13 기반 다크 모드 구현

7604 단어 dark-mode Swift Xcode11 iOS13 iOS

개인 어플리케이션 어둠 모드를 지원하기 때문에 구체적인 설치 절차와 tips를 정리했다.
※ Dark Mode의 개요와 설치를 알고 있어야 합니다.아직 없는 사람은 문말의 참고 보도를 참조하시오

색상 세트 사용

기본적으로 하드코딩된 색을 동적 색으로 지정합니다.
지금까지 색상 지정은 코드로 정의되었지만 암흑 모드 대응을 계기로 Assets Catalog의 ColorSet(iOS11~)으로 옮겨졌습니다.
색상 세트의 장점은 다음과 같습니다.

Storyboard Xib, code 색상 사용 가능

조명, Dark 색상 지정 가능

참고로 iOS13SDK의 UIKIT에 미리 설정된 UI Element Colors.systemBackgroundColor 등도 지정할 수 있습니다.

새 Asset Catalog, 이미지의 Assets와 색상의 Assets를 분리하여 관리하면 쉽게 볼 수 있음

SwiftGen 등은 코드에서 참조할 때 유형별로 안전하고 편리하다.

#swiftgen.yml
xcassets:
  inputs:
   - ./FamilyReminder/Images.xcassets
   - ./FamilyReminder/Colors.xcassets
  outputs:
    - templateName: swift5
      output: ./FamilyReminder/Generated/Assets.swift

// 利用する時はこんな感じでタイプセーフに使える
closeButton.tintColor = Asset.Colors.primary.color

이중 관리가 필요하지 않으므로 모든 색상 지정을 색상 Assets로 마이그레이션하면 기존 코드의 색상 지정 파일이 폐기됩니다.
스토리보드, Xib, 코드에서 사용할 수 있고 어두운 모드를 지원한다면 먼저 Color Asset으로 옮기면 그 후의 작업이 진전될 것이다.

UI Element Colors 사용 가능

iOS13SDK에서 미리 설정된 UI Element Colors.systemBackgroundColor 등을 사용하면 자동으로 다음과 같은 작업을 수행할 수 있습니다.

지정된 색의view가modaly인지 여부에 따라 농도를 변경

iOS13 이전 터미널의 경우 대체 색상 지정(ColorSet과 동일)

.systemBackgroundColor, white 등

어두운 모드에서 순수한 프로그램을 보면,modal은 배경색이 일반적인view 배경색보다 밝다는 것을 발견할 수 있습니다.
이것은 하나의 화면으로 하나의 화면으로 설치되는 것이 아니라 UIKIT가 준비한 .systemBackgroundColor 등 계층 구조를 파악하여 자동으로 처리한다.보기가 기초 단계인지elevated 단계인지에 따라 농도가 달라진다..secondarySystemBackground 맞춰도 돼요. .systemBackgroundColor 색깔 잘 만들었어요.
view
modal

이 기능은 상당히 편리하기 때문에 가능한 한 .systemBackgroundColor 등을 사용하는 것이 좋다고 생각합니다.다크 모드에 대비한 기능이 준비되어 있으므로 활용하는 것이 좋다.
저는 backgroundColor를 맞춤형으로 제작하는 응용 프로그램도 많기 때문에 디자이너와 교류해야 하는 곳이죠.애플이 제공하는 도구에 대한 이해가 중요하다.
이를 계기로 TableView가 주체 화면 등에서 독자적으로 지정한 배경색을 폐지하고.systemBackgroundColor로 통일했습니다.

암/광 표시 확인

스토리보드, Xib를 이용하면 확인이 쉬워요.

스토리보드, Xib를 사용하여 레이아웃을 하면 IB에서 암등을 간단하게 확인할 수 있습니다.(IB 아래 메뉴)

구축 후 Xcode 메뉴를 통해 실시간으로 변경(실제/시뮬레이터)

실기라면 버튼을 컨트롤 센터에 놓으면 단번에 전환할 수 있다設定 > コントロールセンター > コントロールセンターをカスタマイズ

미조

동료의 디자이너에게 배운 Contrast Checker 색깔의 분별력 등을 확인했다.
수치로 판단할 수 있어서 편해요.
마지막에 베이스와 disabled 컬러를 살짝 작은 숟가락으로 만들어볼게요.

숙제가 끝날 때까지의 시간은 반나절 정도밖에 안 된다.화면 수가 20 정도이고 자신도 디자인을 했기 때문에 나는 비교적 일찍 완성했다고 생각한다.
반면 색상을 ColorSet 등의 의미 색상으로 재구성하는 데는 오랜 시간이 걸렸습니다.나는 어둠의 패턴이 자신의 응용 프로그램이 의미로 색을 지정할 수 있는지 재검토할 수 있는 좋은 기회라고 생각한다.
ColorSet, UI Element Color 등 Xcode의 의미에서 색상을 지정하는 도구가 모두 갖추어져 있습니다.
업무도 전체 화면의 디자인이 필요합니까?이렇게 말하면 의문이다. 만약에 주요 화면의 디자인 칸이 있다면 간단하게 어두운 패턴에 대응하는 도구가 완비되어 있기 때문에 IB를 직접 만지작거린다. 코드와 디자이너의 확인이 비교적 빠르다.

보충하여 기록하다

튀는 화면을 지원하는 어두운 모드를 잊지 마세요.응용 프로그램을 시작한 후의 화면만 순식간에 하얗게 변했다.
나는 특별히 튀는 화면을 맞춤 제작하지 않았고, 방치한 것도 있는데, 문제는 발표된 후에 발견되었다😇( Slack도 잊어버린 것 같고 나중에 추가해서 나왔어요. )
대응은 LaunchScreen입니다.스토리보드의view 배경색을 System Background Color로 전환하기만 하면 됩니다.