iOS Contrôle personnalisé avec éléments dynamiques

Question

J'ai commencé à créer mon premier projet Open Source que j'aimerais partager avec le monde entier. C'est une simple vue Audio Player qui fonctionnera avec le protocole AudioProvidable, puis jouera une donnée audio après sa réception.

Pour l'instant, j'ai une classe IBDesignable hérite de UIView qui se construit en définissant des contraintes pour ses sous-vues comme celle-ci:

override init(frame: CGRect) { 
     super.init(frame: frame) 
#if !TARGET_INTERFACE 
     translatesAutoresizingMaskIntoConstraints = false 
#endif 
     prepareView() 
     updateUI() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
     prepareView() 
     updateUI() 
    } 

    func prepareView() { 
      //Necessary in order to set our own constraints 
      //btnPlay is already doing the same inside buttonWithImage(_:) 
      spinner.translatesAutoresizingMaskIntoConstraints = false 
      sliderAudioProgress.translatesAutoresizingMaskIntoConstraints = false 

      //Add necessary subviews to start setting up layout 
      addSubview(sliderAudioProgress) 
      addSubview(lblAudioDuration) 
      addSubview(lblAudioProgress) 
      addSubview(spinner) 
      addSubview(btnPlay) 
      addSubview(lblTrackNumber) 
      addSubview(btnNextTrack) 
      addSubview(btnPreviousTrack) 

      //Height of play & next/previous track buttons defines AudioPlayerView height 
      let viewHeight:CGFloat = 48 * 2 

      //Setup UI layout using constraints 
      NSLayoutConstraint.activate([ 

       heightAnchor.constraint(equalToConstant: viewHeight), 

       //Play button constraints 
       btnPlay.topAnchor.constraint(equalTo: topAnchor), 
       btnPlay.leadingAnchor.constraint(equalTo: leadingAnchor), 

       //Spinner constraints 
       spinner.centerYAnchor.constraint(equalTo: btnPlay.centerYAnchor), 
       spinner.centerXAnchor.constraint(equalTo: btnPlay.centerXAnchor), 

       //Progress label constraints 
       lblAudioProgress.leadingAnchor.constraint(equalTo: btnPlay.trailingAnchor), 
       lblAudioProgress.centerYAnchor.constraint(equalTo: btnPlay.centerYAnchor), 

       //Duration label constraints 
       lblAudioDuration.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -spacing), 
       lblAudioDuration.centerYAnchor.constraint(equalTo: btnPlay.centerYAnchor), 

       //Audio Progress Slider constraints 
       sliderAudioProgress.leadingAnchor.constraint(equalTo: lblAudioProgress.trailingAnchor, constant: spacing), 
       sliderAudioProgress.trailingAnchor.constraint(equalTo: lblAudioDuration.leadingAnchor, constant: -spacing), 
       sliderAudioProgress.centerYAnchor.constraint(equalTo: btnPlay.centerYAnchor), 

       lblTrackNumber.centerXAnchor.constraint(equalTo: centerXAnchor), 

       btnPreviousTrack.topAnchor.constraint(equalTo: btnPlay.bottomAnchor), 
       btnPreviousTrack.trailingAnchor.constraint(equalTo: lblTrackNumber.leadingAnchor, constant: -spacing), 

       btnNextTrack.topAnchor.constraint(equalTo: btnPlay.bottomAnchor), 
       btnNextTrack.leadingAnchor.constraint(equalTo: lblTrackNumber.trailingAnchor, constant: spacing), 

       lblTrackNumber.centerYAnchor.constraint(equalTo: btnNextTrack.centerYAnchor) 
      ]) 

      //Spinner setup: 
      spinner.hidesWhenStopped = true 

      //btnPlay setup: 
      btnPlay.addTarget(self, action: #selector(AudioPlayerView.playButtonPressed), for: .touchUpInside) 

      //Slider setup 
      sliderAudioProgress.thumbTintColor = UIColor(keyFromAppColorPalette: "secondary_color") 
      sliderAudioProgress.addTarget(self, action: #selector(AudioPlayerView.durationSliderValueChanged), for: .valueChanged) 
      sliderAudioProgress.addTarget(self, action: #selector(AudioPlayerView.durationSliderReleased), for: .touchUpInside) 
      sliderAudioProgress.isEnabled = false 
      sliderAudioProgress.isContinuous = true 
      sliderAudioProgress.semanticContentAttribute = .playback 

      //View's UI effects to make it look better 
      layer.cornerRadius = 6 
      layer.masksToBounds = true 
      layer.borderColor = UIColor.black.cgColor 
      layer.borderWidth = 2 
      semanticContentAttribute = .playback 

      spinner.startAnimating() 
      btnPlay.isHidden = true 
     } 

En conséquence qui est ce que nous avons lorsque l'audio reçoit:

Après l'audio reçu:

Dans le cas où il n'y a qu'un seul son pour lire la partie inférieure, les commutations entre les pistes sont redondantes. Où dois-je mettre un code de vérification des pistes audio pour redéfinir mon interface utilisateur? Je ne veux pas appeler prepareView() dans didSet {} de tableau de source audio, parce que je ne veux pas que les éléments existants soient ajoutés deux fois. Cordialement.

Answer 1

Vous pouvez ajouter un drapeau bool pour voir si le code est en cours d'exécution pour la première fois, ou, ce que je trouve plus facile et peut-être un peu plus logique ...

func prepareView() { 

     //Necessary in order to set our own constraints 
     //btnPlay is already doing the same inside buttonWithImage(_:) 
     spinner.translatesAutoresizingMaskIntoConstraints = false 
     sliderAudioProgress.translatesAutoresizingMaskIntoConstraints = false 

     // if our subviews have not yet been added 
     if sliderAudioProgress.superview == nil { 

      //Add necessary subviews to start setting up layout 
      addSubview(sliderAudioProgress) 
      addSubview(lblAudioDuration) 
      ... etc 

     } 

     // continue here with any "every time" setup tasks 
    }