iOS
UIScrollView met StackView-kind

Een complexe StackView in Scrollview-voorbeeld

Hier volgt een voorbeeld van wat kan worden gedaan met geneste StackViews, waardoor de gebruiker de indruk krijgt van een continue scrollervaring met complexe gebruikersinterface-elementen of uitlijningen.

Voorkomen van dubbelzinnige lay-out

Een veelgestelde vraag over StackViews in Scrollviews komt van dubbelzinnige met / hoge waarschuwingen over interfacebuilder. Zoals dit antwoord heeft uitgelegd, is het noodzakelijk om:

1. Voeg in de UIScrollView een UIView toe (de contentScrollView);
2. Stel in deze contentScrollView de marges voor boven, onder, links en rechts in op 0
3. Stel ook het midden horizontaal en verticaal uit;

Scrollen naar inhoud in geneste StackViews

Het grote probleem met scrollen is het bepalen van de offset die nodig is om (bijvoorbeeld) een tekstveld in een StackView te presenteren met in de ScrollView .

Als u probeert de positie van Textfield.frame.minY kan 0 zijn , omdat het minY-frame alleen rekening houdt met de afstand tussen het element en de bovenkant van de StackView. U moet dus rekening houden met alle andere bovenliggende stackviews / views.

Een goede oplossing hiervoor is:

1 - Implementeer de ScrollView-extensie

extension UIScrollView {

    func scrollToShowView(view: UIView){
        var offset = view.frame.minY
        var superview = view.superview
        while((superview  != nil)){
            offset += (superview?.frame.minY)!
            superview = superview?.superview
        }
        
        offset -= 100 //optional margin added on offset
        
        self.contentOffset = CGPoint.init(x: 0, y: offset)
    }

}

Hiermee wordt rekening gehouden met alle bovenliggende weergave en wordt de benodigde offset voor de schuifweergave opgeteld en de benodigde weergave op het scherm weergegeven (bijvoorbeeld een tekstveld dat niet achter het toetsenbord van de gebruiker kan blijven)

Gebruiksvoorbeeld:

func textViewDidBeginEditing(_ textView: UITextView) {
    self.contentScrollView.scrollToShowView(view: textView)
}