[Swift 5] Wählen Sie mit der UIDate-Auswahl unter iOS14 ein Datum aus

Überblick

Ich habe versucht, die Datumsauswahl mit DatePicker auf coole und einfache Weise zu implementieren. Ich werde ein Memorandum über Versuch und Irrtum hinterlassen, wenn das Design nicht gut war. Bitte fühlen Sie sich leicht, da es durch Drücken montiert wird.

Fertiges Produkt dieses Artikels

Sie können das Datum aus dem Kalender auswählen, indem Sie auf die Datumsbezeichnung drücken Wenn die Auswahl abgeschlossen ist, wird der Bildschirm während der Animation geschlossen und das Datum auf den Beschriftungsteil angewendet

Was ich machen wollte

Tippen Sie auf das Datum, das als "--- Jahr-Monat-Tag" angezeigt wird, um den Datumsauswahlbildschirm für den Kalendertyp iOS 14 anzuzeigen. Das Design sieht so aus

Vorher nicht ausgewählt Nach der Auswahl

Seit iOS14 ist das Verhalten von DatePicker kühler geworden, daher dachte ich, es wäre einfach, es zu verwenden.

Klicken Sie hier für Artikel zu DatePicker für iOS14 https://qiita.com/kj_trsm/items/a53b0b3f7e1bc7c06106

Try & Error

1: Ich habe den UIButton ohne nachzudenken gedrückt

Ich habe einen Knopf gedrückt und das Design angepasst, aber nein, ich konnte DatePicker nicht aufrufen (ich dachte, ich würde es wie ColorPicker verwenden). Klicken Sie hier für die Farbauswahl https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204184/3ebb806c-59bf-6dd3-adb9-335026e7101d.jpeg

2: Setzen Sie einen DatePicker

Wie Sie in dem Artikel sehen können, den ich oben geschrieben habe, gibt es einige Stile Es wird in der Nähe dieses Entwurfs sein

Hoge.swift

datePicker.preferredDatePickerStyle = .compact
datePicker.datePickerMode = .date

Es sieht aus wie das

!

Das Verhalten ist wie gewünscht, der Rest ist Designanpassung! Ich fühle mich wie ... Ich kann das Design nicht gut ändern

――Was ist die Hintergrundfarbe Grau? -> datePicker.backgroundColor = .clear ändert sich nicht

• Ich möchte die Zeichen nach links ausrichten-> Ich kann keine Einstellung wie UILabel finden --- Wie zeigt man es im Format ---- Jahr-Monat-Tag an?

Lösungen

`Was ist die Hintergrundfarbe grau? ``

Hoge.swift

datePicker.subviews[0].subviews[0].subviews[0].backgroundColor = .clear

Die Hintergrundfarbe wurde mit geändert

"Ich möchte die Zeichen links ausrichten" -> Ich weiß nicht, es war unmöglich

Ich konnte die Zeichen nicht nach links ausrichten, daher habe ich beschlossen, das UI-Label durch Drücken auf das UI-Label zu legen. Nach dem Stapeln

Hoge.swift

datePicker.subviews.forEach({ $0.subviews.forEach({ $0.removeFromSuperview() }) })

Durch Löschen von SubViews von datePicker mit verschwinden der mysteriöse graue Hintergrund und die Zeichen des Datums. Zeigen Sie die darunter liegenden UI-Beschriftungszeichen so an, als wären sie UI-Late-Picker-Zeichen Auf diese Weise funktioniert der UIDatePicker beim Tippen und das angezeigte Datum wird zu UILabel, sodass Sie problemlos das gewünschte Verhalten erstellen können.

--- Wie zeigt man es im Format ---- Jahr-Monat-Tag an? -> Ich habe beschlossen, es auf UILabel anzuzeigen, daher habe ich es nicht untersucht

Vollständiges Formular

Überlagern Sie UILabel und UIDatePicker im Storyboard und setzen Sie UILabel auf "--- Jahr-Monat-Tag"

HogeViewController.swift

import UIKit
import RxSwift
import RxCocoa

class HogeViewController: UIViewController {

    @IBOutlet var datePicker: UIDatePicker!
    @IBOutlet var dateLabel: UILabel!

    private let disposeBag = DisposeBag()

    override func viewDidLoad() {
        super.viewDidLoad()
        datePicker.rx.value.changed.asObservable()
            .subscribe({ event in
                if let date = event.element{
                    self.dateLabel.text = date.toDisplayString()
                }
            })
            .disposed(by: disposeBag)
    }

    override func viewDidLayoutSubviews() {
        //Machen Sie datePicker transparent
        datePicker.subviews.forEach({ $0.subviews.forEach({ $0.removeFromSuperview() }) })
    }
}

Überwachen Sie Änderungen des Werts von "datePicker" angemessen und lassen Sie UILabel das Datum als Abschluss festlegen Wenn Sie darauf tippen, wird der Wert festgelegt und DatePicker hat die Animation beim Schließen ausgeführt.

abschließend

Am Ende wurde es eine Pointe zum Stapeln. Ich bin mir sicher, dass es eine bessere Lösung gibt, aber ich werde es als Memorandum belassen.