Apakah mungkin bagi UIStackView untuk menggulir?

210

Katakanlah saya telah menambahkan lebih banyak tampilan di UIStackView yang dapat ditampilkan, bagaimana saya bisa membuat UIStackViewgulir?

itu tentang kode
sumber
Mengapa Anda tidak menggunakan tampilan gulir dengan (atau beberapa) tampilan tumpukan untuk konten?
Wain
2
Solusi satu kalimat adalah untuk lebar yang Anda kontrol-seret ke tampilan gulir kakek-nenek, BUKAN tampilan tumpukan induk. Dijelaskan dalam jawaban saya!
Fattie
Bagaimana cara menanamkan UIStackView di dalam UIScrollView di iOS github.com/onmyway133/blog/issues/324
onmyway133
Mengenai pertanyaan kritis ini di iOS. Sebenarnya ada dua (dan hanya dua) cara untuk melakukannya - itu adalah satu - satunya cara untuk melakukannya dan Anda harus mengikuti salah satu dari dua prosedur, tepatnya. Jawaban saya di bawah ini selalu diperbarui.
Fattie
IYA. Anda HARUS memiliki UIVi antara sebagai tampilan konten dari UIScrollView. Kemudian tempatkan UIStackView sebagai tampilan anak dari tampilan konten. raywenderlich.com/...
poGUIst

Jawaban:

578

Jika ada yang mencari solusi tanpa kode , saya membuat contoh untuk melakukan ini sepenuhnya di storyboard, menggunakan Tata Letak Otomatis.

Anda bisa mendapatkannya dari github .

Pada dasarnya, untuk membuat ulang contoh (untuk pengguliran vertikal):

  1. Buat UIScrollView, dan atur batasannya.
  2. Tambahkan UIStackViewkeUIScrollView
  3. Mengatur kendala: Leading, Trailing, Top& Bottomharus sama dengan yang dariUIScrollView
  4. Siapkan Widthbatasan yang sama antara UIStackViewdan UIScrollView.
  5. Set Axis = Vertikal, Alignment = Isi, Distribusi = Equal Spacing, dan Spacing = 0 pada UIStackView
  6. Tambahkan sejumlah UIViewskeUIStackView
  7. Lari

Pertukaran Widthuntuk Heightdi langkah 4, dan set Axis= Horizontalpada langkah 5, untuk mendapatkan UIStackView horizontal.

Arjan
sumber
55
Terima kasih! "4. Siapkan batasan Lebar yang sama antara UIStackView dan UIScrollView." adalah kuncinya;)
Kosong
19
Nomor 6. juga penting. Ingin menambahkan semua tampilan dalam kode tetapi kemudian Tata Letak Otomatis menunjukkan kendala yang hilang di IB.
pra
11
Halo, sepertinya solusi ini tidak berfungsi untuk pengguliran horizontal. Pada langkah 4, alih-alih mengatur lebar yang sama, saya berasumsi untuk mengatur ketinggian yang sama, dan Axis = Horizontal. Saya mencobanya dan tidak berhasil.
Seto Elkahfi
5
Menambahkan batasan sehingga stackview dan scrollview memiliki lebar yang sama akan menghapus peringatan dari pembuat antarmuka, tetapi kemudian bergulir akan dinonaktifkan. Scrolling hanya terjadi ketika tampilan konten di dalam scrollview lebih besar dari scrollview!
Jason Moore
6
Untuk menguraikan pada poin 6. Jika tampilan tumpukan tidak memiliki elemen tetapi semua kendala sudah ada, Anda mendapatkan "Gulir Lihat Butuh kendala untuk posisi atau tinggi Y". Hanya menambahkan Label di tampilan tumpukan membuat peringatan ini hilang!
Faisal Memon
45

Panduan Tata Letak Otomatis Apple mencakup seluruh bagian tentang Bekerja dengan Tampilan Gulir . Beberapa cuplikan yang relevan:

  1. Sematkan tepi tampilan bagian atas, bawah, depan, dan belakang ke tepi yang sesuai tampilan gulir. Tampilan konten sekarang menentukan area konten tampilan gulir.
  2. (Opsional) Untuk menonaktifkan gulir horizontal, atur lebar tampilan konten sama dengan lebar tampilan gulir. Tampilan konten sekarang mengisi tampilan gulir secara horizontal.
  3. (Opsional) Untuk menonaktifkan pengguliran vertikal, atur ketinggian tampilan konten sama dengan tinggi tampilan gulir. Tampilan konten sekarang mengisi tampilan gulir secara horizontal.

Selanjutnya:

Tata letak Anda harus sepenuhnya menentukan ukuran tampilan konten (kecuali jika ditentukan dalam langkah 5 dan 6). ... Saat tampilan konten lebih tinggi daripada tampilan gulir, tampilan gulir memungkinkan pengguliran vertikal. Ketika tampilan konten lebih lebar dari tampilan gulir, tampilan gulir memungkinkan pengguliran horizontal.

Untuk meringkas, tampilan konten tampilan gulir (dalam hal ini, tampilan tumpukan) harus disematkan ke tepinya dan memiliki lebar dan / atau tinggi dibatasi. Itu berarti bahwa isi tampilan tumpukan harus dibatasi (langsung atau tidak langsung) ke arah yang diinginkan untuk menggulir, yang mungkin berarti menambahkan batasan ketinggian untuk setiap tampilan di dalam tampilan tumpukan yang bergulir secara vertikal, misalnya. Berikut ini adalah contoh cara untuk memungkinkan bergulir vertikal tampilan gulir yang berisi tampilan tumpukan:

// Pin the edges of the stack view to the edges of the scroll view that contains it
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

// Set the width of the stack view to the width of the scroll view for vertical scrolling
stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
titaniumdecoy
sumber
1
Terima kasih, tetapi menghilangkan batasan ketinggian (untuk memungkinkan pengguliran vertikal) menghasilkan kesalahan ini di Storyboard: Need constraints for: Y position or height.Kesalahan ini hanya hilang jika Anda menetapkan batasan lebar dan tinggi untuk tampilan tumpukan, yang menonaktifkan pengguliran vertikal. Apakah kode ini masih berfungsi untuk Anda?
Crashalot
@ Crashalot Untuk menghilangkan kesalahan itu Anda perlu menambahkan subview ke tampilan stack; lihat jawaban saya di bawah ini.
pkamb
16

Hambatan dalam jawaban pilihan-utama di sini berfungsi untuk saya, dan saya telah menempelkan gambar kendala di bawah ini, sebagaimana dibuat di storyboard saya.

Saya memang menemukan dua masalah yang harus diperhatikan oleh orang lain:

  1. Setelah menambahkan kendala serupa dengan yang ada di jawaban yang diterima, saya akan mendapatkan kesalahan autolayout merah Need constraints for: X position or width. Ini diselesaikan dengan menambahkan UILabel sebagai subview dari tampilan stack.

    Saya menambahkan subview secara terprogram, jadi saya awalnya tidak memiliki subview di storyboard. Untuk menghilangkan kesalahan autolayout, tambahkan subview ke storyboard, lalu lepaskan saat memuat sebelum menambahkan subview dan kendala Anda yang sebenarnya.

  2. Saya awalnya mencoba menambahkan UIButtonske UIStackView. Tombol dan tampilan akan dimuat, tetapi tampilan gulir tidak akan bergulir . Ini diselesaikan dengan menambahkan UILabelske Stack View, bukan tombol. Menggunakan kendala yang sama, hierarki tampilan ini dengan gulungan UILabel tetapi UIButtons tidak.

    Saya bingung dengan masalah ini, sebagai UIButtons yang tampaknya memiliki IntrinsicContentSize (digunakan oleh Stack View). Jika ada yang tahu mengapa tombolnya tidak berfungsi, saya ingin tahu mengapa.

Inilah hierarki dan batasan pandangan saya, untuk referensi:

kendala untuk tampilan tumpukan dalam tampilan gulir [1]

pkamb
sumber
3
Anda baru saja menyelamatkan saya beberapa jam kepala terbentur dinding dan frustrasi, saya berada dalam situasi yang persis sama dan tidak bisa mengetahui alasan peringatan itu dan mengapa tidak bekerja dengan tombol. Kenapa Apple mengapa !?
PakitoV
15

Seperti kata Eik, UIStackViewdan UIScrollViewbermain bersama dengan baik, lihat di sini .

Kuncinya adalah bahwa UIStackViewmenangani tinggi / lebar variabel untuk konten yang berbeda dan UIScrollViewkemudian melakukan tugasnya dengan baik untuk menggulir / memantulkan konten tersebut:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    scrollView.contentSize = CGSize(width: stackView.frame.width, height: stackView.frame.height)       
}
pengguna1307434
sumber
2
Tidak perlu menggabungkan tata letak manual dan otomatis untuk memungkinkan tampilan tumpukan yang dapat digulir. Anda hanya perlu membatasi lebar dan / atau tinggi tampilan tumpukan. Lihat jawaban saya untuk perincian dan tautan ke dokumen Apple yang relevan.
titaniumdecoy
Contoh github bekerja dengan sempurna dan sangat jelas. Terima kasih telah berbagi.
Behr
stackView.translatesAutoresizingMaskIntoConstraints = false, ini berhasil dalam kasus saya
Howl Jenkins
10

Saya mencari untuk melakukan hal yang sama dan menemukan posting yang bagus ini . Jika Anda ingin melakukan ini secara terprogram menggunakan anchor API, inilah caranya.

Untuk meringkas, sematkan UIStackViewdi Anda UIScrollView, dan atur batasan jangkar UIStackViewuntuk mencocokkan dengan UIScrollView:

stackView.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor).active = true
stackView.trailingAnchor.constraintEqualToAnchor(scrollView.trailingAnchor).active = true
stackView.bottomAnchor.constraintEqualToAnchor(scrollView.bottomAnchor).active = true
stackView.topAnchor.constraintEqualToAnchor(scrollView.topAnchor).active = true
stackView.widthAnchor.constraintEqualToAnchor(scrollView.widthAnchor).active = true
Dalmazio
sumber
Tolong jangan tambahkan jawaban yang sama untuk beberapa pertanyaan. Jawab yang terbaik dan tandai sisanya sebagai duplikat. Lihat Apakah diterima untuk menambahkan jawaban rangkap ke beberapa pertanyaan?
FelixSFD
10
Mereka tidak benar-benar duplikat dalam kasus ini. Pertanyaan lain menanyakan secara spesifik bagaimana melakukannya secara terprogram sementara yang ini tidak. Memang, jawaban teratas untuk pertanyaan ini menyediakan metode GUI untuk mencapai hasil. Meskipun demikian, solusi terprogram mungkin bermanfaat bagi beberapa pengguna.
Dalmazio
9

Mutakhir untuk tahun 2020.

100% storyboard ATAU 100% kode.


Inilah penjelasan yang paling sederhana:

  1. Miliki pemandangan layar penuh yang kosong

  2. Tambahkan tampilan gulir. Kontrol-tarik dari tampilan gulir ke tampilan dasar , tambahkan kiri-kanan-atas-bawah, semuanya nol.

  3. Tambahkan tampilan tumpukan di tampilan gulir. Kontrol-tarik dari tampilan tumpukan ke tampilan gulir , tambahkan kiri-kanan-atas-bawah, semuanya nol.

  4. Masukkan dua atau tiga label di dalam tampilan tumpukan.

Untuk kejelasan, buat warna latar belakang label menjadi merah. Atur tinggi label menjadi 100.

  1. Sekarang atur lebar masing-masing UILabel:

    Anehnya, kontrol-tarik dari UILabelke tampilan gulir, bukan ke tampilan tumpukan, dan pilih lebar yang sama .

Mengulang:

Jangan kontrol tarik dari UILabel ke induk UILabel - pergi ke kakek-nenek. (Dengan kata lain, pergi jauh ke tampilan gulir, jangan pergi ke tampilan tumpukan.)

Sesederhana itu. Itulah rahasianya.

Kiat rahasia - Bug Apple:

Itu tidak akan bekerja dengan hanya satu item! Tambahkan beberapa label untuk membuat demo berfungsi.

Kamu sudah selesai.

Kiat: Anda harus menambahkan tinggi untuk setiap item baru . Setiap item dalam tampilan tumpukan bergulir harus memiliki ukuran intrinsik (seperti label) atau menambahkan batasan ketinggian eksplisit.


Pendekatan alternatif:

Di atas: secara mengejutkan, atur lebar label UIL ke lebar tampilan gulir (bukan tampilan tumpukan).

Bergantian...

Seret dari tampilan tumpukan ke tampilan gulir, dan tambahkan batasan "sama dengan". Ini sepertinya aneh karena Anda sudah menyematkan kiri-kanan , tetapi itulah cara Anda melakukannya . Tidak peduli betapa aneh rasanya itu rahasianya.

Jadi, Anda memiliki dua opsi:

  1. Anehnya, atur lebar masing-masing item dalam tampilan stack ke lebar kakek nenek scrollview ( bukan induk stackview ).

atau

  1. Secara mengejutkan, atur "lebar sama" dari stackview ke scrollview - meskipun Anda memiliki tepi kiri dan kanan stackview yang disematkan ke scrollview.

Agar jelas, lakukan SALAH satu dari metode itu, JANGAN lakukan keduanya.

Fattie
sumber
8

Pengguliran Horizontal (UIStackView dalam UIScrollView)

Untuk pengguliran horizontal. Pertama, buat a UIStackViewdan a UIScrollViewdan tambahkan ke tampilan Anda dengan cara berikut:

let scrollView = UIScrollView()
let stackView = UIStackView()

scrollView.addSubview(stackView)
view.addSubview(scrollView)

Ingat untuk mengatur translatesAutoresizingMaskIntoConstraintsagar falsepada UIStackViewdan UIScrollView:

stackView.translatesAutoresizingMaskIntoConstraints = false
scrollView.translatesAutoresizingMaskIntoConstraints = false

Untuk membuat semuanya bekerja, jangkar trailing, leading, top dan bottom UIStackViewharus sama dengan UIScrollViewjangkar:

stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true

Tetapi lebar jangkar UIStackViewharus sama dengan atau lebih besar dari lebar UIScrollViewjangkar:

stackView.widthAnchor.constraint(greaterThanOrEqualTo: scrollView.widthAnchor).isActive = true

Sekarang jangkar Anda UIScrollView, misalnya:

scrollView.heightAnchor.constraint(equalToConstant: 80).isActive = true
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true

scrollView.bottomAnchor.constraint(equalTo:view.safeAreaLayoutGuide.bottomAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo:view.trailingAnchor).isActive = true 

Selanjutnya, saya akan menyarankan mencoba pengaturan berikut untuk UIStackViewperataan dan distribusi:

topicStackView.axis = .horizontal
topicStackView.distribution = .equalCentering
topicStackView.alignment = .center

topicStackView.spacing = 10

Akhirnya Anda harus menggunakan addArrangedSubview:metode ini untuk menambahkan subview ke UIStackView Anda.

Insets teks

Salah satu fitur tambahan yang mungkin berguna bagi Anda adalah karena UIStackViewdiadakan di dalam UIScrollViewAnda sekarang memiliki akses ke insets teks untuk membuat hal-hal terlihat sedikit lebih cantik.

let inset:CGFloat = 20
scrollView.contentInset.left = inset
scrollView.contentInset.right = inset

// remember if you're using insets then reduce the width of your stack view to match
stackView.widthAnchor.constraint(greaterThanOrEqualTo: topicScrollView.widthAnchor, constant: -inset*2).isActive = true
sketchyTech
sumber
7

Cukup tambahkan ini ke viewdidload:

let insets = UIEdgeInsetsMake(20.0, 0.0, 0.0, 0.0)
scrollVIew.contentInset = insets
scrollVIew.scrollIndicatorInsets = insets

sumber: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html

Rashad.Z
sumber
Tidak dapat memberi tahu Anda berapa banyak ini menyelamatkan Autolayout + ScrollView saya. Temuan hebat di tautan Apple itu.
ded
apa yang harus dilakukan Apa yang terjadi tanpa ini?
Sayang
Ini hanya menempatkan gulir melihat konten di bawah bilah status.
turingtested
2

Anda dapat mencoba ScrollableStackView : https://github.com/gurhub/ScrollableStackView

Ini adalah library yang kompatibel dengan Objective-C dan Swift. Ini tersedia melalui CocoaPods .

Kode Sampel (Cepat)

import ScrollableStackView

var scrollable = ScrollableStackView(frame: view.frame)
view.addSubview(scrollable)

// add your views with 
let rectangle = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 55))
rectangle.backgroundColor = UIColor.blue
scrollable.stackView.addArrangedSubview(rectangle)
// ...

Kode Sampel (Objective-C)

@import ScrollableStackView

ScrollableStackView *scrollable = [[ScrollableStackView alloc] initWithFrame:self.view.frame];
scrollable.stackView.distribution = UIStackViewDistributionFillProportionally;
scrollable.stackView.alignment = UIStackViewAlignmentCenter;
scrollable.stackView.axis = UILayoutConstraintAxisVertical;
[self.view addSubview:scrollable];

UIView *rectangle = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 55)];
[rectangle setBackgroundColor:[UIColor blueColor]];

// add your views with
[scrollable.stackView addArrangedSubview:rectangle]; 
// ...
mgyky
sumber
Hai Peter, sebenarnya ide yang bagus! Kontribusi selalu diterima, jangan ragu untuk mengirim permintaan penarikan untuk ini. Terbaik.
mgyky
0

Jika Anda memiliki kendala untuk memusatkan Stack View secara vertikal di dalam tampilan gulir, hapus saja.

Ahmed Elashker
sumber
0

Contoh untuk stackview / scrollview vertikal (menggunakan EasyPeasyfor autolayout):

let scrollView = UIScrollView()
self.view.addSubview(scrollView)
scrollView <- [
    Edges(),
    Width().like(self.view)
]

let stackView = UIStackView(arrangedSubviews: yourSubviews)
stackView.axis = .vertical
stackView.distribution = .fill    
stackView.spacing = 10
scrollView.addSubview(stackView)
stackView <- [
    Edges(),
    Width().like(self.view)
]

Pastikan setiap ketinggian subview Anda ditentukan!

DOM
sumber
0
  1. Pertama dan terpenting, desain tampilan Anda, terutama dalam Sketsa atau dapatkan ide tentang apa yang Anda inginkan sebagai konten yang dapat digulir.

  2. Setelah ini, buat formulir pengontrol tampilan bebas (pilih dari inspektur atribut) dan atur tinggi dan lebar sesuai ukuran konten intrinsik tampilan Anda (untuk dipilih dari inspektur ukuran).

  3. Setelah ini di controller tampilan meletakkan tampilan gulir dan ini adalah logika, yang saya temukan bekerja hampir sepanjang waktu di iOS (mungkin perlu melalui dokumentasi kelas tampilan yang dapat diperoleh melalui perintah + klik pada kelas itu atau melalui googling)

    Jika Anda bekerja dengan dua atau lebih tampilan maka pertama-tama mulailah dengan tampilan, yang telah diperkenalkan sebelumnya atau lebih primitif dan kemudian pergi ke tampilan yang telah diperkenalkan kemudian atau lebih modern. Jadi di sini sejak tampilan gulir telah diperkenalkan terlebih dahulu, mulailah dengan tampilan gulir pertama dan kemudian pergi ke tampilan tumpukan. Di sini taruh batasan tampilan gulir ke nol di semua arah vis-a-vis tampilan supernya. Masukkan semua tampilan Anda di dalam tampilan gulir ini dan kemudian taruh dalam tampilan tumpukan.

Saat bekerja dengan tampilan tumpukan

  • Pertama mulai dengan alasan (pendekatan bottoms up), yaitu., Jika Anda memiliki label, bidang teks dan gambar dalam tampilan Anda, maka lay out pandangan ini terlebih dahulu (di dalam tampilan gulir) dan setelah itu menempatkannya dalam tampilan tumpukan.

  • Setelah itu atur properti view stack. Jika tampilan yang diinginkan masih belum tercapai, maka gunakan tampilan tumpukan lainnya.

  • Jika masih belum tercapai maka mainkan dengan resistensi kompresi atau prioritas pelukan konten.
  • Setelah ini tambahkan batasan pada tampilan stack.
  • Juga pikirkan menggunakan UIView kosong sebagai tampilan pengisi, jika semua hal di atas tidak memberikan hasil yang memuaskan.

Setelah membuat tampilan Anda, beri batasan antara tampilan tumpukan ibu dan tampilan gulir, sementara kendala tampilan tumpukan anak dengan tampilan tumpukan ibu. Mudah-mudahan saat ini sudah berfungsi dengan baik atau Anda mungkin mendapatkan peringatan dari Xcode memberikan saran, membaca apa yang dikatakannya dan mengimplementasikannya. Semoga sekarang Anda harus memiliki pandangan kerja sesuai harapan Anda :).

Nikhil Pandey
sumber
0

Untuk tampilan gulir bersusun atau tunggal, tampilan gulir harus ditetapkan lebar tetap dengan tampilan root. Tampilan tumpukan utama yang berada di dalam tampilan gulir harus mengatur lebar yang sama. [Tampilan gulir saya di bawah Tampilan abaikan saja]

Siapkan batasan Lebar yang sama antara UIStackView dan UIScrollView.

masukkan deskripsi gambar di sini

Md Imran Choudhury
sumber
0

Jika ada yang mencari scrollview secara horizontal

func createHorizontalStackViewsWithScroll() {

 self.view.addSubview(stackScrollView)
 stackScrollView.translatesAutoresizingMaskIntoConstraints = false
 stackScrollView.heightAnchor.constraint(equalToConstant: 85).isActive = true
 stackScrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
 stackScrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
 stackScrollView.bottomAnchor.constraint(equalTo: visualEffectViews.topAnchor).isActive = true
 stackScrollView.addSubview(stackView)

 stackView.translatesAutoresizingMaskIntoConstraints = false
 stackView.topAnchor.constraint(equalTo: stackScrollView.topAnchor).isActive = true
 stackView.leadingAnchor.constraint(equalTo: stackScrollView.leadingAnchor).isActive = true
 stackView.trailingAnchor.constraint(equalTo: stackScrollView.trailingAnchor).isActive = true
 stackView.bottomAnchor.constraint(equalTo: stackScrollView.bottomAnchor).isActive = true
 stackView.heightAnchor.constraint(equalTo: stackScrollView.heightAnchor).isActive = true

 stackView.distribution = .equalSpacing
 stackView.spacing = 5
 stackView.axis = .horizontal
 stackView.alignment = .fill


 for i in 0 ..< images.count {
 let photoView = UIButton.init(frame: CGRect(x: 0, y: 0, width: 85, height: 85))
 // set button image
 photoView.translatesAutoresizingMaskIntoConstraints = false
 photoView.heightAnchor.constraint(equalToConstant: photoView.frame.height).isActive = true
 photoView.widthAnchor.constraint(equalToConstant: photoView.frame.width).isActive = true

 stackView.addArrangedSubview(photoView)
 }
 stackView.setNeedsLayout()

 }
pengguna1039695
sumber
0

Tempatkan tampilan gulir pada adegan Anda, dan ukurlah sehingga memenuhi adegan itu. Kemudian, tempatkan tampilan tumpukan di dalam tampilan gulir, dan tempatkan tombol tambah item di dalam tampilan tumpukan. Segera setelah semuanya ada, tetapkan batasan berikut:

Scroll View.Leading = Superview.LeadingMargin
Scroll View.Trailing = Superview.TrailingMargin
Scroll View.Top = Superview.TopMargin
Bottom Layout Guide.Top = Scroll View.Bottom + 20.0
Stack View.Leading = Scroll View.Leading
Stack View.Trailing = Scroll View.Trailing
Stack View.Top = Scroll View.Top
Stack View.Bottom = Scroll View.Bottom
Stack View.Width = Scroll View.Width

masukkan deskripsi gambar di sini

kode: Stack View.Width = Scroll View.Widthadalah kuncinya.

Joshua Cleetus
sumber
0

Menambahkan beberapa perspektif baru untuk macOS Catalyst. Karena aplikasi macOS mendukung pengubahan ukuran jendela, ada kemungkinan Anda UIStackViewakan beralih dari status yang tidak dapat dikendalikan ke status yang dapat digulir, atau sebaliknya. Ada dua hal halus di sini:

  • UIStackView dirancang agar sesuai dengan semua area yang ada.
  • Selama transisi, UIScrollViewakan mencoba mengubah ukuran batasnya untuk memperhitungkan area yang baru didapat / hilang di bawah bilah navigasi Anda (atau bilah alat dalam hal aplikasi macOS).

Sayangnya ini akan membuat loop tak terbatas. Saya tidak terlalu mengenal UIScrollViewdan itu adjustedContentInset, tetapi dari log saya dalam layoutSubviewsmetodenya, saya melihat perilaku berikut:

  • Satu memperbesar jendela.
  • UIScrollView mencoba mengecilkan batasnya (karena tidak perlu area di bawah bilah alat).
  • UIStackView mengikuti.
  • Entah bagaimana UIScrollViewtidak puas, dan memutuskan untuk mengembalikan ke batas yang lebih besar. Ini terasa sangat aneh bagi saya karena apa yang saya lihat dari log adalah itu UIScrollView.bounds.height == UIStackView.bounds.height.
  • UIStackView mengikuti.
  • Kemudian putar ke langkah 2.

Tampak bagi saya bahwa dua langkah akan memperbaiki masalah:

  • Sejajarkan UIStackView.topdengan UIScrollView.topMargin.
  • Setel contentInsetAdjustmentBehaviorke .never.

Di sini saya prihatin dengan tampilan yang dapat digulir secara vertikal dengan yang tumbuh secara vertikal UIStackView. Untuk pasangan horizontal, ubah kode sesuai dengan itu.

Semoga ini bisa membantu siapa pun di masa depan. Tidak dapat menemukan orang yang menyebutkan ini di Internet dan butuh waktu cukup lama untuk mencari tahu apa yang terjadi.

Minsheng Liu
sumber