Katakanlah saya telah menambahkan lebih banyak tampilan di UIStackView yang dapat ditampilkan, bagaimana saya bisa membuat UIStackView
gulir?
ios
uiscrollview
uistackview
itu tentang kode
sumber
sumber
Jawaban:
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):
UIScrollView
, dan atur batasannya.UIStackView
keUIScrollView
Leading
,Trailing
,Top
&Bottom
harus sama dengan yang dariUIScrollView
Width
batasan yang sama antaraUIStackView
danUIScrollView
.UIStackView
UIViews
keUIStackView
Pertukaran
Width
untukHeight
di langkah 4, dan setAxis
=Horizontal
pada langkah 5, untuk mendapatkan UIStackView horizontal.sumber
Panduan Tata Letak Otomatis Apple mencakup seluruh bagian tentang Bekerja dengan Tampilan Gulir . Beberapa cuplikan yang relevan:
Selanjutnya:
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:
sumber
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?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:
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.
Saya awalnya mencoba menambahkan
UIButtons
ke UIStackView. Tombol dan tampilan akan dimuat, tetapi tampilan gulir tidak akan bergulir . Ini diselesaikan dengan menambahkanUILabels
ke 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:
sumber
Seperti kata Eik,
UIStackView
danUIScrollView
bermain bersama dengan baik, lihat di sini .Kuncinya adalah bahwa
UIStackView
menangani tinggi / lebar variabel untuk konten yang berbeda danUIScrollView
kemudian melakukan tugasnya dengan baik untuk menggulir / memantulkan konten tersebut:sumber
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
UIStackView
di AndaUIScrollView
, dan atur batasan jangkarUIStackView
untuk mencocokkan denganUIScrollView
:sumber
Mutakhir untuk tahun 2020.
100% storyboard ATAU 100% kode.
Inilah penjelasan yang paling sederhana:
Miliki pemandangan layar penuh yang kosong
Tambahkan tampilan gulir. Kontrol-tarik dari tampilan gulir ke tampilan dasar , tambahkan kiri-kanan-atas-bawah, semuanya nol.
Tambahkan tampilan tumpukan di tampilan gulir. Kontrol-tarik dari tampilan tumpukan ke tampilan gulir , tambahkan kiri-kanan-atas-bawah, semuanya nol.
Masukkan dua atau tiga label di dalam tampilan tumpukan.
Untuk kejelasan, buat warna latar belakang label menjadi merah. Atur tinggi label menjadi 100.
Sekarang atur lebar masing-masing UILabel:
Anehnya, kontrol-tarik dari
UILabel
ke 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.
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:
atau
Agar jelas, lakukan SALAH satu dari metode itu, JANGAN lakukan keduanya.
sumber
Pengguliran Horizontal (UIStackView dalam UIScrollView)
Untuk pengguliran horizontal. Pertama, buat a
UIStackView
dan aUIScrollView
dan tambahkan ke tampilan Anda dengan cara berikut:Ingat untuk mengatur
translatesAutoresizingMaskIntoConstraints
agarfalse
padaUIStackView
danUIScrollView
:Untuk membuat semuanya bekerja, jangkar trailing, leading, top dan bottom
UIStackView
harus sama denganUIScrollView
jangkar:Tetapi lebar jangkar
UIStackView
harus sama dengan atau lebih besar dari lebarUIScrollView
jangkar:Sekarang jangkar Anda
UIScrollView
, misalnya:Selanjutnya, saya akan menyarankan mencoba pengaturan berikut untuk
UIStackView
perataan dan distribusi: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
UIStackView
diadakan di dalamUIScrollView
Anda sekarang memiliki akses ke insets teks untuk membuat hal-hal terlihat sedikit lebih cantik.sumber
Cukup tambahkan ini ke
viewdidload
:sumber: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html
sumber
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)
Kode Sampel (Objective-C)
sumber
Jika Anda memiliki kendala untuk memusatkan Stack View secara vertikal di dalam tampilan gulir, hapus saja.
sumber
Contoh untuk stackview / scrollview vertikal (menggunakan
EasyPeasy
for autolayout):Pastikan setiap ketinggian subview Anda ditentukan!
sumber
Pertama dan terpenting, desain tampilan Anda, terutama dalam Sketsa atau dapatkan ide tentang apa yang Anda inginkan sebagai konten yang dapat digulir.
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).
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.
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 :).
sumber
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]
sumber
Jika ada yang mencari scrollview secara horizontal
sumber
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:
kode:
Stack View.Width = Scroll View.Width
adalah kuncinya.sumber
Menambahkan beberapa perspektif baru untuk macOS Catalyst. Karena aplikasi macOS mendukung pengubahan ukuran jendela, ada kemungkinan Anda
UIStackView
akan 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.UIScrollView
akan 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
UIScrollView
dan ituadjustedContentInset
, tetapi dari log saya dalamlayoutSubviews
metodenya, saya melihat perilaku berikut:UIScrollView
mencoba mengecilkan batasnya (karena tidak perlu area di bawah bilah alat).UIStackView
mengikuti.UIScrollView
tidak puas, dan memutuskan untuk mengembalikan ke batas yang lebih besar. Ini terasa sangat aneh bagi saya karena apa yang saya lihat dari log adalah ituUIScrollView.bounds.height == UIStackView.bounds.height
.UIStackView
mengikuti.Tampak bagi saya bahwa dua langkah akan memperbaiki masalah:
UIStackView.top
denganUIScrollView.topMargin
.contentInsetAdjustmentBehavior
ke.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.
sumber