Storyboard'da UIScrollView nasıl kullanılır?

1000 piksel uzunluğunda içeriğe sahip bir kaydırma görünümüne sahibim ve film şeridinde kolay tasarım için onu yerleştirmek istiyorum.
Programlı olarak yapılabileceğini biliyorum ama gerçekten görsel olarak görebilmek istiyorum. Bir görünüm denetleyicisine her kaydırma görünümü koyduğumda kaymıyor. İstediğim gibi çalışmasını sağlamak mümkün mü yoksa kodda yapmak zorunda mıyım?

Kendi sorumu yanıtlıyorum çünkü çözümü bulmak için 2 saatimi harcadım ve StackOverflow bu QA stiline izin veriyor.

Burada bitirmeye başlayın, film şeridinde nasıl çalıştırılacağıdır.

1: kontrolör görünümüne gidin ve üzerine tıklayın Attribute Inspector.

2: Boyut'u FreeformÇıkarsanan yerine olarak değiştirin .

3: Film şeridindeki ana görünüme gidin, kaydırma görünümünüze değil, üst düzey görünüme gidin.

4: Tıklayın Size Inspectorve bu görünümü istediğiniz boyuta ayarlayın. Boyumu 1000 olarak değiştirdim.

Artık, görsel senaryo taslağınızın görünüm kurulumunuza sahip olduğunu göreceksiniz, böylece kolay tasarım için kaydırmanızın tüm yüksekliğini görebilirsiniz.

5: Bir kaydırma görünümüne bırakın ve tüm görünümü kaplayacak şekilde uzatın. Şimdi, görünüm denetleyicinizdeki bir görünümde oturan 320.1000 boyutunda bir kaydırma görünümünüz olmalıdır.

Şimdi onu kaydırmalıyız ve içeriği doğru şekilde göstermesini sağlamalıyız.

6: Kaydırma görünümünüze tıklayın ve tıklayın Identity Inspector.

7: Daha sonra SIZE türünden User Defined runtime attributeKeyPath ile bir ekleyin contentSizeve içerik boyutunuzu girin. Benim için bu (320, 1000).

Film şeridindeki tüm kaydırma görünümümüzü görmek istediğimizden, onu genişlettik ve 320,1000'lik bir çerçeveye sahip, ancak bunun uygulamamızda çalışması için çerçeveyi görünür kaydırma görünümünün ne olacağına indirmemiz gerekiyor.

8: Bir ekleme runtime attributeAna yol ile frameTip RECT ve 0,0,320,416 ile.

Şimdi uygulamamızı çalıştırdığımızda, görünür bir kaydırma görünümüne sahip olacağız ve 1000'e kadar aşağı kaydırabiliriz. Alt görünümlerimizi ve resimlerimizi ve Storyboard'da olmayanları tam da görünmelerini istediğimiz şekilde düzenleyebiliyoruz. Daha sonra çalışma zamanı özniteliklerimiz onu doğru şekilde görüntülediğinizden emin olur. Bunların hepsi 1 satır kod olmadan.

İşte Auto Layoutbenim için XCode 8.2.1'de işe yarayan adımlar .

1. Seç Size Inspectorarasında View Controllerve değiştirmek Simulated Sizeiçin Freeformyüksekliği 1000 yerine Fixed.
2. Görünümünü RootViewView Controller olarak yeniden adlandırın .
3. Bir Scroll ViewRootView alt görünümü olarak sürükleyin ve ScrollView olarak yeniden adlandırın .
4. ScrollView için kısıtlamalar ekleyin :
   • ScrollView [Top, Bottom, Leading, Trailing] = RootView [Top, Bottom, Leading, Trailing]
5. Bir ScrollView altVertical Stack View görünümü olarak sürükleyin ve ContentView olarak yeniden adlandırın .
6. ContentView için kısıtlamalar ekleyin :
   • ContentView .height = 1000
   • ContentView [Top, Bottom, Leading, Trailing, Width] = ScrollView [Top, Bottom, Leading, Trailing, Width]
7. Seç Attributes Inspectorarasında contentView ve değiştirmek Distributioniçin Fill Equallyyerine Fill.
8. Bir sürükleyin Viewait subview contentView ve olarak yeniden adlandırın RedView .
9. Set Redarka planı olarak RedView .
10. Bir sürükleyin Viewait subview contentView ve olarak yeniden adlandırın BlueView .
11. Set Bluearka planı olarak BlueView .
12. RootView öğesini seçin ve düğmesine Update Framestıklayın.
    • Update Framesdüğme yerine Xcode8'de yeni bir Resolve Auto Layout Issuesdüğmedir. Film Şeridi'nin altındaki kontrol çubuğunda bulunan bir yenile düğmesine benziyor:

Hiyerarşiyi görüntüleyin:

• RootView
  • scrollview
    • contentView
      • RedView
      • BlueView

Denetleyici Sahnesini Görüntüle (Yükseklik: 1000):

İPhone7'de çalıştırın (Yükseklik: 1334/2):

İşte benim için iOS 7 ve XCode 5'te çalışan adımlar.

1. Bir ViewController'ı sürükleyin (UIView "View" ile birlikte gelir).

   1.1 "Denetleyiciyi Görüntüle" yi seçin ve "Dosya Denetçisi" ni seçin ve "Otomatik düzen" in işaretini kaldırın.

2. Bir ScrollView sürükleyin (ViewController'ın UIVView "Görünüm" ün alt öğesi olarak)
3. ScrollView öğesini seçin ve "Identity Inspector" ı açın.

4. KeyPath için "contentSize" girin. Tür için "Boyut" u seçin. Ve {320, 1000} girin değer için .

   Not: 4. Adım, kaydırıcının boyutu 320x1000 birim olan bazı içerikler içerdiğini söylemektir. Bu nedenle contentSize ayarının yapılması kaydırma çubuğunun çalışmasını sağlar.

5. Denetleyiciyi Görüntüle'yi seçin, "Nitelik Denetçisi" ni seçin ve ardından Boyuttan Serbest Biçimi seçin .

   Not: 5. adım, görünüm denetleyicisinin birlikte geldiği "Görünüm" boyutunu değiştirmemize izin verecektir.

6. "Görünüm" ü ve ardından "Boyut Denetçisi" ni seçin.

7. Genişliği 320 ve yüksekliği 1000 olarak ayarlayın.

Not: 5, 6 ve 7, tamamen StoryBoard'da uzatılmış veya genişletilmiş görünümü görmemiz içindir . Not: Görünüm Denetleyicisinde "Otomatik Düzen" seçimini kaldırdığınızdan emin olun.

Görünüm hiyerarşiniz şöyle görünmelidir:

Saatler süren deneme yanılma sürecinden sonra, içeriği 'ekran dışı' kaydırma görünümlerine yerleştirmenin çok kolay bir yolunu buldum. XCode 5 ve iOS 7 ile test edilmiştir. Bunu neredeyse tamamen Storyboard'da 2 küçük numara / geçici çözüm kullanarak yapabilirsiniz:

1. Bir görüntü denetleyicisini film şeridinize sürükleyin.
2. Bu viewController üzerinde bir scrollView sürükleyin, demo için tüm ekranı kaplayacak şekilde boyutunu varsayılan olarak bırakabilirsiniz.
3. Şimdi 1. numara geliyor : scrollView'a herhangi bir öğe eklemeden önce, normal bir 'görünüm'e sürükleyin (Bu görünüm ekrandan daha büyük olacak ve düğmeler, etiketler, ... gibi tüm alt öğeleri içerecektir ... ' çevreleyen görünüm ').
4. Bu çevreleyen görünümün boyut denetçisindeki Y boyutunu , örneğin 800 olsun.
5. Çevreleyen görünüme, Y konumu 200'de bir yere bir etiket bırakın, "etiket 1" olarak adlandırın.
6. İpucu 2 : Çevreleyen görünümün seçili olduğundan emin olun ( scrollView değil! ) Ve Y konumunu örneğin -250 olarak ayarlayın, böylece ekranın 'dışında' bir öğe ekleyebilirsiniz
7. Ekranın alt kısmında bir yere bir etiket koyun ve 'etiket 2' olarak adlandırın. Bu etiket aslında "ekran dışı" dır.
8. Çevreleyen görünümün Y konumunu 0'a sıfırlayın, artık ekranın dışına yerleştirildiği için etiket 2'yi görmeyeceksiniz.

Şimdiye kadar film şeridi çalışması için, şimdi scrollViews içeriğini tüm 'çevreleyen görünümü' içerecek şekilde ayarlamak için viewController'ın 'viewDidLoad' yöntemine tek bir kod satırı eklemeniz gerekiyor. Storyboard'da bunu yapmanın bir yolunu bulamadım:

- (void)viewDidLoad
{
    [super viewDidLoad];

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

Bunu , Identity Inspector'da scrollView'a bir contentSizekeyPath ekleyip size(320, 1000) olarak ayarlayarak deneyebilirsiniz .

Apple'ın bunu storyboard'da daha kolay hale getirmesi gerektiğini düşünüyorum, bir TableViewController'da sadece Storyboard'da ekran dışına kaydırabilirsiniz (sadece 20 hücre ekleyin ve kolayca kaydırabileceğinizi göreceksiniz), bu bir ScrollViewController ile de mümkün olmalıdır.

İOS7'de çalışmak için Kaydırma ve iOS 7 ve XCode 5'te Otomatik Düzen.

Buna ek olarak: https://stackoverflow.com/a/22489795/1553014

Görünüşe göre tek yapmamız gereken:

1. Tüm kısıtlamaları Kaydırma Görünümü olarak ayarlayın (yani önce kaydırma görünümünü düzeltin)

2. Ardından, kaydırma görünümü sınırlamasını, görünümü kaydırmak için en alttaki öğeye ayarlayın (bu, süper görünümdür).

Not: Adım 2, film şeridine son içerik parçasının Kaydırma görünümünde nerede olduğunu söyleyecektir.

Bu örnek için, Arayüz oluşturucunun Otomatik Düzen özelliğinin işaretini kaldırdım. Ve hala Xcode'un nispeten eski 4.6.1 sürümünü kullanıyorum (hiçbir sebep yokken).

Üzerinde kaydırma görünümü olan bir görünüm denetleyicisiyle başlayın (ana görünüm).

1: Nesne Kitaplığından kaydırma görünümüne bir Kap Görünümü ekleyin. Film şeridine yeni bir görünüm denetleyicisinin eklendiğine ve kaydırma görünümüyle görünüm denetleyicisine bağlandığına dikkat edin.

2: Kap görünümünü seçin ve Boyut Denetçisi'nde, otomatik olarak yeniden boyutlandırmadan yukarı ve sola sabitleyin.

3: Yüksekliğini 1000 olarak değiştirin. (Bu örnek için 1000 kullanılmıştır. İstediğiniz değeri uygulamalısınız.)

4: Yeni görünüm denetleyicisini seçin ve Nitelik Denetçisi'nden Boyut'u Serbest Biçime değiştirin.

5: Yeni görünüm denetleyicisinin görünümünü seçin ve Inspector boyutunda yüksekliği 1000 olarak değiştirin (bu, konteyner görünümünün yüksekliğine eşittir).

6: Daha sonra testiniz için, yeni görünüm denetleyicisinin görünümündeyken, görünümün üstüne ve altına bir etiket ekleyin.

7: Orijinal görünüm denetleyicisinden kaydırma görünümünü seçin. Kimlik denetçisinde, keyPath contentSize olarak ayarlanmış, Boyut olarak ayarlanmış ve değeri {320, 1000} (veya kapsayıcı görünümünüzün boyutu) olarak ayarlanmış bir özellik ekleyin.

8: 4 inçlik iPhone Simulator'da çalıştırın. Üstteki etiketten en alttaki etikete kaydırabilmeniz gerekir.

9: 3,5 inç iPhone Simülatöründe çalıştırın. Üstteki etiketten en alttaki etikete kaydırabilmeniz gerekir.

Xcode 4.6.1'in yalnızca iOS6 ve altı için oluşturulabileceğini unutmayın. Bu yaklaşımı kullanarak ve iOS6 için derleme yaparak, uygulama iOS7'de çalıştırıldığında hala aynı sonuçları elde edebiliyorum.

A içinde UITableView, bir hücre veya içindeki bir öğeyi seçip izleme dörtgeninizle yukarı veya aşağı kaydırarak tablo görünümünü gerçekten kaydırabileceğinizi unutmayın.

Örneğin UIScrollView, Alex'in önerisini beğendim, ancak geçici olarak görünüm denetleyicisini serbest biçime değiştirmenizi, kök görünümün yüksekliğini artırmanızı, kullanıcı arayüzünüzü oluşturmanızı (1-5. Adımlar) ve işiniz bittiğinde bunu standart çıkarsanan boyuta geri döndürmenizi öneririm. böylece içerik boyutlarını çalışma zamanı öznitelikleri olarak sabit kodlamanız gerekmez. Bunu yaparsanız, hem 3,5 "hem de 4" aygıtları desteklemeye çalışan birçok bakım sorununa ve ayrıca gelecekte daha yüksek ekran çözünürlükleri olasılığına açarsınız.

Bu örnekte olduğu gibi, yalnızca viewDidAppear üzerinde contentSize özelliğini ayarlamalısınız:

- (void)viewDidAppear:(BOOL)animated{

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

}

Otomatik düzen sorunlarını çözer ve iOS7'de sorunsuz çalışır.

Sorumluluk Reddi: - Yalnızca ios 9 ve üstü için (Yığın Görünümü).

Uygulamanızı ios 9 cihazlarına dağıtıyorsanız bir yığın görünümü kullanın . İşte adımlar: -

1. Kısıtlamalarla bir kaydırma görünümü ekleyin - denetlemek (görüntülemek) için sola, sağa, alta, üste (kenar boşlukları olmadan) sabitleyin
2. Görünümü kaydırmak için aynı kısıtlamalara sahip bir yığın görünümü ekleyin.
3. Yığın Görünümü Diğer Kısıtlamalar: - stackView.bottom = view.bottom ve stackView.width = scrollView.width
4. Görünümlerinizi eklemeye başlayın. Kaydırma görünümü, yığın görünümünün (esasen içerik görünümünüz olan) boyutuna göre kaydırmaya karar verir.

İOS7'de, FreeForm boyutlu bir ViewController üzerinde bir UIScrollView içinde bir View'a sahipsem, ne yaparsam yapayım uygulamada kaymayacağını buldum. Etrafta oynadım ve FreeForms kullanmayan aşağıdakilerin işe yaradığını gördüm:

1. ViewController'ın ana görünümünün içine bir UIScrollView ekleyin

2. Otomatik Düzen kısıtlamalarını ScrollView'da uygun şekilde ayarlayın. Benim için 0'dan Üste Düzen kılavuzuna ve 0'dan Alta düzen Kılavuzuna kullandım

3. ScrollView içine bir Konteyner Görünümü yerleştirin. Yüksekliğini istediğiniz yere ayarlayın (örneğin 1000)

4. Yeniden boyutlandırılmaması için Kapsayıcıya bir Yükseklik kısıtlaması (1000) ekleyin. Alt kısım, formun sonunu geçecektir.

5. [Self.scrollView setContentSize: CGSizeMake (320, 1000)] satırını ekleyin; scrollView'ı içeren ViewController'a (IBOutlet olarak bağladığınız)

Container ile ilişkilendirilmiş ViewController (otomatik olarak eklenir), Interface Builder'da istenen yüksekliğe (1000) sahip olacak ve ayrıca orijinal görünüm denetleyicisinde düzgün bir şekilde kaydırılacaktır. Kontrollerinizi düzenlemek için artık konteynerin ViewController'ını kullanabilirsiniz.

5 sentimi kabul edilen cevaba koymak istiyorum: 2 gündür konuyu araştırıyorum ve nihayet bundan sonra her zaman kullanacağım bir çözüm buldum

kabul edilen cevapta 4. maddeye kadar gidin ve çerçeve ve içerik boyutlarının niteliklerini vb. eklemeyi unutun

her şeyi otomatik yapmak için sadece bu bağlantıdaki çözümü kullanın

her şey net, kolay, zarif ve ios 7'de bir cazibe gibi çalışıyor. Tüm bu lol'den oldukça memnunum

İşte basit bir çözüm.

1. Film şeridindeki görünüm denetleyicinizin boyut özniteliğini "Serbest Biçim" olarak ayarlayın ve istediğiniz boyutu ayarlayın. Kaydırma görünümünüzün tüm içeriğine sığacak kadar büyük olduğundan emin olun.

2. Kaydırma görünümünüzü ekleyin ve normalde yaptığınız gibi kısıtlamaları ayarlayın. Örneğin, kaydırma görünümünün görünümünüzün boyutu olmasını istiyorsanız, üst, alt, ön ve arka kenar boşluklarınızı normalde yaptığınız gibi süpervizyona ekleyin.

3. Şimdi, kaydırma görünümünün alt görünümlerinde kaydırma görünümünün üstünü ve altını birbirine bağlayan kısıtlamaların olduğundan emin olun. Yatay kaydırmanız varsa sol ve sağ için aynı.

Dikey kaydırma görünümleri için aynı çözüme ulaşan, ancak (stackoverflow ethosuna aykırı) soruyu yanıtlamayan biraz kirli bir cevap var. Bir scrollView kullanmak yerine, sadece bir UITableView kullanın, normal bir UIView'ı başlığa sürükleyin ve istediğiniz kadar büyütün, artık içeriği storyboard'da kaydırabilirsiniz.

Xcode 11 kullanarak bir kaydırma görünümünün nasıl kurulacağı aşağıda açıklanmıştır

1 - Kaydırma görünümü ekleyin ve üst, alt, ön ve arka kısıtlamaları ayarlayın

2 - Kaydırma görünümüne bir İçerik Görünümü ekleyin, bir bağlantıyı İçerik Düzeni Kılavuzuna sürükleyin ve Başta, Üstte, Altta ve Sonda'yı seçin. Değerlerini 0 olarak veya istediğiniz sabitleri ayarladığınızdan emin olun.

3 - İçerik Görünümünden Çerçeve Düzeni Kılavuzuna sürükleyin ve Eşit Genişlikler'i seçin

4 - İçerik Görünümüne bir yükseklik kısıtlaması sabiti ayarlayın

Görünüşe göre yüksekliği belirtmenize gerek yok! Herhangi bir nedenle değişirse bu harika (bileşenleri yeniden boyutlandırır veya yazı tipi boyutlarını değiştirirseniz).

Bu öğreticiyi takip ettim ve her şey işe yaradı: http://natashatherobot.com/ios-autolayout-scrollview/

(Yan not: Görünümü ortalamak istemediğiniz sürece viewDidLayoutSubviews uygulamasına gerek yoktur, bu nedenle adım listesi daha da kısadır).

Umarım yardımcı olur!

Anahtar, contentSize'dir.

Bu genellikle eksiktir ve bir UIScrollView eklerken belirtilmez.

UIScrollView öğesini seçin ve Kimlik Denetçisini seçin.

Identity Inspector'da scrollView'a contentSizea olarak bir keyPath ekleyin sizeve (320, 1000) olarak ayarlayın.

Kaydırın.

Otomatik düzen kullanıyorsanız, en iyi yaklaşımdan daha çok UITableViewController'ı storyboard'daki statik hücrelerle kullanmaktır.

Ayrıca bir kez daha fazla kaydırma gerektiren bir görünümle ilgili sorunla karşılaştım, bu nedenle UIScrollView'ı yukarıda belirtilen teknikle değiştirin.