iOS
UIScrollView z dzieckiem potomnym StackView

Złożony widok StackView w Scrollview Przykład

Poniżej znajduje się przykład tego, co można zrobić za pomocą zagnieżdżonych widoków StackView, dając użytkownikowi wrażenie ciągłego przewijania przy użyciu złożonych elementów interfejsu użytkownika lub wyrównania.

Zapobieganie niejednoznacznemu układowi

Częste pytanie o StackViews wewnątrz Scrollviews pochodzi z niejednoznacznych alertów / heigh w narzędziu do tworzenia interfejsów. Jak wyjaśniono w tej odpowiedzi , konieczne jest:

1. Dodaj w UIScrollView UIView (contentScrollView);
2. W tej zawartości ScrollView ustaw górny, dolny, lewy i prawy margines na 0
3. Ustaw także wyrównaj środek w poziomie i w pionie;

Przewijanie do treści w zagnieżdżonych widokach stosu

Ważną kwestią dotyczącą przewijania jest określenie przesunięcia niezbędnego do przedstawienia (na przykład) pola tekstowego w StackView, w którym znajduje się wewnątrz ScrollView .

Jeśli spróbujesz uzyskać pozycję Textfield.frame.minY może to być 0 , ponieważ ramka minY uwzględnia tylko odległość między elementem a górą StackView. Musisz więc wziąć pod uwagę wszystkie inne widoki / widoki stosu nadrzędnego.

Dobrym rozwiązaniem tego jest:

1 - Zaimplementuj rozszerzenie ScrollView

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)
    }

}

Spowoduje to uwzględnienie całego widoku rodzica i zsumowanie niezbędnego przesunięcia dla widoku przewijania, prezentując niezbędny widok na ekranie (na przykład pole tekstowe, które nie może pozostać za klawiaturą użytkownika)

Przykład użycia:

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