मान लीजिए कि मैंने UIStackView में अधिक विचार जोड़े हैं जो प्रदर्शित किए जा सकते हैं, मैं UIStackView
स्क्रॉल कैसे बना सकता हूं ?
मान लीजिए कि मैंने UIStackView में अधिक विचार जोड़े हैं जो प्रदर्शित किए जा सकते हैं, मैं UIStackView
स्क्रॉल कैसे बना सकता हूं ?
जवाबों:
यदि कोई बिना कोड के समाधान की तलाश कर रहा है, तो मैंने ऑटो लेआउट का उपयोग करके स्टोरीबोर्ड में इसे पूरी तरह से करने के लिए एक उदाहरण बनाया।
आप इसे जीथब से प्राप्त कर सकते हैं ।
मूल रूप से, उदाहरण के लिए (ऊर्ध्वाधर स्क्रॉलिंग के लिए):
UIScrollView
, और इसकी बाधाओं को सेट करें।UIStackView
कोUIScrollView
Leading
, Trailing
, Top
और Bottom
से लोगों को बराबर होना चाहिएUIScrollView
Width
के बीच बाधा UIStackView
और UIScrollView
।UIStackView
UIViews
के लिएUIStackView
एक्सचेंज Width
के लिए Height
चरण 4 में, और सेट Axis
= Horizontal
चरण 5 में, एक क्षैतिज UIStackView मिलता है।
Apple के ऑटो लेआउट गाइड में स्क्रॉल दृश्य के साथ काम करने पर एक संपूर्ण अनुभाग शामिल है । कुछ प्रासंगिक स्निपेट:
- स्क्रॉल दृश्य के संगत किनारों पर सामग्री दृश्य के शीर्ष, नीचे, अग्रणी और अनुगामी किनारों को पिन करें। सामग्री दृश्य अब स्क्रॉल दृश्य की सामग्री क्षेत्र को परिभाषित करता है।
- (वैकल्पिक) क्षैतिज स्क्रॉलिंग को अक्षम करने के लिए, सामग्री दृश्य की चौड़ाई को स्क्रॉल दृश्य की चौड़ाई के बराबर सेट करें। सामग्री दृश्य अब स्क्रॉल दृश्य को क्षैतिज रूप से भरता है।
- (वैकल्पिक) ऊर्ध्वाधर स्क्रॉलिंग को अक्षम करने के लिए, सामग्री दृश्य की ऊंचाई को स्क्रॉल दृश्य की ऊंचाई के बराबर सेट करें। सामग्री दृश्य अब स्क्रॉल दृश्य को क्षैतिज रूप से भरता है।
इसके अलावा:
आपके लेआउट को पूरी तरह से सामग्री दृश्य के आकार को परिभाषित करना चाहिए (सिवाय चरण 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
Need constraints for: Y position or height.
यह त्रुटि केवल तभी दूर हो जाती है जब आप स्टैक दृश्य के लिए चौड़ाई और ऊंचाई बाधा दोनों को सेट करते हैं, जो ऊर्ध्वाधर स्क्रॉल को अक्षम करता है। क्या यह कोड अभी भी आपके लिए काम करता है?
यहाँ शीर्ष मतदान जवाब में बाधाओं ने मेरे लिए काम किया, और मैंने नीचे की बाधाओं की एक छवि चिपकाई है, जैसा कि मेरे स्टोरीबोर्ड में बनाया गया है।
मैंने दो मुद्दों को मारा, हालांकि दूसरों को इसके बारे में पता होना चाहिए:
स्वीकार किए गए उत्तर में उन लोगों के समान बाधाओं को जोड़ने के बाद, मुझे लाल ऑटोलेयूट त्रुटि मिलेगी Need constraints for: X position or width
। स्टैक दृश्य के उप-भाग के रूप में एक UILabel जोड़कर इसे हल किया गया था।
मैं प्रोग्राम्स को उपमात्मक रूप से जोड़ रहा हूं, इसलिए मैं मूल रूप से स्टोरीबोर्ड पर कोई साक्षात्कार नहीं था। ऑटोलॉययट त्रुटियों से छुटकारा पाने के लिए, स्टोरीबोर्ड में एक सबव्यू जोड़ें, फिर अपने वास्तविक साक्षात्कार और बाधाओं को जोड़ने से पहले इसे लोड पर हटा दें।
मैंने मूल रूप UIButtons
से UIStackView में जोड़ने का प्रयास किया । बटन और दृश्य लोड होंगे, लेकिन स्क्रॉल दृश्य स्क्रॉल नहीं करेगा । यह UILabels
बटन के बजाय स्टैक व्यू में जोड़कर हल किया गया था । समान बाधाओं का उपयोग करते हुए, यह दृश्य UILabels स्क्रॉल के साथ पदानुक्रम है लेकिन UIButtons नहीं करता है।
मैं, इस मुद्दे से उलझन में हूँ के रूप में UIButtons है एक IntrinsicContentSize (स्टैक दृश्य द्वारा प्रयुक्त) लगता है। अगर किसी को पता है कि बटन काम क्यों नहीं करते हैं, तो मुझे यह जानना अच्छा लगेगा।
यहाँ मेरे विचार पदानुक्रम और बाधाओं के संदर्भ में हैं:
जैसा कि ईक कहता है, UIStackView
और UIScrollView
अच्छी तरह से एक साथ खेलते हैं, यहां देखें ।
कुंजी यह है कि UIStackView
विभिन्न सामग्रियों के लिए चर ऊंचाई / चौड़ाई को संभालता है और UIScrollView
फिर उस सामग्री को स्क्रॉल / बाउंस करने का अपना काम अच्छी तरह से करता है:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
scrollView.contentSize = CGSize(width: stackView.frame.width, height: stackView.frame.height)
}
मैं वही काम करना चाह रहा था और इस बेहतरीन पोस्ट पर ठोकर खाई । यदि आप एंकर एपीआई का उपयोग करके इस प्रोग्राम को करना चाहते हैं, तो यह जाने का तरीका है।
संक्षेप में, अपने 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
एक रिक्त पूर्ण-स्क्रीन दृश्य है
स्क्रॉल दृश्य जोड़ें। स्क्रॉल दृश्य से आधार दृश्य पर नियंत्रण-खींचें , बाएं-दाएं-ऊपर-नीचे, सभी शून्य जोड़ें।
स्क्रॉल दृश्य में स्टैक दृश्य जोड़ें। स्टैक दृश्य से स्क्रॉल दृश्य पर नियंत्रण-खींचें , बाएं-दाएं-ऊपर-नीचे, सभी शून्य जोड़ें।
स्टैक दृश्य के अंदर दो या तीन लेबल लगाएं।
स्पष्टता के लिए, लेबल का पृष्ठभूमि रंग लाल करें। लेबल की ऊँचाई 100 पर सेट करें।
अब प्रत्येक UILabel की चौड़ाई निर्धारित करें :
हैरानी की बात है, UILabel
स्क्रॉल दृश्य से नियंत्रण-खींचें , स्टैक दृश्य के लिए नहीं , और समान चौड़ाई का चयन करें ।
दोहराना:
यह इत्ना आसान है। यही रहस्य है।
गुप्त टिप - Apple बग:
यह केवल एक आइटम के साथ काम नहीं करेगा ! डेमो कार्य करने के लिए कुछ लेबल जोड़ें।
हो गया।
युक्ति: आपको हर नए आइटम में एक ऊंचाई जोड़ना होगा । किसी भी स्क्रॉल स्टैक दृश्य में प्रत्येक आइटम में या तो आंतरिक आकार (जैसे कि लेबल) होना चाहिए या एक स्पष्ट ऊंचाई की बाधा को जोड़ना होगा।
वैकल्पिक दृष्टिकोण:
उपरोक्त में: आश्चर्यजनक रूप से, UILabels की चौड़ाई को स्क्रॉल दृश्य (स्टैक दृश्य नहीं) की चौड़ाई पर सेट करें।
वैकल्पिक रूप से ...
तो आपके पास दो विकल्प हैं:
या
स्पष्ट होने के लिए, उन तरीकों में से एक करें, दोनों न करें।
क्षैतिज स्क्रॉलिंग के लिए। सबसे पहले, एक UIStackView
और एक बनाएँ और UIScrollView
उन्हें निम्नलिखित तरीके से अपने विचार में जोड़ें:
let scrollView = UIScrollView()
let stackView = UIStackView()
scrollView.addSubview(stackView)
view.addSubview(scrollView)
और पर सेट करने के translatesAutoresizingMaskIntoConstraints
लिए याद रखना :false
UIStackView
UIScrollView
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
बस इसमें जोड़ें viewdidload
:
let insets = UIEdgeInsetsMake(20.0, 0.0, 0.0, 0.0)
scrollVIew.contentInset = insets
scrollVIew.scrollIndicatorInsets = insets
आप स्क्रॉल करने योग्य 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];
// ...
यदि आपके पास स्क्रॉल दृश्य के अंदर खड़ी दृश्य को केंद्र में रखने के लिए बाधा है, तो इसे हटा दें।
एक ऊर्ध्वाधर स्टैकव्यू / स्क्रॉलव्यू (ऑटोलॉययूट के 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)
]
बस यह सुनिश्चित करें कि आपके प्रत्येक सबव्यू की ऊंचाई को परिभाषित किया गया है!
सबसे पहले और सबसे महत्वपूर्ण रूप से, स्केच जैसी किसी चीज़ में अपने विचार डिज़ाइन करें या एक विचार प्राप्त करें कि आप स्क्रॉल करने योग्य सामग्री के रूप में क्या चाहते हैं।
इसके बाद व्यू कंट्रोलर को फ्री फॉर्म (विशेषता निरीक्षक से चुनें) और आपके दृश्य के आंतरिक सामग्री आकार (आकार निरीक्षक से चुना जाना) के अनुसार ऊंचाई और चौड़ाई निर्धारित करें।
इसके बाद व्यू कंट्रोलर ने एक स्क्रॉल व्यू डाला और यह एक तर्क है, जिसे मैंने आईओएस में लगभग हर समय काम करते पाया है (इसमें उस व्यू क्लास के डॉक्यूमेंटेशन से गुजरना पड़ सकता है, जिसे कमांड के जरिए प्राप्त किया जा सकता है + पर क्लिक करें वह वर्ग या गुग्लिंग के माध्यम से)
यदि आप दो या अधिक विचारों के साथ काम कर रहे हैं, तो पहले एक दृश्य के साथ शुरू करें, जिसे पहले पेश किया गया है या अधिक आदिम है और फिर उस दृश्य पर जाएं जिसे बाद में पेश किया गया है या अधिक आधुनिक है। तो यहाँ चूंकि स्क्रॉल दृश्य पहले पेश किया गया है, पहले स्क्रॉल दृश्य से शुरू करें और फिर स्टैक दृश्य पर जाएँ। यहां सुपर व्यू के सभी दिशाओं में स्क्रॉल व्यू बाधाओं को शून्य करने के लिए सभी दिशाओं में रखें। इस स्क्रॉल दृश्य के अंदर अपने सभी विचार रखें और फिर उन्हें स्टैक दृश्य में डालें।
स्टैक दृश्य के साथ काम करते समय
पहले मैदान के साथ शुरू करें (अप-अप दृष्टिकोण), यानी, यदि आपके पास अपने दृश्य में लेबल, पाठ फ़ील्ड और चित्र हैं, तो पहले इन विचारों को बाहर रखें (स्क्रॉल दृश्य के अंदर) और उसके बाद उन्हें स्टैक दृश्य में डालें।
उसके बाद स्टैक व्यू की संपत्ति को ट्वीक करें। यदि वांछित दृश्य अभी भी प्राप्त नहीं हुआ है, तो दूसरे स्टैक दृश्य का उपयोग करें।
अपना दृष्टिकोण बनाने के बाद, माँ स्टैक दृश्य और स्क्रॉल दृश्य के बीच एक बाधा डालें, जबकि बाधा बच्चों को माँ स्टैक दृश्य के साथ देखें। उम्मीद है कि इस समय तक यह ठीक काम करेगा या आपको सुझाव देने वाले Xcode से चेतावनी मिल सकती है, इसे क्या कहते हैं पढ़ें और उन पर अमल करें। उम्मीद है कि अब आपको अपनी उम्मीदों के मुताबिक काम करना चाहिए :)।
नेस्टेड या सिंगल स्टैक दृश्य के लिए स्क्रॉल दृश्य को रूट दृश्य के साथ एक निश्चित चौड़ाई सेट करना होगा। मुख्य स्टैक दृश्य जो स्क्रॉल दृश्य के अंदर है, उसे समान चौड़ाई सेट करना होगा। [मेरा स्क्रॉल दृश्य किसी दृश्य की उपेक्षा है]
UIStackView और UIScrollView के बीच एक समान चौड़ाई का अवरोध स्थापित करें।
यदि कोई भी क्षैतिज रूप से स्क्रॉलव्यू की तलाश में है
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()
}
अपने दृश्य पर एक स्क्रॉल दृश्य रखें, और इसे आकार दें ताकि यह दृश्य को भर दे। फिर, स्क्रॉल दृश्य के अंदर एक स्टैक दृश्य रखें, और स्टैक दृश्य के अंदर आइटम जोड़ें बटन रखें। जैसे ही सब कुछ हो, निम्नलिखित बाधाओं को निर्धारित करें:
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
कुंजी है।
MacOS उत्प्रेरक के लिए कुछ नया परिप्रेक्ष्य जोड़ना। चूंकि macOS ऐप्स विंडो आकार बदलने का समर्थन करते हैं, इसलिए यह संभव है कि आपका UIStackView
एक अनियंत्रित स्थिति से स्क्रॉल करने योग्य या किसी अन्य वर्जन से संक्रमण हो। यहां दो सूक्ष्म चीजें हैं:
UIStackView
यह सभी क्षेत्र में फिट करने के लिए डिज़ाइन किया गया है।UIScrollView
अपने नेविगेशन बार (या macOS ऐप्स के मामले में टूलबार) के नीचे स्थित नए प्राप्त / खोए हुए क्षेत्र के लिए अपनी सीमाओं को आकार देने का प्रयास करेगा।यह दुर्भाग्य से एक अनंत लूप बनाएगा। मैं इससे बहुत परिचित नहीं हूँ UIScrollView
और इसके adjustedContentInset
, लेकिन इसकी layoutSubviews
विधि में अपने लॉग से , मैं निम्नलिखित व्यवहार देख रहा हूँ:
UIScrollView
इसकी सीमा को कम करने का प्रयास (चूंकि टूलबार के नीचे के क्षेत्र की कोई आवश्यकता नहीं है)।UIStackView
इस प्रकार है।UIScrollView
असंतुष्ट है, और बड़ी सीमा को बहाल करने का फैसला करता है। यह मुझे बहुत अजीब लगता है क्योंकि मैं लॉग से जो देख रहा हूं, वह वही हैUIScrollView.bounds.height == UIStackView.bounds.height
।UIStackView
इस प्रकार है।यह मुझे प्रतीत होता है कि दो कदम समस्या को ठीक करेंगे:
UIStackView.top
करें UIScrollView.topMargin
।contentInsetAdjustmentBehavior
करें .never
।यहां मैं एक लंबवत स्क्रॉलिंग के साथ एक ऊर्ध्वाधर रूप से बढ़ते हुए चिंतित हूं UIStackView
। एक क्षैतिज जोड़ी के लिए, तदनुसार कोड बदलें।
आशा है कि यह भविष्य में किसी की मदद करेगा। इंटरनेट पर इसका उल्लेख करने वाला कोई भी व्यक्ति नहीं मिला और मुझे यह पता लगाने में काफी समय लगा कि क्या हुआ।