Saya telah menghabiskan dua hari mencoba berbagai solusi untuk pendekatan Mixed and Pure Autolayout untuk mencapai apa yang merupakan pengaturan scrollview sepele sebelum autolayout, dan sekarang sudah resmi - saya pasti terlalu bodoh. Saya mengatur ini sebagian besar di Storyboard (well, begitulah adanya).
Jadi inilah permintaan saya untuk bantuan.
Viewtree:
UIView
-UIView
-UIView
..-UIScrollview
...-UIButton
...-UIButton
...-UIButton
Tombol-tombol tersebut seharusnya bergulir secara horizontal (kiri ke kanan dan sebaliknya). Dapatkah seseorang tolong beri tahu saya cara mengatur batasan untuk mencapai ini menggunakan Autolayout murni ???
-
Saya telah mencoba pendekatan campuran, seperti:
UIView
- UIView
- UIView
..-UIScrollview
...-UIView (contentview)
....-UIButton
....-UIButton
....-UIButton
... dan mengatur lebar tetap dan batasan tinggi untuk contentview
dan translatesAutoresizingMaskIntoConstraints
pengaturan sesuai TechNote Apple. Tombol dan scrollview diatur menggunakan batasan. Ini mendapat scrollview scrolling (yay) tapi sayangnya, itu scroll terlalu jauh! Sejauh yang saya tahu, lebar gulir entah bagaimana digandakan dari apa yang saya atur tampilan konten ??? !!! ???
Saya mencoba pendekatan autolayout murni juga, baik dengan contentview
dan tanpa. Semua tampilan translatesAutoresizingMaskIntoConstraints=NO
, kecuali untuk self.view
. Tombol-tombol memiliki batasan lebar / tinggi tetap, dan disematkan ke keempat tepi scrollview. Tidak ada yang bergulir.
Jadi saya benar-benar bingung mengapa saya tidak bisa membuatnya bekerja dengan benar. Bantuan apa pun sangat dihargai, dan jika Anda memerlukan info lain, silakan tanyakan!
Screenshot DIPERBARUI dengan solusi - kendala buttonZ:
EDIT @ Jamie Forrest Jadi solusinya ternyata menjadi trailing constraint yang salah pada tombol terakhir. Alih-alih 6441, nilai yang saya tetapkan adalah negatif, -6441. Yang sulit adalah, ketika mengatur nilai di storyboard, ada dua opsi di Pin toolbar:
Nilai Kanvas Saat Ini negatif (mengarah ke tidak ada gulir), dan opsi di bawah ini positif (mengaktifkan gulir). Ini berarti saya tidak bodoh tapi setidaknya setengah buta saya kira. Meskipun, untuk pertahanan saya, bukankah agak mengganggu bahwa XCode tidak menunjukkan kesalahan untuk pengaturan "salah"?
EDITED LAGI Sekarang ini lucu ... mengubah nilai trailing dari -6441 (tanpa scroll) menjadi 6441 scroll yang diaktifkan. Tetapi teman lama saya "terlalu banyak konten" kembali, mengarah ke ukuran konten dua kali lebih besar dari yang seharusnya! Solusi untuk mendapatkan gulir konten yang benar adalah dengan mengatur batasan trailing menjadi NOL! Ini tidak jelas ketika bekerja di Storyboard tetapi melihat kode @Infinity James, itu yang seharusnya.
sumber
contentSize
sebuahUIScrollView
tata letak auto hanya menggunakan. Dan itucontentSize
yang menentukan seberapa banyak Anda dapat menggulir. Jadi Anda harus mengatur ini secara manual di suatu tempat pada akhirnya. Untuk selebihnya, Anda dapat menggunakan batasan tata letak untuk mengatur bingkai tampilan relatif satu sama lain.Jawaban:
Sulit untuk melihat nilai yang tepat dan pengaturan kendala Anda karena Anda menempelkannya di sini, jadi saya tidak yakin dari melihat tangkapan layar Anda di mana Anda salah.
Sebagai pengganti penjelasan tentang apa yang salah dalam pengaturan Anda, saya telah membuat proyek sampel dasar dengan hierarki tampilan yang sangat mirip dan pengaturan kendala dengan yang Anda jelaskan. Pengguliran horizontal berfungsi seperti yang diharapkan dalam proyek sampel, yang menggunakan pendekatan "Pure AutoLayout" yang dijelaskan Apple dalam Catatan Teknis .
Saya juga memiliki banyak masalah pada awalnya membuat Tata Letak Otomatis berfungsi
UIScrollView
. Kunci untuk membuatnya berfungsi adalah memastikan bahwa semua item dalam tampilan gulir, diambil bersama, memiliki kendala yang akhirnya menautkan ke semua sisi tampilan gulir dan yang berkontribusi pada sistem AutoLayout untuk dapat menentukan contentSize untuk tampilan gulir yang akan lebih besar dari bingkai. Sepertinya Anda mencoba melakukan itu dalam kode Anda, tetapi mungkin Anda memiliki beberapa kendala berlebihan di sana yang membuat contentSize terlalu kecil.Juga perhatikan, seperti yang disebutkan lainnya, dengan AutoLayout dan UIScrollview, Anda tidak lagi mengatur contentSize secara eksplisit. Sistem AutoLayout menghitung contentSize berdasarkan kendala Anda.
Saya juga menemukan bab ebook ini sangat membantu dalam membuat saya mengerti bagaimana semua ini bekerja. Semoga semua ini bisa membantu.
sumber
LOL selamat datang di klub kebodohan. Saya salah satu pendiri. : D
Untuk pengguliran VERTIKAL : satu-satunya cara saya dapat membuatnya berfungsi (iOS 8, Xcode 6, dan autolayout murni) menambahkan batasan berikut untuk Tampilan Gulir saya (semua terkait dengan superview):
Struktur saya:
Ini adalah hasil akhir:
Ini pengaturannya:
Layar penuh
Semoga ini akan menyelamatkan seseorang dari AKAN TIDUR pukul 5 pagi. : D
sumber
Contoh Mandiri Sederhana
Menilai dengan banyaknya suara pada pertanyaan dan rendahnya suara pada jawaban, orang tidak menemukan solusi yang mudah dimengerti dan cepat di sini. Biarkan saya mencoba menambahkannya. Proyek ini adalah contoh mandiri yang dilakukan sepenuhnya di Interface Builder. Anda harus bisa menyelesaikannya dalam 10 menit atau kurang. Kemudian Anda dapat menerapkan konsep yang Anda pelajari ke proyek Anda sendiri.
Pertanyaan awal bertanya tentang tombol gulir. Di sini saya hanya menggunakan
UIView
s tetapi mereka dapat mewakili tampilan apa pun yang Anda suka. Saya juga memilih pengguliran horizontal karena tangkapan layar storyboard lebih ringkas untuk format ini. Prinsipnya sama untuk pengguliran vertikal.Konsep kunci
UIScrollView
seharusnya hanya menggunakan satu subview. Ini adalah 'UIView' yang berfungsi sebagai tampilan konten untuk menampung semua yang ingin Anda gulir.Mulai proyek baru
Ini bisa menjadi aplikasi tampilan tunggal.
Storyboard
Dalam contoh ini kita akan membuat tampilan gulir horizontal. Pilih View Controller dan kemudian pilih Freeform di Size Inspector. Buat lebar
1,000
dan tinggi300
. Ini hanya memberi kita ruang di storyboard untuk menambahkan konten yang akan bergulir.Tambahkan Tampilan Gulir
Tambahkan a
UIScrollView
dan sematkan keempat sisi ke tampilan akar pengontrol tampilan.Tambahkan Tampilan Konten
Tambahkan
UIView
sebagai subview ke tampilan gulir. Ini kuncinya. Jangan mencoba menambahkan banyak subview ke tampilan gulir. Cukup tambahkan satuUIView
. Ini akan menjadi tampilan konten Anda untuk tampilan lain yang ingin Anda gulir. Sematkan tampilan konten ke tampilan gulir di keempat sisi.Ketinggian yang sama
Sekarang di Outline Dokumen, Commandklik tampilan konten dan tampilan induk tampilan gulir untuk memilih keduanya. Kemudian atur ketinggian menjadi sama ( Controlseret dari Tampilan Konten ke Tampilan Gulir). Ini juga kuncinya. Karena kami menggulir secara horizontal, tampilan konten tampilan gulir tidak akan tahu seberapa tinggi seharusnya kecuali kami menyetelnya dengan cara ini.
catatan:
Tambah isi
Tambahkan tiga
UIView
s dan beri mereka semua batasan. Saya menggunakan margin 8 poin untuk semuanya.Kendala:
Mengatur batasan lebar juga merupakan kunci sehingga tampilan gulir tahu seberapa lebar tampilan kontennya.
Jadi
Itu saja. Anda dapat menjalankan proyek Anda sekarang. Itu harus berperilaku seperti gambar bergulir di bagian atas jawaban ini.
Untuk pengguliran vertikal, cukup tukar semua arah lebar dan tinggi dalam contoh ini (teruji dan berfungsi).
Pelajaran lanjutan
sumber
ContentSize secara implisit diatur dengan menerapkan batasan di dalam UIScrollView.
Sebagai contoh, apakah Anda memiliki UIScrollView di dalam UIView maka akan terlihat seperti ini (karena saya yakin Anda tahu):
Itu akan mengatur scrollView untuk mengisi ukuran containerView (jadi containerView harus berukuran tertentu).
Anda kemudian dapat menyesuaikan contentSize dari UIScrollView dengan secara implisit mengaturnya agar cukup besar untuk menahan tombol-tombol seperti ini:
sumber
Ada begitu banyak pertanyaan tentang penggunaan AutoLayout dengan UIScrollView, titik kunci yang kami abaikan adalah bahwa pandangan bagian dalam UIScrollView membuat kendala terhadap Tampilan Konten tetapi bukan UIScrollView itu sendiri. Lihat Catatan Teknis TN2154 , Anda dapat menemukan:
Gambar berikut akan menggambarkan bahwa:
Anda dapat menemukan ruang trailing adalah 500 poin, jika batasan dibuat untuk UIScrollView, tampilan akan dilewatkan dan harus memperbarui bingkainya. Namun, tidak ada peringatan dan tidak ada kesalahan. Karena semua kendala bertentangan dengan tampilan konten.
UIScrollView akan menghitung ukuran tampilan konten sesuai dengan batasan tampilan dalam. (Sebagai contoh, ukuran konten: lebar = 100 (ruang depan) + 200 (lebar tampilan) + 500 (ruang tambahan), tinggi = 131 (spasi atas) + 200 (tinggi) + 269 (spasi bawah)
Cara menambahkan batasan untuk tampilan di UIScrollView:
Dan semua itu dilakukan.
Cara mudah untuk menangani AutoLayout dengan scrollview adalah dengan menambahkan tampilan kontainer yang berisi semua subview dalam tampilan gulir.
Kesimpulan: titik kunci untuk memahami AutoLayout dengan UIScrollView adalah tampilan dalam membuat kendala terhadap tampilan konten tetapi bukan UIScrollView itu sendiri.
kode contoh terlampir
sumber
Solusi berikut ini berfungsi untuk saya untuk scrollView dengan autolayout dan tanpa contentSize :
Dan kamu sudah selesai. Sekarang, Anda dapat menambahkan sejumlah kontrol pada tampilan ini dan menerapkan batasan yang relevan satu sama lain (yang tampaknya tidak berfungsi tanpa tampilan ini). Jika Anda tidak ingin menggunakan tampilan ini maka Anda harus menerapkan batasan untuk setiap kontrol yang terkait dengan scrollView (tidak terkait satu sama lain).
Tip luar biasa ..............
Sangat penting . Katakanlah untuk kejelasan UIScrollView adalah 1000 lebar dan 100 tinggi. (Sebenarnya biasanya nilai-nilai ini akan dinamis, tentu saja, tergantung pada lebar perangkat dll. Tapi untuk sekarang katakan saja 1000 lebar dan 100 tinggi.) Katakanlah Anda sedang melakukan gulir horizontal. Jadi, letakkan UIView di dalam UIScrollView. (Itulah "tampilan konten".) Atur keempat batasan tampilan konten di bagian atas, bawah, depan, belakang, hingga tampilan gulir. Buat semuanya nol bahkan jika itu tampak salah. Atur tinggi konten UIView menjadi 100 dan lupakan itu. Sekarang: Anda ingin menggulir secara horizontal, jadi atur lebar tampilan konten menjadi misalkan 1225.
Perhatikan bahwa lebar tampilan konten sekarang 225 lebih besar dari lebar tampilan gulir induk. Tidak apa-apa: pada kenyataannya, Anda HARUS melakukan itu. Catat itu
... Anda TIDAK mengatur lebar jejak ke negatif 225 ...
Anda akan berpikir Anda harus "mencocokkan" lebarnya seperti biasanya . Tetapi jika Anda melakukan itu, itu tidak akan berhasil sama sekali.
Anda harus mengatur angka awal dan akhir menjadi NOL , tidak pernah negatif (meskipun lebarnya "lebih besar")
Menariknya, Anda benar-benar dapat mengatur angka awal / akhir pada nilai positif apa pun (coba katakan "50") dan itu memberi Anda semacam margin bouncing. (Sering terlihat hebat: coba saja.) Nilai negatif apa pun di kedua ujung akan "diam-diam pecah".
Perhatikan bahwa, seringkali Xcode (seperti 7.3.1),
akan 'membantu' mengatur nilai-nilai itu untuk Anda ke angka negatif!
karena mencoba untuk menghitungnya secara otomatis untuk Anda. Jika demikian itu akan diam-diam pecah. Atur keempat nilai menjadi nol pada instance pertama. Dan atur lebar tampilan konten jauh lebih luas daripada "1000" dalam contoh.
Diedit: Saya menggunakan UITableView alih-alih UIScrollView untuk sebagian besar kebutuhan saya. TableView menurut saya jauh lebih fleksibel dan dinamis.
sumber
Saya menganggap Anda mengalami masalah dengan
contentSize
. Lihat posting blog ini tentang cara menanganicontentSize
ketika menggunakan pendekatan AutoLayout "murni". Intinya adalah bahwa kendala Anda secara implisit menentukan ukuran konten. Anda TIDAK PERNAH mengaturnya secara eksplisit saat menggunakan AutoLayout. Saya telah melampirkan proyek contoh di akhir posting blog untuk menunjukkan cara kerjanyasumber
Ada bagian dalam catatan teknologi yang mungkin Anda lihat. Anda secara implisit dapat mengatur ukuran konten tampilan gulir menggunakan batasan yang ditetapkan pada tepi tampilan gulir.
Ini contoh sederhana. Buat storyboard dengan satu tampilan, yang memiliki satu tampilan gulir. Tetapkan batasan tampilan gulir agar sesuai dengan ukuran tampilan yang Anda gunakan.
Di dalam tampilan gulir itu tambahkan satu tampilan. Secara eksplisit mengatur ukuran tampilan yang menggunakan kendala (dan pastikan ukuran lebih besar dari tampilan gulir).
Sekarang tambahkan empat kendala lagi ke tampilan dalam yang mengunci empat tepi tampilan dalam ke tampilan gulir induknya. Keempat kendala tersebut akan menyebabkan ukuran konten meluas untuk mengakomodasi tampilan dalam.
Jika Anda memiliki beberapa tampilan yang ingin Anda tambahkan ke tampilan gulir, misalnya diletakkan secara horizontal, Anda akan mengunci sisi kiri subview pertama ke kiri tampilan gulir, mengunci subview satu sama lain secara horizontal, dan kanan sisi sub tampilan terakhir ke sisi kanan tampilan gulir. Kendala-kendala itu akan memaksa ukuran konten tampilan gulir untuk diperluas untuk mengakomodasi semua subview dan kendala mereka.
sumber
Jika pertanyaan Anda adalah "Bagaimana cara saya menempatkan sekelompok UITextFields dalam UIScrollView yang bergulir secara vertikal sehingga mereka keluar dari keyboard ketika mereka memiliki fokus", jawaban terbaik adalah:
Jangan.
Gunakan UITableViewController dengan sel statis sebagai gantinya.
Anda mendapatkan perilaku scroll-out-of-the-way ini secara gratis, DAN semua inset konten Hanya Bekerja jika pengontrol tampilan Anda ditampilkan di dalam UINavigationController.
sumber
Anda harus mengatur tata letak Anda seperti ini
ViewControllerView
berisiScrollView
,ScrollView
mengandungContainerView
,ContainerView
mengandung 2Labels
Kemudian ikuti 3 langkah untuk membuat
ScrollView
gulir kaleng AndaScrollView
pin (atas / kanan / bawah / kiri) keViewControllerView
ContainerView
pin (atas / kanan / bawah / kiri) keScrollView
Horizontally in Container
( jangan disetelVertically in Container
)Label1
pin ( atas / kanan / kiri) keContainerView
Label1
pin (kanan / kiri / bawah ) keContainerView
dan atas keLabel1
Semoga bantuan ini
sumber
Pendekatan autolayout murni berfungsi dengan baik tetapi sulit untuk diatur jika Anda bermigrasi dari non-autolayout. Saya sudah melakukannya beberapa kali sekarang dan saya punya beberapa tips umum:
sumber
Setelah beberapa waktu menangani masalah ini, saya akhirnya menemukan solusi. Saya bekerja dengan storyboard ukuran kelas universal (600x600). Saya membuat UIView (contentView) ukuran scrollView dan membuat batasan untuk Top, Bottom, Leading dan Trailing ke scrollView. Lalu saya memotong ukuran secara manual dari contentView ke 600x600. Storyboard berhenti berusaha mengubah ukuran segalanya dan saya bisa bekerja tetapi tampilan tampak mengerikan pada perangkat nyata atau simulator. Saya membuat 2 outlet kendala ukuran terpotong ini.
Kemudian di viewDidLoad
Bagus sekali.
sumber
Saya menghabiskan waktu berhari-hari untuk mencari solusi tentang cara menggunakan AutoLayout melihat Scrollview tertanam, untuk memusatkan scrollview di layar yang terlihat, yang bekerja di semua dimensi perangkat / layar serta dengan rotasi layar.
Saya menghabiskan waktu berhari-hari mencoba melakukannya dengan Autolayout saja, dan menjadi dekat tetapi tidak pernah cukup dekat. Jadi pada akhirnya saya harus menambahkan 3 baris kode per layar juga, di viewDidLoad.
Lihat solusi di bawah ini:
Sekarang pergi ke file .m dan tambahkan baris kode ini ke viewDidLoad (bermain dengan jumlah padding untuk mendapatkan vert centering yang benar)
{self.constraintVertVtoSV.constant = 150.0; }
ini sekarang harus berjalan di semua perangkat dan dipusatkan dengan benar dan masih gulir dengan benar.
sumber
Jika seperti saya, Anda hanya menggunakan konten statis tanpa kendala di dalam subview, seperti yang dapat Anda lakukan seperti ini:
sumber
Masalah serupa yang saya alami hari ini dengan iOS 8.4, Xcode 6.4
Ada tampilan yang berisi tampilan gulir, yang berisi contentView (UIView) yang berisi subview.
Semuanya tata letak otomatis di mana-mana. Tepi scrollview disematkan ke tepi tampilan induk dengan kendala. Tepi tampilan konten disematkan ke tepi tampilan gulir dengan kendala.
Awalnya tampilan konten akan menolak ukuran karena lebar penuh dari tampilan gulir. Saya harus menambahkan batasan tambahan pada tampilan konten agar lebarnya sesuai dengan tampilan gulir induk. Atau saya bisa mengatur batasan contentView.centerX == scrollView.centerX. Salah satu dari mereka selain menyematkan tepi tiba-tiba membuat ukuran konten terlihat dengan benar.
Menyematkan tepi tampilan konten ke tampilan gulir menggunakan batasan visual dari formulir,
Saya menggunakan rutin untuk beralih melalui array dan menambahkannya ke scrollView.
sumber
Saya menghadapi masalah yang sama. Saya menetapkan setiap kendala dan selalu bertanya-tanya mengapa masih mengubah ukuran beberapa subview. Solusi saya adalah mengatur clipsToBounds ke YES.
sumber
Dengan cepat Anda dapat menggunakan solusi kerja ini.
Pengaduan
ScrollView
: Leading, Trailing, Top, Bottom = SuperviewContentView
: Memimpin, Mengikuti, Atas, Bawah = ScrollView. Tinggi tetap / relatif terhadap konten.Anda dapat mengatur batasan lebar (contentView) untuk sama dengan tampilan tampilan gulir, tetapi pilih hapus hapus saat membangun karena Anda akan menambahkan kendala itu secara terprogram. Ini hanya agar IB tidak mengeluh dengan peringatan.
Dan di View Controller
viewDidLayoutSubviews
saya sebut saja metode ini:sumber
Saya tahu ini adalah solusi awam dan bukan apa yang disarankan Apple dalam dokumen, tetapi ini berfungsi dua kali bagi saya, dengan konten yang berbeda dan dapat diatur dengan sangat cepat: Di controller tampilan storyboard masukkan UIView. Dalam UIView masukkan Table View, Dynamic, 0 sel prototipe, Style Plain atau Dikelompokkan. Dalam Tampilan Tabel, masukkan Tampilan Gulir, dalam konten tampilan Lihat Gulir. Itu, tidak ada pengaturan di controller tampilan kustom.
sumber