Cara menggunakan UIScrollView di Storyboard

Saya memiliki tampilan gulir dengan konten yang tingginya 1000px dan ingin dapat meletakkannya untuk desain yang mudah di storyboard.
Saya tahu ini bisa dilakukan secara terprogram tetapi saya benar-benar ingin dapat melihatnya secara visual. Setiap kali saya meletakkan tampilan gulir pada pengontrol tampilan, itu tidak akan gulir. Apakah mungkin untuk membuatnya berfungsi seperti yang saya inginkan atau saya harus melakukannya dalam kode?

Saya menjawab pertanyaan saya sendiri karena saya hanya menghabiskan 2 jam untuk menemukan solusinya dan StackOverflow memungkinkan gaya QA ini.

Mulai sampai selesai di sini adalah bagaimana membuatnya bekerja di storyboard.

1: pergi ke Anda melihat controller dan klik Attribute Inspector.

2: ubah Ukuran menjadi Freeformalih-alih Tersirat.

3: Pergi ke tampilan utama di storyboard itu, bukan tampilan scroll Anda tetapi tampilan tingkat atas.

4: Klik Size Inspectordan atur tampilan ini ke ukuran yang Anda inginkan. Saya mengubah tinggi badan saya menjadi 1000.

Sekarang Anda akan melihat bahwa storyboard Anda memiliki pengaturan tampilan sehingga Anda dapat melihat seluruh ketinggian gulir Anda untuk desain yang mudah.

5: Jatuhkan pada scrollview dan rentangkan sehingga dibutuhkan seluruh tampilan. Anda sekarang harus memiliki scrollview dengan ukuran 320.1000 duduk pada tampilan di pengontrol tampilan Anda.

Sekarang kita perlu membuatnya gulir dan harus membuatnya menampilkan konten dengan benar.

6: Klik pada scrollview Anda dan klik pada Identity Inspector.

7: Tambahkan User Defined runtime attributedengan KeyPath contentSizelalu ketik SIZE dan masukkan ukuran konten Anda. Bagi saya itu (320, 1000).

Karena kami ingin melihat seluruh tampilan gulir kami di storyboard, kami merentangkannya dan memiliki bingkai 320.1000 tetapi agar ini berfungsi di aplikasi kami, kami perlu mengubah bingkai ke bawah seperti apa tampilan scroll yang akan terlihat.

8: Tambahkan a runtime attributedengan KeyPath framedengan Tipe RECT dan 0,0,320,416.

Sekarang ketika kita menjalankan aplikasi kita, kita akan memiliki scrollview yang terlihat memiliki bingkai 0,0320, 416 dan dapat menggulir ke bawah hingga 1000. Kita dapat mengatur tampilan subview dan gambar kita dan yang lainnya di Storyboard seperti yang kita inginkan. Kemudian atribut runtime kami pastikan untuk menampilkannya dengan benar. Semua ini tanpa 1 baris kode.

Inilah langkah-langkah Auto Layoutyang berhasil bagi saya di XCode 8.2.1.

1. Pilih Size Inspectordari View Controller, dan ganti Simulated Sizedengan Freeformdengan ketinggian 1000 bukan Fixed.
2. Ubah nama tampilan View Controllersebagai RootView .
3. Seret Scroll Viewsebagai subview dari RootView dan ganti namanya menjadi ScrollView .
4. Tambahkan batasan untuk ScrollView :
   • ScrollView [Top, Bottom, Leading, Trailing] = RootView [Top, Bottom, Leading, Trailing]
5. Seret Vertical Stack Viewsebagai subview dari ScrollView dan ganti namanya menjadi ContentView .
6. Tambahkan batasan untuk ContentView :
   • ContentView .tinggi = 1000
   • ContentView [Top, Bottom, Leading, Trailing, Width] = ScrollView [Top, Bottom, Leading, Trailing, Width]
7. Pilih Attributes Inspectordari ContentView , dan ubah Distributionke Fill Equallysebagai ganti Fill.
8. Seret Viewsebagai subview dari ContentView dan beri nama RedView .
9. Tetapkan Redsebagai latar belakang RedView .
10. Tarik Viewsebagai subview dari contentView dan mengubah nama sebagai BlueView .
11. Tetapkan Bluesebagai latar belakang BlueView .
12. Pilih RootView , dan klik Update Framestombol.
    • Update Framesadalah tombol baru di Xcode8, bukan Resolve Auto Layout Issuestombol. Itu terlihat seperti tombol segarkan, terletak di panel kontrol di bawah Storyboard:

Lihat hierarki:

• RootView
  • ScrollView
    • ContentView
      • RedView
      • BlueView

Lihat Layar Pengontrol (Tinggi: 1000):

Jalankan di iPhone7 (Tinggi: 1334/2):

Inilah langkah-langkah yang berhasil bagi saya di iOS 7 dan XCode 5.

1. Seret ViewController (dilengkapi dengan "Tampilan" UIView).

   1.1 Pilih "View Controller" dan pilih "File Inspector" dan hapus centang "Auto layout".

2. Seret ScrollView (sebagai anak dari "View" UIView ViewController)
3. Pilih ScrollView dan buka "Identity Inspector".

4. Masukkan "contentSize" untuk keyPath. Pilih "Ukuran" untuk Jenis. Dan Masukkan {320, 1000} untuk nilai.

   Catatan: Langkah 4 hanya mengatakan bahwa scroller berisi beberapa konten yang ukurannya 320x1000 unit. Jadi pengaturan contentSize akan membuat scroller berfungsi.

5. Pilih View Controller, Pilih "Attributes Inspector" lalu pilih Freeform from Size.

   Catatan: langkah 5 akan memungkinkan kita untuk mengubah ukuran "Tampilan" yang disertakan dengan pengontrol tampilan.

6. Pilih "Lihat" dan kemudian pilih "Ukuran Inspektur".

7. Atur Lebar ke 320 dan tinggi ke 1000.

Catatan: 5, 6 & 7 murni bagi kita untuk melihat seluruh tampilan membentang di dalam StoryBoard. Catatan: Pastikan untuk tidak memilih "Tata Letak Otomatis" pada View Controller.

Hirarki tampilan Anda akan terlihat seperti:

Setelah berjam-jam mencoba-coba, saya telah menemukan cara yang sangat mudah untuk memasukkan konten ke dalam tampilan-scroll yang 'offscreen' Diuji dengan XCode 5 & iOS 7. Anda dapat melakukan ini hampir seluruhnya di Storyboard, menggunakan 2 trik / solusi kecil:

1. Seret viewcontroller ke storyboard Anda.
2. Seret scrollView pada viewController ini, untuk demo Anda dapat membiarkan ukurannya default, menutupi seluruh layar.
3. Sekarang tiba trik 1 : sebelum menambahkan elemen apa saja ke scrollView, seret 'tampilan' biasa (Tampilan ini akan dibuat lebih besar dari layar, dan akan berisi semua sub elemen seperti tombol, label, ... mari kita sebut itu sebagai ' melampirkan tampilan ').
4. Biarkan ini menyertakan ukuran Y tampilan di inspektur ukuran untuk misalnya 800.
5. Masukkan label ke tampilan terlampir, di suatu tempat di posisi Y 200, beri nama 'label 1'.
6. Trik 2 : pastikan tampilan penutup dipilih ( bukan scrollView! ), Dan atur posisi Y-nya misalnya -250, sehingga Anda dapat menambahkan item yang 'di luar' layar
7. Masukkan label, di suatu tempat di bagian bawah layar, beri nama 'label 2'. Label ini sebenarnya 'off screen'.
8. Atur ulang posisi Y tampilan terlampir menjadi 0, Anda tidak akan lagi melihat label 2, karena diposisikan di luar layar.

Sejauh ini untuk pekerjaan storyboard, sekarang Anda perlu menambahkan satu baris kode ke metode 'viewDidLoad' viewController untuk mengatur konten scrollViews sehingga berisi seluruh 'tampilan tertutup'. Saya tidak menemukan cara untuk melakukan ini di Storyboard:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

Anda dapat mencoba melakukan ini dengan menambahkan contentSizekeyPath sebagai sizeke scrollView di Identity Inspector dan mengaturnya ke (320, 1000).

Saya pikir Apple harus membuat ini lebih mudah di storyboard, dalam TableViewController Anda hanya dapat menggulir layar di Storyboard (cukup tambahkan 20 sel, dan Anda akan melihat Anda cukup menggulir), ini juga harus dimungkinkan dengan ScrollViewController.

Memulai Scrolling untuk bekerja di iOS7 dan Auto-layout di iOS 7 dan XCode 5.

Selain itu: https://stackoverflow.com/a/22489795/1553014

Tampaknya, yang perlu kita lakukan adalah:

1. Setel semua kendala ke Tampilan Gulir (yaitu perbaiki tampilan gulir terlebih dahulu)

2. Kemudian atur batasan distance-from-scrollView ke item terbawah untuk menggulir tampilan (yang merupakan tampilan super).

Catatan: Langkah 2 akan memberi tahu storyboard tempat konten terakhir berada dalam tampilan Gulir.

Untuk contoh ini, saya telah menghapus centang pada fitur Autolayout dari pembangun Antarmuka. Dan, saya masih menggunakan (tanpa alasan sama sekali) versi Xcode 4.6.1 yang relatif lama.

Mulai dengan pengontrol tampilan yang memiliki tampilan gulir di atasnya (tampilan utama).

1: Tambahkan Tampilan Wadah, dari Perpustakaan Objek, ke tampilan gulir. Perhatikan bahwa pengontrol tampilan baru ditambahkan ke storyboard dan terhubung ke pengontrol tampilan dengan tampilan gulir.

2: Pilih tampilan wadah dan, pada Pemeriksa Ukuran, buatlah jangkar ke atas dan ke kiri tanpa mengubah ukuran otomatis.

3: Ubah ketinggiannya menjadi 1000. (1000 digunakan untuk contoh ini. Anda harus menerapkan nilai yang Anda butuhkan.)

4: Pilih pengontrol tampilan baru dan, dari Inspektur Atribut, ubah Ukuran menjadi Bentuk Bebas.

5: Pilih tampilan pengontrol tampilan baru dan, pada Inspektur ukuran, ubah ketinggian menjadi 1000 (yang sama dengan tinggi tampilan wadah).

6: Untuk pengujian Anda nanti, saat masih di tampilan controller tampilan baru, tambahkan label di bagian atas dan di bagian bawah tampilan.

7: Pilih tampilan gulir dari pengontrol tampilan asli. Pada inspektur Identity, tambahkan atribut dengan keyPath yang disetel ke contentSize, ketik setel ke Ukuran, dan nilai setel ke {320, 1000} (atau ukuran tampilan wadah Anda).

8: Jalankan pada Simulator iPhone 4 inci. Anda harus dapat menggulir dari label atas ke label bawah.

9: Jalankan pada Simulator iPhone 3,5 inci. Anda harus dapat menggulir dari label atas ke label bawah.

Ingatlah bahwa Xcode 4.6.1 hanya dapat dibuat untuk iOS6 dan di bawah ini. Dengan menggunakan pendekatan dan pembangunan ini untuk iOS6, saya masih dapat mencapai hasil yang sama ketika aplikasi dijalankan di iOS7.

Perhatikan bahwa dalam a UITableView, Anda sebenarnya dapat menggulir tampilan tabel dengan memilih sel atau elemen di dalamnya dan menggulir ke atas atau ke bawah dengan trackpad Anda.

Untuk a UIScrollView, saya menyukai saran Alex, tetapi saya akan merekomendasikan untuk sementara waktu mengubah pengontrol tampilan menjadi bentuk bebas, meningkatkan ketinggian tampilan root, membangun UI Anda (langkah 1-5), dan kemudian mengubahnya kembali ke ukuran standar yang disimpulkan ketika Anda selesai sehingga Anda tidak perlu menyulitkan ukuran konten sebagai atribut runtime. Jika Anda melakukannya, Anda membuka diri terhadap banyak masalah pemeliharaan yang mencoba mendukung perangkat 3,5 "dan 4", serta kemungkinan peningkatan resolusi layar di masa mendatang.

Anda hanya harus mengatur properti contentSize pada viewDidAppear, seperti contoh ini:

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

Ini memecahkan masalah autolayout, dan berfungsi dengan baik di iOS7.

Penafian: - Hanya untuk ios 9 ke atas (Stack View).

Jika Anda menggunakan aplikasi pada perangkat ios 9, gunakan tampilan tumpukan . Berikut langkah-langkahnya: -

1. Tambahkan tampilan gulir dengan batasan - sematkan ke kiri, kanan, bawah, atas (tanpa batas) ke superview (tampilan)
2. Tambahkan tampilan tumpukan dengan kendala yang sama untuk menggulir tampilan.
3. Stack View Kendala Lain: - stackView.bottom = view.bottom dan stackView.width = scrollView.width
4. Mulai tambahkan tampilan Anda. Tampilan gulir akan memutuskan untuk menggulir berdasarkan ukuran tampilan tumpukan (yang pada dasarnya adalah tampilan konten Anda)

Di iOS7 saya menemukan bahwa jika saya memiliki Tampilan di dalam UIScrollView pada ViewController berukuran FreeForm, ia tidak akan bergulir di app, tidak peduli apa yang saya lakukan. Saya bermain-main dan menemukan yang berikut ini sepertinya berfungsi, yang tidak menggunakan FreeForms:

1. Masukkan UIScrollView di dalam tampilan utama ViewController

2. Setel batasan Autolayout pada ScrollView sebagaimana mestinya. Bagi saya, saya menggunakan 0 to Top Layout guide dan 0 to Bottom layout Guide

3. Di dalam ScrollView, tempatkan Tampilan Kontainer. Tetapkan ketinggiannya ke apa pun yang Anda inginkan (mis. 1000)

4. Tambahkan batasan Tinggi (1000) ke Kontainer sehingga tidak mengubah ukuran. Bagian bawah akan melewati ujung formulir.

5. Tambahkan baris [self.scrollView setContentSize: CGSizeMake (320, 1000)]; ke ViewController yang berisi scrollView (yang telah Anda kaitkan sebagai IBOutlet)

ViewController (ditambahkan secara otomatis) yang dikaitkan dengan Container akan memiliki ketinggian yang diinginkan (1000) di Interface Builder dan juga akan menggulir dengan benar di pengontrol tampilan asli. Anda sekarang dapat menggunakan ViewController wadah untuk menata kontrol Anda.

saya ingin menempatkan 5 sen saya untuk jawaban yang diterima: saya sudah meneliti topik selama 2 hari dan akhirnya menemukan solusi yang akan saya gunakan selalu mulai sekarang

lanjutkan ke item 4 dalam jawaban yang diterima dan lupakan tentang menambahkan atribut bingkai dan ukuran konten dan sebagainya

untuk membuat semuanya otomatis gunakan saja solusi dari tautan ini

semuanya jelas, mudah, elegan dan berfungsi seperti pesona pada ios 7. Saya cukup senang dengan semua lol itu

Ini solusi sederhana.

1. Setel atribut ukuran pengontrol tampilan Anda di storyboard ke "Bentuk Bebas" dan atur ukuran yang Anda inginkan. Pastikan itu cukup besar agar sesuai dengan konten penuh tampilan gulir Anda.

2. Tambahkan tampilan gulir Anda dan atur batasan seperti biasa. yaitu jika Anda ingin tampilan gulir menjadi ukuran tampilan Anda, maka pasang margin atas, bawah, depan, dan belakang Anda ke superview seperti biasanya.

3. Sekarang pastikan ada kendala dalam subview dari scrollview yang menghubungkan bagian atas dan bawah dari scroll view. Sama untuk kiri dan kanan jika Anda memiliki pengguliran horizontal.

Berikut adalah sedikit jawaban kotor yang mendapatkan solusi yang sama untuk tampilan gulir vertikal, tetapi (berlawanan dengan etos stackoverflow) tidak menjawab pertanyaan. Alih-alih menggunakan scrollView, cukup gunakan UITableView, seret UIView normal ke header, dan buat sebesar yang Anda inginkan, sekarang Anda dapat menggulir konten di storyboard.

Tampaknya Anda tidak perlu menentukan ketinggian sama sekali! Yang hebat jika itu berubah karena alasan tertentu (Anda mengubah ukuran komponen atau mengubah ukuran font).

Saya baru saja mengikuti tutorial ini dan semuanya berhasil: http://natashatherobot.com/ios-autolayout-scrollview/

(Catatan samping: Tidak perlu menerapkan viewDidLayoutSubviews kecuali jika Anda ingin memusatkan tampilan, sehingga daftar langkah lebih pendek).

Semoga itu bisa membantu!

Kuncinya adalah contentSize.

Ini sering hilang dan tidak diindikasikan saat menambahkan UIScrollView.

Pilih UIScrollView dan pilih Inspektur Identitas.

Tambahkan contentSizekeyPath sebagai sizeke scrollView di Identity Inspector dan atur ke (320, 1000).

Gulir pergi.

Jika Anda menggunakan tata letak otomatis daripada pendekatan terbaik adalah dengan menggunakan UITableViewController dengan sel statis di storyboard.

Saya juga pernah menghadapi masalah dengan tampilan yang memerlukan lebih banyak pengguliran sehingga mengubah UIScrollView dengan teknik yang disebutkan di atas.

Berikut ini cara mengatur scrollview menggunakan Xcode 11

1 - Tambahkan scrollview dan atur batasan atas, bawah, depan dan belakang

2 - Tambahkan Tampilan Konten ke tampilan scroll, seret koneksi ke Panduan Tata Letak Konten dan pilih Leading, Top, Bottom dan Trailing. Pastikan untuk menetapkan nilainya ke 0 atau konstanta yang Anda inginkan.

3 - Seret dari Tampilan Konten ke Panduan Tata Letak Bingkai dan pilih Equal Widths

4 - Tetapkan batas ketinggian konstan ke Tampilan Konten