[Swift 5] Sélectionnez une date avec le sélecteur UIDate sur iOS14

Aperçu

J'ai essayé d'implémenter la sélection de date avec DatePicker d'une manière simple et cool. Je laisserai un mémorandum d'essais et d'erreurs lorsque la conception n'était pas bonne. Veuillez vous sentir léger car il est monté en poussant.

Produit fini de cet article

Vous pouvez sélectionner la date dans le calendrier en appuyant sur la partie étiquette de date Lorsque la sélection est terminée, l'écran se ferme pendant l'animation et la date est appliquée à la partie étiquette

Ce que je voulais faire

Appuyez sur la date affichée sous la forme «--- année-mois-jour» pour afficher l'écran de sélection de date de type calendrier iOS 14. Le design ressemble à ceci

Avant désélectionné Après sélection

Depuis iOS14, le comportement de DatePicker est devenu plus cool, j'ai donc pensé qu'il serait facile de l'utiliser.

Cliquez ici pour les articles liés à DatePicker pour iOS14 https://qiita.com/kj_trsm/items/a53b0b3f7e1bc7c06106

Try & Error

1: je mets l'UIButton sans réfléchir

J'ai mis un bouton et assorti le design, mais non, je ne pouvais pas appeler DatePicker (je pensais que je l'utiliserais comme ColorPicker) Cliquez ici pour le sélecteur de couleur https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204184/3ebb806c-59bf-6dd3-adb9-335026e7101d.jpeg

2: Mettez un DatePicker

Comme vous pouvez le voir dans l'article que j'ai écrit ci-dessus, il y a quelques styles Ce sera proche de ce design

Hoge.swift

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

Ça ressemble à ça

!

Le comportement est comme souhaité, le reste est donc l'ajustement de la conception! Cela me donne l'impression que ... Je ne peux pas bien changer le design

―― Quelle est la couleur de fond gris? -> datePicker.backgroundColor = .clear ne change pas --Je veux aligner les caractères à gauche-> Je ne trouve pas de paramètre comme UILabel --- Comment l'afficher au format «---- année-mois-jour»?

Solutions

`Quelle est la couleur de fond gris? ''

Hoge.swift

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

La couleur d'arrière-plan a été modifiée avec

Je veux aligner les caractères vers la gauche -> je ne sais pas, c'était impossible

Je ne pouvais pas aligner les caractères vers la gauche, j'ai donc décidé de mettre l'UIDatePicker au-dessus de l'UILabel en le poussant. Après l'empilement

Hoge.swift

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

En supprimant les sous-vues de datePicker avec, le mystérieux fond gris et les caractères de la date disparaissent. Afficher les caractères d'étiquette de l'interface utilisateur en dessous comme s'il s'agissait de caractères de sélection tardive de l'interface utilisateur Ce faisant, UIDatePicker fonctionne lorsqu'il est touché, et la date affichée devient UILabel, de sorte que vous pouvez facilement créer le comportement souhaité.

--- Comment l'afficher au format «---- année-mois-jour»? -> J'ai décidé de l'afficher sur UILabel, donc je n'ai pas enquêté dessus

Formulaire rempli

Superposez UILabel et UIDatePicker sur Storyboard et définissez UILabel sur --- année-mois-jour

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() {
        //Rendre datePicker transparent
        datePicker.subviews.forEach({ $0.subviews.forEach({ $0.removeFromSuperview() }) })
    }
}

Surveillez de manière appropriée les modifications de la valeur de datePicker et laissez UILabel le définir comme date de fin Lorsque vous appuyez dessus, la valeur est définie et DatePicker a réalisé l'animation lors de sa fermeture.

en conclusion

En fin de compte, c'est devenu une ligne de frappe à empiler. Je suis sûr qu'il existe une meilleure solution, mais je vais la laisser sous forme de mémorandum.