क्या UIStackView को स्क्रॉल करना संभव है?


210

मान लीजिए कि मैंने UIStackView में अधिक विचार जोड़े हैं जो प्रदर्शित किए जा सकते हैं, मैं UIStackViewस्क्रॉल कैसे बना सकता हूं ?


आप सामग्री के लिए एक (या एकाधिक) स्टैक दृश्यों के साथ स्क्रॉल दृश्य का उपयोग क्यों नहीं कर रहे हैं?
व्यर्थ

2
एक-वाक्य समाधान यह है कि चौड़ाई के लिए आप दादा-दादी स्क्रॉल दृश्य पर नियंत्रण-खींचें, कि माता-पिता स्टैक दृश्य। मेरे जवाब में समझाया!
fattie

UIScrollView के अंदर UIStackView को iOS github.com/onmyway133/blog/issues/324
onmyway133

आईओएस में इस महत्वपूर्ण सवाल के बारे में। वास्तव में इसे करने के दो (और केवल दो) तरीके हैं - यह करने का एकमात्र तरीका है और आपको दो प्रक्रियाओं में से एक का पालन करना चाहिए , बिल्कुल। नीचे मेरा जवाब हमेशा अपडेट किया जाता है।
फेटी

हाँ। आपके पास UIScrollView के सामग्री दृश्य के रूप में एक मध्यवर्ती UIView होना चाहिए। इसके बाद UIStackView को कंटेंट व्यू के चाइल्ड व्यू के रूप में रखें। raywenderlich.com/...
poGUIst

जवाबों:


577

यदि कोई बिना कोड के समाधान की तलाश कर रहा है, तो मैंने ऑटो लेआउट का उपयोग करके स्टोरीबोर्ड में इसे पूरी तरह से करने के लिए एक उदाहरण बनाया।

आप इसे जीथब से प्राप्त कर सकते हैं ।

मूल रूप से, उदाहरण के लिए (ऊर्ध्वाधर स्क्रॉलिंग के लिए):

  1. एक बनाएँ UIScrollView, और इसकी बाधाओं को सेट करें।
  2. एक जोड़े UIStackViewकोUIScrollView
  3. बाधाओं सेट करें: Leading, Trailing, Topऔर Bottomसे लोगों को बराबर होना चाहिएUIScrollView
  4. एक समान सेट अप Widthके बीच बाधा UIStackViewऔर UIScrollView
  5. एक्सिस = वर्टिकल, एलाइनमेंट = फिल, डिस्ट्रीब्यूशन = समान स्पेसिंग और स्पेसिंग = 0 सेट करें UIStackView
  6. के एक नंबर जोड़े UIViewsके लिएUIStackView
  7. Daud

एक्सचेंज Widthके लिए Heightचरण 4 में, और सेट Axis= Horizontalचरण 5 में, एक क्षैतिज UIStackView मिलता है।


55
धन्यवाद! * "UIStackView और UIScrollView के बीच एक समान चौड़ाई का अवरोध स्थापित करें।" कुंजी थी;)
ब्लैंक

19
नंबर 6. भी महत्वपूर्ण है। सभी विचारों को कोड में जोड़ना चाहते थे, लेकिन फिर ऑटो लेआउट आईबी में लापता विरोधाभास दिखाता है।
प्री

11
हाय गेस, ऐसा लगता है कि यह समाधान क्षैतिज स्क्रॉलिंग के लिए काम नहीं करता है। चरण 4 पर, सेट समान चौड़ाई के बजाय, मैं समान ऊंचाई सेट करने के लिए मानता हूं, और एक्सिस = क्षैतिज। मैंने कोशिश की और काम नहीं करता है।
सेतो एल्कहिफी

5
एक बाधा जोड़ना ताकि स्टैकव्यू और स्क्रॉलव्यू की समान चौड़ाई हो, इंटरफ़ेस बिल्डर से चेतावनी को हटा देगा, लेकिन फिर स्क्रॉल को अक्षम कर दिया जाएगा। स्क्रॉलिंग तभी होती है जब स्क्रॉलव्यू के अंदर का कंटेंट व्यू स्क्रॉलव्यू से बड़ा हो!
जेसन मूर

6
बिंदु 6 पर विस्तृत विवरण के लिए। यदि स्टैक दृश्य में कोई तत्व नहीं था, लेकिन सभी बाधाएं जगह में हैं, तो आपको "स्क्रॉल देखें की आवश्यकता है वाई स्थिति या ऊंचाई के लिए बाधाओं की आवश्यकता है"। स्टैक दृश्य में केवल एक लेबल जोड़ने से यह चेतावनी चली जाती है!
फैसल मेमन

45

Apple के ऑटो लेआउट गाइड में स्क्रॉल दृश्य के साथ काम करने पर एक संपूर्ण अनुभाग शामिल है । कुछ प्रासंगिक स्निपेट:

  1. स्क्रॉल दृश्य के संगत किनारों पर सामग्री दृश्य के शीर्ष, नीचे, अग्रणी और अनुगामी किनारों को पिन करें। सामग्री दृश्य अब स्क्रॉल दृश्य की सामग्री क्षेत्र को परिभाषित करता है।
  2. (वैकल्पिक) क्षैतिज स्क्रॉलिंग को अक्षम करने के लिए, सामग्री दृश्य की चौड़ाई को स्क्रॉल दृश्य की चौड़ाई के बराबर सेट करें। सामग्री दृश्य अब स्क्रॉल दृश्य को क्षैतिज रूप से भरता है।
  3. (वैकल्पिक) ऊर्ध्वाधर स्क्रॉलिंग को अक्षम करने के लिए, सामग्री दृश्य की ऊंचाई को स्क्रॉल दृश्य की ऊंचाई के बराबर सेट करें। सामग्री दृश्य अब स्क्रॉल दृश्य को क्षैतिज रूप से भरता है।

इसके अलावा:

आपके लेआउट को पूरी तरह से सामग्री दृश्य के आकार को परिभाषित करना चाहिए (सिवाय चरण 5 और 6 में परिभाषित किए हुए)। ... जब सामग्री दृश्य स्क्रॉल दृश्य से लंबा होता है, तो स्क्रॉल दृश्य ऊर्ध्वाधर स्क्रॉलिंग को सक्षम करता है। जब सामग्री दृश्य स्क्रॉल दृश्य से व्यापक है, तो स्क्रॉल दृश्य क्षैतिज स्क्रॉलिंग को सक्षम करता है।

संक्षेप में, स्क्रॉल दृश्य की सामग्री दृश्य (इस मामले में, एक स्टैक दृश्य) को इसके किनारों पर पिन किया जाना चाहिए और इसकी चौड़ाई और / या ऊंचाई अन्यथा संकुचित होनी चाहिए । इसका मतलब है कि स्टैक दृश्य की सामग्री को सीधे (प्रत्यक्ष या अप्रत्यक्ष रूप से) दिशा (ओं) में विवश किया जाना चाहिए, जिसमें स्क्रॉलिंग वांछित है, जिसका अर्थ हो सकता है कि खड़ी स्क्रॉल स्टैक दृश्य के अंदर प्रत्येक दृश्य में एक ऊंचाई बाधा जोड़ना, उदाहरण के लिए। निम्नलिखित एक उदाहरण है कि कैसे स्क्रॉल दृश्य के ऊर्ध्वाधर स्क्रॉल के लिए अनुमति दी जाती है जिसमें स्टैक दृश्य होता है:

// 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

1
धन्यवाद, लेकिन ऊँचाई की बाधा को छोड़ने (ऊर्ध्वाधर स्क्रॉलिंग के लिए अनुमति देने के लिए) स्टोरीबोर्ड में इस त्रुटि को जन्म देती है: Need constraints for: Y position or height.यह त्रुटि केवल तभी दूर हो जाती है जब आप स्टैक दृश्य के लिए चौड़ाई और ऊंचाई बाधा दोनों को सेट करते हैं, जो ऊर्ध्वाधर स्क्रॉल को अक्षम करता है। क्या यह कोड अभी भी आपके लिए काम करता है?
Crashalot

@ क्रशलॉट उस त्रुटि को खत्म करने के लिए आपको स्टैक दृश्य में एक सबव्यू जोड़ने की आवश्यकता है; नीचे मेरा जवाब देखें।
pkamb

16

यहाँ शीर्ष मतदान जवाब में बाधाओं ने मेरे लिए काम किया, और मैंने नीचे की बाधाओं की एक छवि चिपकाई है, जैसा कि मेरे स्टोरीबोर्ड में बनाया गया है।

मैंने दो मुद्दों को मारा, हालांकि दूसरों को इसके बारे में पता होना चाहिए:

  1. स्वीकार किए गए उत्तर में उन लोगों के समान बाधाओं को जोड़ने के बाद, मुझे लाल ऑटोलेयूट त्रुटि मिलेगी Need constraints for: X position or width। स्टैक दृश्य के उप-भाग के रूप में एक UILabel जोड़कर इसे हल किया गया था।

    मैं प्रोग्राम्स को उपमात्मक रूप से जोड़ रहा हूं, इसलिए मैं मूल रूप से स्टोरीबोर्ड पर कोई साक्षात्कार नहीं था। ऑटोलॉययट त्रुटियों से छुटकारा पाने के लिए, स्टोरीबोर्ड में एक सबव्यू जोड़ें, फिर अपने वास्तविक साक्षात्कार और बाधाओं को जोड़ने से पहले इसे लोड पर हटा दें।

  2. मैंने मूल रूप UIButtonsसे UIStackView में जोड़ने का प्रयास किया । बटन और दृश्य लोड होंगे, लेकिन स्क्रॉल दृश्य स्क्रॉल नहीं करेगा । यह UILabelsबटन के बजाय स्टैक व्यू में जोड़कर हल किया गया था । समान बाधाओं का उपयोग करते हुए, यह दृश्य UILabels स्क्रॉल के साथ पदानुक्रम है लेकिन UIButtons नहीं करता है।

    मैं, इस मुद्दे से उलझन में हूँ के रूप में UIButtons है एक IntrinsicContentSize (स्टैक दृश्य द्वारा प्रयुक्त) लगता है। अगर किसी को पता है कि बटन काम क्यों नहीं करते हैं, तो मुझे यह जानना अच्छा लगेगा।

यहाँ मेरे विचार पदानुक्रम और बाधाओं के संदर्भ में हैं:

स्क्रॉल दृश्य में स्टैक दृश्य के लिए बाधाएं [1]


3
आपने मुझे दीवार और हताशा के खिलाफ सिर झुकाए घंटों के एक झुंड को बचाया, मैं बिल्कुल उसी स्थिति में हूं और चेतावनी के कारण का पता नहीं लगा सका और बटन के साथ काम क्यों नहीं कर रहा है। क्यों Apple क्यों !?
पाकीटो वी

15

जैसा कि ईक कहता है, UIStackViewऔर UIScrollViewअच्छी तरह से एक साथ खेलते हैं, यहां देखें ।

कुंजी यह है कि UIStackViewविभिन्न सामग्रियों के लिए चर ऊंचाई / चौड़ाई को संभालता है और UIScrollViewफिर उस सामग्री को स्क्रॉल / बाउंस करने का अपना काम अच्छी तरह से करता है:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    scrollView.contentSize = CGSize(width: stackView.frame.width, height: stackView.frame.height)       
}

2
स्क्रॉल करने योग्य स्टैक दृश्य के लिए अनुमति देने के लिए मैन्युअल और ऑटो लेआउट को संयोजित करना आवश्यक नहीं है। आपको बस स्टैक दृश्य की चौड़ाई और / या ऊँचाई को कसने की आवश्यकता है। विवरण के लिए मेरा उत्तर और प्रासंगिक Apple डॉक्स का लिंक देखें।
टाइटेनियमडेकॉय

गितुब उदाहरण ने पूरी तरह से काम किया और बहुत स्पष्ट था। साझा करने के लिए धन्यवाद।
बेहर

stackView.translatesAutoresizingMaskIntoConstraints = गलत, यह मेरे मामले में चाल चली
Howl Jenkins

10

मैं वही काम करना चाह रहा था और इस बेहतरीन पोस्ट पर ठोकर खाई यदि आप एंकर एपीआई का उपयोग करके इस प्रोग्राम को करना चाहते हैं, तो यह जाने का तरीका है।

संक्षेप में, अपने UIStackViewमें एम्बेड करें UIScrollView, और UIStackViewउन में से मिलान करने के लिए एंकर बाधाओं को सेट करें 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

कृपया एक से अधिक प्रश्नों के उत्तर न जोड़ें । सर्वश्रेष्ठ का उत्तर दें और बाकी को डुप्लिकेट के रूप में चिह्नित करें। देखें कि क्या कई सवालों के डुप्लीकेट उत्तर को जोड़ना स्वीकार्य है?
फेलिक्सएसएफडी

10
वे वास्तव में इस मामले में डुप्लिकेट नहीं हैं। अन्य प्रश्न विशेष रूप से पूछते हैं कि यह प्रोग्राम कैसे करना है जबकि यह नहीं करता है। वास्तव में, इस प्रश्न के लिए शीर्ष उत्तर परिणाम प्राप्त करने के लिए GUI विधि प्रदान करता है। फिर भी, कुछ उपयोगकर्ताओं के लिए एक प्रोग्रामेटिक समाधान मूल्यवान हो सकता है।
दालमाज़ियो

9

2020 के लिए तारीख तक।

100% स्टोरीबोर्ड या 100% कोड।


यहाँ सरल संभव व्याख्या है:

  1. एक रिक्त पूर्ण-स्क्रीन दृश्य है

  2. स्क्रॉल दृश्य जोड़ें। स्क्रॉल दृश्य से आधार दृश्य पर नियंत्रण-खींचें , बाएं-दाएं-ऊपर-नीचे, सभी शून्य जोड़ें।

  3. स्क्रॉल दृश्य में स्टैक दृश्य जोड़ें। स्टैक दृश्य से स्क्रॉल दृश्य पर नियंत्रण-खींचें , बाएं-दाएं-ऊपर-नीचे, सभी शून्य जोड़ें।

  4. स्टैक दृश्य के अंदर दो या तीन लेबल लगाएं।

स्पष्टता के लिए, लेबल का पृष्ठभूमि रंग लाल करें। लेबल की ऊँचाई 100 पर सेट करें।

  1. अब प्रत्येक UILabel की चौड़ाई निर्धारित करें :

    हैरानी की बात है, UILabelस्क्रॉल दृश्य से नियंत्रण-खींचें , स्टैक दृश्य के लिए नहीं , और समान चौड़ाई का चयन करें ।

दोहराना:

यूलैबेल से यूबेल के माता-पिता तक खींचें को नियंत्रित न करें - दादा-दादी के पास जाएं। (दूसरे शब्दों में, स्क्रॉल दृश्य के सभी रास्ते पर जाएं, स्टैक दृश्य पर न जाएं।)

यह इत्ना आसान है। यही रहस्य है।

गुप्त टिप - Apple बग:

यह केवल एक आइटम के साथ काम नहीं करेगा ! डेमो कार्य करने के लिए कुछ लेबल जोड़ें।

हो गया।

युक्ति: आपको हर नए आइटम में एक ऊंचाई जोड़ना होगा । किसी भी स्क्रॉल स्टैक दृश्य में प्रत्येक आइटम में या तो आंतरिक आकार (जैसे कि लेबल) होना चाहिए या एक स्पष्ट ऊंचाई की बाधा को जोड़ना होगा।


वैकल्पिक दृष्टिकोण:

उपरोक्त में: आश्चर्यजनक रूप से, UILabels की चौड़ाई को स्क्रॉल दृश्य (स्टैक दृश्य नहीं) की चौड़ाई पर सेट करें।

वैकल्पिक रूप से ...

स्टैक दृश्य से स्क्रॉल दृश्य पर खींचें, और "चौड़ाई बराबर" बाधा जोड़ें। यह अजीब लगता है क्योंकि आपने पहले ही बाएं-दाएं को पिन किया था , लेकिन यह है कि आप इसे कैसे करते हैं । कोई फर्क नहीं पड़ता कि यह कितना अजीब लगता है।

तो आपके पास दो विकल्प हैं:

  1. हैरानी की बात है, स्टैक दृश्य में प्रत्येक आइटम की चौड़ाई को स्क्रॉलव्यू दादा-दादी ( स्टैकव्यू माता-पिता नहीं ) की चौड़ाई पर सेट करें ।

या

  1. हैरानी की बात यह है कि स्क्रॉलव्यू के लिए स्टैकव्यू की "चौड़ाई बराबर" सेट करें - भले ही आपके पास वैसे भी स्क्रॉलव्यू के बाएं और दाएं किनारों को स्क्रॉलव्यू पर पिन किया गया हो।

स्पष्ट होने के लिए, उन तरीकों में से एक करें, दोनों न करें।


8

क्षैतिज स्क्रॉलिंग (UIScrollView के भीतर UIStackView)

क्षैतिज स्क्रॉलिंग के लिए। सबसे पहले, एक UIStackViewऔर एक बनाएँ और UIScrollViewउन्हें निम्नलिखित तरीके से अपने विचार में जोड़ें:

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

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

और पर सेट करने के translatesAutoresizingMaskIntoConstraintsलिए याद रखना :falseUIStackViewUIScrollView

stackView.translatesAutoresizingMaskIntoConstraints = false
scrollView.translatesAutoresizingMaskIntoConstraints = false

सब कुछ प्राप्त करने के लिए एंकर के अग्रणी, शीर्ष और नीचे के एंकर को काम करना UIStackViewचाहिए UIScrollView:

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

लेकिन की चौड़ाई लंगर UIStackView के बराबर या उससे अधिक होनी चाहिए UIScrollView:

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

अब अपने लंगर UIScrollView उदाहरण के लिए :

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 

इसके बाद, मैं सुझाव दूंगा कि निम्नलिखित सेटिंग्स के लिए कोशिश कर रहा हूँ UIStackView संरेखण और वितरण के दूंगा:

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

topicStackView.spacing = 10

अंत में आपको addArrangedSubview:अपने UIStackView में साक्षात्कार जोड़ने के लिए विधि का उपयोग करने की आवश्यकता होगी ।

पाठ इनसेट

एक अतिरिक्त विशेषता जो आपको उपयोगी लग सकती है, वह यह है कि क्योंकि आपके UIStackViewभीतर रखी गई UIScrollViewचीज़ों को थोड़ा सा बेहतर बनाने के लिए अब टेक्स्ट इनसेट तक पहुंच है।

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

7

बस इसमें जोड़ें viewdidload:

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

स्रोत: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html


आपको यह नहीं बता सकता है कि इससे मेरे ऑटोलैयूट + स्क्रोल व्यू को कितना बचाया गया है। उस Apple लिंक पर बहुत अच्छा लगा।
दिनांक

क्या करता है? इसके बिना क्या होता है?
हनी

यह केवल स्थिति पट्टी के नीचे स्क्रॉल दृश्य सामग्री रखता है।
turingtested

2

आप स्क्रॉल करने योग्य StackView देखें : https://github.com/gurhub/ScrollableStackView

यह उद्देश्य-सी और स्विफ्ट संगत पुस्तकालय है। यह CocoaPods के माध्यम से उपलब्ध है ।

नमूना कोड (स्विफ्ट)

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)
// ...

नमूना कोड (उद्देश्य-सी)

@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]; 
// ...

हाय पीटर, वास्तव में एक महान विचार है! योगदान हमेशा स्वागत है, कृपया इसके लिए पुल अनुरोध भेजने के लिए स्वतंत्र महसूस करें। श्रेष्ठ।
5:32 बजे mgyky

0

यदि आपके पास स्क्रॉल दृश्य के अंदर खड़ी दृश्य को केंद्र में रखने के लिए बाधा है, तो इसे हटा दें।


0

एक ऊर्ध्वाधर स्टैकव्यू / स्क्रॉलव्यू (ऑटोलॉययूट के EasyPeasyलिए उपयोग करके ) के लिए उदाहरण :

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)
]

बस यह सुनिश्चित करें कि आपके प्रत्येक सबव्यू की ऊंचाई को परिभाषित किया गया है!


0
  1. सबसे पहले और सबसे महत्वपूर्ण रूप से, स्केच जैसी किसी चीज़ में अपने विचार डिज़ाइन करें या एक विचार प्राप्त करें कि आप स्क्रॉल करने योग्य सामग्री के रूप में क्या चाहते हैं।

  2. इसके बाद व्यू कंट्रोलर को फ्री फॉर्म (विशेषता निरीक्षक से चुनें) और आपके दृश्य के आंतरिक सामग्री आकार (आकार निरीक्षक से चुना जाना) के अनुसार ऊंचाई और चौड़ाई निर्धारित करें।

  3. इसके बाद व्यू कंट्रोलर ने एक स्क्रॉल व्यू डाला और यह एक तर्क है, जिसे मैंने आईओएस में लगभग हर समय काम करते पाया है (इसमें उस व्यू क्लास के डॉक्यूमेंटेशन से गुजरना पड़ सकता है, जिसे कमांड के जरिए प्राप्त किया जा सकता है + पर क्लिक करें वह वर्ग या गुग्लिंग के माध्यम से)

    यदि आप दो या अधिक विचारों के साथ काम कर रहे हैं, तो पहले एक दृश्य के साथ शुरू करें, जिसे पहले पेश किया गया है या अधिक आदिम है और फिर उस दृश्य पर जाएं जिसे बाद में पेश किया गया है या अधिक आधुनिक है। तो यहाँ चूंकि स्क्रॉल दृश्य पहले पेश किया गया है, पहले स्क्रॉल दृश्य से शुरू करें और फिर स्टैक दृश्य पर जाएँ। यहां सुपर व्यू के सभी दिशाओं में स्क्रॉल व्यू बाधाओं को शून्य करने के लिए सभी दिशाओं में रखें। इस स्क्रॉल दृश्य के अंदर अपने सभी विचार रखें और फिर उन्हें स्टैक दृश्य में डालें।

स्टैक दृश्य के साथ काम करते समय

  • पहले मैदान के साथ शुरू करें (अप-अप दृष्टिकोण), यानी, यदि आपके पास अपने दृश्य में लेबल, पाठ फ़ील्ड और चित्र हैं, तो पहले इन विचारों को बाहर रखें (स्क्रॉल दृश्य के अंदर) और उसके बाद उन्हें स्टैक दृश्य में डालें।

  • उसके बाद स्टैक व्यू की संपत्ति को ट्वीक करें। यदि वांछित दृश्य अभी भी प्राप्त नहीं हुआ है, तो दूसरे स्टैक दृश्य का उपयोग करें।

  • यदि फिर भी हासिल नहीं किया गया है तो संपीड़न प्रतिरोध या सामग्री गले लगाने की प्राथमिकता के साथ खेलें।
  • इसके बाद स्टैक दृश्य में बाधाएं जोड़ें।
  • एक खाली यूविवाई को भराव दृश्य के रूप में उपयोग करने के बारे में भी सोचें, यदि उपरोक्त सभी संतोषजनक परिणाम नहीं दे रहे हैं।

अपना दृष्टिकोण बनाने के बाद, माँ स्टैक दृश्य और स्क्रॉल दृश्य के बीच एक बाधा डालें, जबकि बाधा बच्चों को माँ स्टैक दृश्य के साथ देखें। उम्मीद है कि इस समय तक यह ठीक काम करेगा या आपको सुझाव देने वाले Xcode से चेतावनी मिल सकती है, इसे क्या कहते हैं पढ़ें और उन पर अमल करें। उम्मीद है कि अब आपको अपनी उम्मीदों के मुताबिक काम करना चाहिए :)।


0

नेस्टेड या सिंगल स्टैक दृश्य के लिए स्क्रॉल दृश्य को रूट दृश्य के साथ एक निश्चित चौड़ाई सेट करना होगा। मुख्य स्टैक दृश्य जो स्क्रॉल दृश्य के अंदर है, उसे समान चौड़ाई सेट करना होगा। [मेरा स्क्रॉल दृश्य किसी दृश्य की उपेक्षा है]

UIStackView और UIScrollView के बीच एक समान चौड़ाई का अवरोध स्थापित करें।

यहां छवि विवरण दर्ज करें


0

यदि कोई भी क्षैतिज रूप से स्क्रॉलव्यू की तलाश में है

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()

 }

0

अपने दृश्य पर एक स्क्रॉल दृश्य रखें, और इसे आकार दें ताकि यह दृश्य को भर दे। फिर, स्क्रॉल दृश्य के अंदर एक स्टैक दृश्य रखें, और स्टैक दृश्य के अंदर आइटम जोड़ें बटन रखें। जैसे ही सब कुछ हो, निम्नलिखित बाधाओं को निर्धारित करें:

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

यहां छवि विवरण दर्ज करें

कोड: Stack View.Width = Scroll View.Widthकुंजी है।


0

MacOS उत्प्रेरक के लिए कुछ नया परिप्रेक्ष्य जोड़ना। चूंकि macOS ऐप्स विंडो आकार बदलने का समर्थन करते हैं, इसलिए यह संभव है कि आपका UIStackViewएक अनियंत्रित स्थिति से स्क्रॉल करने योग्य या किसी अन्य वर्जन से संक्रमण हो। यहां दो सूक्ष्म चीजें हैं:

  • UIStackView यह सभी क्षेत्र में फिट करने के लिए डिज़ाइन किया गया है।
  • संक्रमण के दौरान, UIScrollViewअपने नेविगेशन बार (या macOS ऐप्स के मामले में टूलबार) के नीचे स्थित नए प्राप्त / खोए हुए क्षेत्र के लिए अपनी सीमाओं को आकार देने का प्रयास करेगा।

यह दुर्भाग्य से एक अनंत लूप बनाएगा। मैं इससे बहुत परिचित नहीं हूँ UIScrollViewऔर इसके adjustedContentInset, लेकिन इसकी layoutSubviewsविधि में अपने लॉग से , मैं निम्नलिखित व्यवहार देख रहा हूँ:

  • एक खिड़की बढ़ाता है।
  • UIScrollView इसकी सीमा को कम करने का प्रयास (चूंकि टूलबार के नीचे के क्षेत्र की कोई आवश्यकता नहीं है)।
  • UIStackView इस प्रकार है।
  • किसी तरह UIScrollViewअसंतुष्ट है, और बड़ी सीमा को बहाल करने का फैसला करता है। यह मुझे बहुत अजीब लगता है क्योंकि मैं लॉग से जो देख रहा हूं, वह वही हैUIScrollView.bounds.height == UIStackView.bounds.height
  • UIStackView इस प्रकार है।
  • फिर स्टेप 2 स्टेप करें।

यह मुझे प्रतीत होता है कि दो कदम समस्या को ठीक करेंगे:

  • से संरेखित UIStackView.topकरें UIScrollView.topMargin
  • को सेट contentInsetAdjustmentBehaviorकरें .never

यहां मैं एक लंबवत स्क्रॉलिंग के साथ एक ऊर्ध्वाधर रूप से बढ़ते हुए चिंतित हूं UIStackView। एक क्षैतिज जोड़ी के लिए, तदनुसार कोड बदलें।

आशा है कि यह भविष्य में किसी की मदद करेगा। इंटरनेट पर इसका उल्लेख करने वाला कोई भी व्यक्ति नहीं मिला और मुझे यह पता लगाने में काफी समय लगा कि क्या हुआ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.