UIStackView में मल्टीलाइन लेबल


154

स्टैक दृश्य में मल्टीलाइन लेबल (वर्ड लपेट के लिए लाइनब्रेक सेट के साथ) डालने पर, लेबल तुरंत लाइनब्रेक खो देता है और इसके बजाय एक पंक्ति में लेबल टेक्स्ट प्रदर्शित करता है।

ऐसा क्यों हो रहा है और स्टैक व्यू के भीतर मल्टीलाइन लेबल को कैसे संरक्षित किया जाता है?


1
क्या आपने लाइनों की संख्या 0 पर सेट की थी?
दशमी

क्या आपको जवाब मिला?
ब्रेंडेन

जवाबों:


204

सही उत्तर यहाँ है:
https://stackoverflow.com/a/43110590/566360


  1. UILabelअंदर एंबेड करें UIView(संपादक -> एंबेड इन -> देखें)
  2. (उदाहरण के लिए, अनुगामी स्थान, शीर्ष स्थान और पर्यवेक्षी बाधाओं के लिए अग्रणी स्थान) के लिए फिट होने के UILabelलिए बाधाओं का उपयोग करेंUIView

UIStackViewबाहर खिंचाव जाएगा UIViewठीक से फिट करने के लिए, और UIViewविवश होगा UILabelकई पंक्तियों के लिए।


36
यह बहुत बेवकूफ है लेकिन यह काम करता है! धन्यवाद दोस्त ! हो सकता है कि एक दिन Apple कुछ ऐसा रिलीज़ करे जो उनके SDK में आधा टूटे नहीं ...
Guillaume L.

1
ओह यार! आप एक रक्षक हैं! मैं घंटों तक इस पर रहा था :) याद रखें कि एट्रिब्यूट्स इंस्पेक्टर में 0 को भी सेट करें, बस गायब था।
फरमान

8
यह समाधान है, सही समाधान यहां है stackoverflow.com/a/43110590/566360
vietstone

2
मेरे लिए सिर्फ क्षैतिज संरेखण को केंद्र में बदलने के लिए पर्याप्त था। कोई UIViewshenanigans आवश्यक नहीं है।
शिम

1
@ ल्यूसीन यह वही है जो इस उत्तर में कहा गया था। लेकिन सही उत्तर यहाँ है: stackoverflow.com/a/43110590/566360
एंडी

144

एक क्षैतिज स्टैक दृश्य के लिए जिसका UILabelइंटरफ़ेस बिल्डर में सबसे पहले सेट किया गया है label.numberOfLines = 0। यह लेबल को 1 से अधिक लाइन की अनुमति देगा। यह शुरू में मेरे लिए काम करने में विफल रहा जब स्टैक दृश्य था stackView.alignment = .fill। यह काम करने के लिए बस सेट करें stackView.alignment = .center। लेबल अब कई लाइनों में विस्तारित हो सकता है UIStackView

एप्पल प्रलेखन कहते हैं

भरण संरेखण को छोड़कर सभी संरेखणों के लिए, स्टैक दृश्य प्रत्येक व्यवस्थित दृश्य के आंतरिक सामग्री आकार की संपत्ति का उपयोग करता है जब स्टैक के अक्ष के लंबवत आकार की गणना करता है

शब्द को छोड़कर यहां ध्यान दें । जब .fillउपयोग किया जाता है क्षैतिज UIStackViewव्यवस्थित उप-आकारों का उपयोग करके लंबवत रूप से स्वयं को आकार नहीं देता है।


3
यह बिना हैक्स के उचित समाधान है। डॉक्स पढ़ना हमेशा बंद रहता है!
इस्लाम Q.

3
यह स्वीकृत समाधान होना चाहिए। UIView वर्कअराउंड के साथ मेरे मामले में UILabel का टेक्स्ट एक और सबव्यू पर तैर गया।

14
यह वास्तव में काम नहीं करता है ... मेरे स्टैकव्यू में 3 लेबल हैं। मैंने लाइनों को शून्य और केंद्र में संरेखित करने के लिए सेट किया है ... मैं अभी भी देख रहा हूं कि लेबल कटे हुए हैं।
मैटरगोएल

11
यह .alignmentUIStackView का है जिसे आपको कुछ भी सेट करना है लेकिन UILabel .fill नहीं है, जो दिए गए उदाहरण में थोड़ा भ्रमित है label.alignment = .center। मुझे लगता है कि यह होना चाहिएstackView.alignment = .center
ae14

2
लेकिन मैं वर्टिकल स्टैक व्यू में कई लाइन्स UILableView कैसे काम कर सकता हूं?
डेचॉन

42
  • सबसे पहले लाइनों की लेबल संख्या 0 पर सेट करें
  • multiLineजब तक आप इसे एक निश्चित चौड़ाई नहीं देते तब तक स्टैक दृश्य नहीं बढ़ेगा । जब हम इसकी चौड़ाई को ठीक करते हैं तो यह उस चौड़ाई तक पहुँच जाता है जब उस चौड़ाई को दिखाया जाता है:

स्क्रीन रिकॉर्डिंग

यदि हम स्टैक दृश्य को एक निश्चित चौड़ाई नहीं देते हैं तो चीजें अस्पष्ट हो जाती हैं। लेबल के साथ स्टैक दृश्य कब तक बढ़ेगा (यदि लेबल मान गतिशील है)?

आशा है कि यह आपके मुद्दे को ठीक कर सकता है।


3
क्या होगा यदि स्टैक दृश्य की चौड़ाई तय नहीं है, बल्कि इसके बजाय उपकरण (यानी पर्यवेक्षण) की चौड़ाई के लिए आनुपातिक है।
आउटऑनवेकेंड

हां, हमारे पास आनुपातिक चौड़ाई भी हो सकती है। बिंदु यह है कि यदि लेबल को कुछ चौड़ाई के बाद तोड़ना है, लेकिन इसे परिभाषित करने की आवश्यकता है।
इरफान

आप निर्दिष्ट कर सकते @AnandKumar preferredMaxLayoutWidthमें viewDidLayoutSubviewsमें अपने लेबल के लिए UIViewControllerया में layoutSubviewsयदि आप उपवर्ग UIView
श्येनगिस कासिमोव

4
यह स्वीकृत उत्तर होना चाहिए था, स्टैकव्यू के पूरे बिंदु को स्टैकव्यू और इसके तत्वों के बीच अवरोधों को नहीं जोड़ना है ...
हनी

4
एक निश्चित मूल्य देने से ऑटोलैयूट का उद्देश्य पराजित होता है
इस्लाम Q.

17

तरजीही की स्थापना करना

self.myLabel.preferredMaxLayoutWidth = self.bounds.size.width;

3
यह मेरी पुस्तक में सही उत्तर है। जब आप कभी भी उइलैबेल के साथ गड़बड़ करते हैं और आपको कई लाइनों को संभालने की आवश्यकता होती है, तो आपको वास्तव में इसे एक पसंदीदा मैक्लोडआउट की आवश्यकता होती है। यह इसके बिना काम कर सकता है, लेकिन चीजें इसके बिना बहुत जल्दी कायरता प्राप्त कर सकती हैं।
मॉफ

2
सभी ने सभी जवाबों की कोशिश की और उनमें से सभी आपके अलावा गलत थे। धन्यवाद!
लेवन

इसने मेरी समस्या को पूरी तरह से हल कर दिया है और बहुत कम हैकी लगता है, धन्यवाद।
एथान झाओ

आपके उत्तर के लिए धन्यवाद! मेरे मामले में मेरे स्टैक व्यू का संरेखण पहले से ही सेट था .centerऔर मुझे वास्तव में UIView के अंदर अपने लेबल की आवश्यकता नहीं थी।
फ़रिज़ा ज़ुमैत

12

लेबल के लिए गुण निरीक्षक में लाइनों की संख्या को 0 पर सेट करें। यह आपके लिए काम करेगा।

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


12
वर्टिकल स्टैक व्यू के लिए, आपको इस काम के लिए डिस्ट्रीब्यूशन सेट को "फिल" में रखना होगा।
स्नूपीप्रोटोकॉल

2
डिस्ट्रीब्यूशन को "फिल" में सेट करना फिक्स की कुंजी है।
डायलन मूर

मैंने पाया कि एक ऊर्ध्वाधर UIStackView के लिए, मुझे एक बच्चे UILabel के लिए सभी पाठों का विस्तार करने और दिखाने के लिए शीर्ष और नीचे की बाधाओं को निर्धारित करना था।
ब्रूस १३३37

8

उपरोक्त सभी सुझावों की कोशिश करने के बाद, मुझे पता चला कि UIStackView के लिए कोई गुण परिवर्तन की आवश्यकता नहीं है। मैं केवल निम्नलिखित के रूप में UILabels के गुणों को बदलता हूं (लेबल पहले से ही एक ऊर्ध्वाधर स्टैक दृश्य में जोड़े जाते हैं):

स्विफ्ट 4 उदाहरण:

    [titleLabel, subtitleLabel].forEach(){
        $0.numberOfLines = 0
        $0.lineBreakMode = .byWordWrapping
        $0.setContentCompressionResistancePriority(UILayoutPriority.required, for: .vertical)
    }

5

मेरे लिए जादू की चाल एक सेट widthAnchorकरने के लिए थी UIStackView

सेटिंग leadingAnchorऔर trailingAnchorकाम नहीं करेगा, लेकिन सेटिंग centerXAnchorऔर widthAnchorUILabel को सही ढंग से प्रदर्शित किया।


4

iOS 9+

[textLabel sizeToFit]UILabel के टेक्स्ट को सेट करने के बाद कॉल करें।

sizeToFit तरजीही लेबल का पुनः उपयोग करेगा। लेबल स्टैक व्यू का आकार बदल देगा, जो सेल का आकार बदल देगा। स्टैक दृश्य को सामग्री दृश्य में पिन करने के अलावा कोई अतिरिक्त बाधा की आवश्यकता नहीं है।


4

यहां स्वचालित ऊंचाई के साथ UIStackViewमल्टीलाइन UILabelएस से बने ऊर्ध्वाधर का एक पूर्ण उदाहरण है ।

स्टैकव्यू की चौड़ाई के आधार पर लेबल लपेटते हैं और स्टैकव्यू की ऊंचाई लेबल की लिपटे ऊंचाई पर आधारित होती है। (इस दृष्टिकोण के साथ आपको लेबल को एम्बेड करने की आवश्यकता नहीं है UIView।) (स्विफ्ट 5, आईओएस 12.2)

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

// A vertical stackview with multiline labels and automatic height.
class ThreeLabelStackView: UIStackView {
    let label1 = UILabel()
    let label2 = UILabel()
    let label3 = UILabel()

    init() {
        super.init(frame: .zero)
        self.translatesAutoresizingMaskIntoConstraints = false
        self.axis = .vertical
        self.distribution = .fill
        self.alignment = .fill

        label1.numberOfLines = 0
        label2.numberOfLines = 0
        label3.numberOfLines = 0
        label1.lineBreakMode = .byWordWrapping
        label2.lineBreakMode = .byWordWrapping
        label3.lineBreakMode = .byWordWrapping
        self.addArrangedSubview(label1)
        self.addArrangedSubview(label2)
        self.addArrangedSubview(label3)

        // (Add some test data, a little spacing, and the background color
        // make the labels easier to see visually.)
        self.spacing = 1
        label1.backgroundColor = .orange
        label2.backgroundColor = .orange
        label3.backgroundColor = .orange
        label1.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi."
        label2.text = "Hello darkness my old friend..."
        label3.text = "When I wrote the following pages, or rather the bulk of them, I lived alone, in the woods, a mile from any neighbor, in a house which I had built myself, on the shore of Walden Pond, in Concord, Massachusetts, and earned my living by the labor of my hands only."
    }

    required init(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
}

यहां एक नमूना है ViewControllerजो इसका उपयोग करता है।

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let myLabelStackView = ThreeLabelStackView()
        self.view.addSubview(myLabelStackView)

        // Set stackview width to its superview.
        let widthConstraint  = NSLayoutConstraint(item: myLabelStackView, attribute: NSLayoutConstraint.Attribute.width, relatedBy: NSLayoutConstraint.Relation.equal, toItem: self.view, attribute: NSLayoutConstraint.Attribute.width, multiplier: 1, constant: 0)
        self.view.addConstraints([widthConstraint])
    }
}

3

UIStackViewगुण जोड़ें ,

stackView.alignment = .fill
stackView.distribution = .fillProportionally
stackView.spacing = 8.0
stackView.axis = .horizontal

इसके बदले लेबल जोड़ने की UIViewआवश्यकता नहीं है। यदि आप UITableViewCellकृपया अंदर का उपयोग कर रहे हैं , तो रोटेशन पर डेटा पुनः लोड करें।


3

निम्नलिखित एक लाइन ब्रेक के साथ मल्टी-लाइन लेबल का एक प्लेग्राउंड कार्यान्वयन है UIStackView। इसके UILabelअंदर कुछ भी एम्बेड करने की आवश्यकता नहीं है और Xcode 9.2 और स्विफ्ट 4 के साथ परीक्षण किया गया है। आशा है कि यह उपयोगी है।

import UIKit
import PlaygroundSupport

let containerView = UIView()
containerView.frame = CGRect.init(x: 0, y: 0, width: 400, height: 500)
containerView.backgroundColor = UIColor.white

var label = UILabel.init()
label.textColor = .black
label.numberOfLines = 0
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "This is an example of sample text that goes on for a long time. This is an example of sample text that goes on for a long time."

let stackView = UIStackView.init(arrangedSubviews: [label])
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.distribution = .fill
stackView.alignment = .fill
containerView.addSubview(stackView)
stackView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
stackView.widthAnchor.constraint(equalTo: containerView.widthAnchor).isActive = true
stackView.heightAnchor.constraint(equalTo: containerView.heightAnchor).isActive = true

PlaygroundPage.current.liveView = containerView

1

सिस्टम लेआउट को यह पूर्वावलोकन करने के लिए मूल, चौड़ाई और ऊंचाई का पता लगाना चाहिए, इस मामले में आपके सभी साक्षात्कारों में समान प्राथमिकता होती है, यह बिंदु संघर्ष करता है, लेआउट सिस्टम विचारों के बीच निर्भरता नहीं जानता है, जो पहले, दूसरे और इतने पर आकर्षित होता है

स्टैक उप-साक्षात्कार संपीड़न सेट करें कई लाइन के साथ समस्या का समाधान करेगा, आपके स्टैक दृश्य के आधार पर क्षैतिज या ऊर्ध्वाधर है और जिसे आप कई लाइनों बनना चाहते हैं। stackOtherSubviews .setContentCompressionResistancePriority(.defaultHight, for: .horizontal) lblTitle.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)


0

मेरे मामले में, मैंने पिछले सुझावों का पालन किया, लेकिन मेरा पाठ अभी भी एक ही पंक्ति में विभाजित हो रहा था, हालांकि केवल परिदृश्य में। पता चला, मुझे \0लेबल के पाठ में एक अदृश्य अशक्त चरित्र मिला, जो अपराधी था। इसे मेरे द्वारा डाले गए एम डैश के प्रतीक के साथ पेश किया गया होगा। यह देखने के लिए कि क्या आपके मामले में भी ऐसा हो रहा है, अपने लेबल का चयन करने के लिए डीबगर का उपयोग करें और उसके पाठ का निरीक्षण करें।


0

Xcode 9.2:

बस लाइनों की संख्या को 0. इसको सेट करने के बाद स्टोरीबोर्ड अजीब लगेगा। परियोजना चलाने की चिंता मत करो। सब कुछ चलाने के दौरान आपके स्टोरीबोर्ड सेटअप के अनुसार आकार बदल जाएगा। मुझे लगता है कि स्टोरीबोर्ड में इसकी तरह की बग है। यहाँ छवि विवरण दर्ज करें

टिप्स: अंतिम में "लाइनर की संख्या 0" पर सेट करें। जब आप कुछ अन्य दृश्य संपादित करना चाहते हैं और संपादन के बाद 0 पर सेट करना चाहते हैं, तो इसे रीसेट करें।

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


0

मेरे लिए क्या काम किया!

स्टैकव्यू: अलाइनमेंट: फिल, डिस्ट्रीब्यूशन: फिल, कंट्रास्ट आनुपातिक चौड़ाई टू सुपरविई एक्स। 0.8,

लेबल: केंद्र, और लाइनें = 0


0

जो अभी भी यह काम नहीं कर सकता किसी के लिए भी। उस UILabel पर एक न्यूनतम फ़ॉन्ट स्केल के साथ ऑटोश्रंक सेट करने का प्रयास करें।

स्क्रीनशॉट UILabel Autoshrink सेटिंग्स


एक कोड उदाहरण के साथ अपने उत्तर को बेहतर बनाने पर विचार करें।
1947

1
@fridoo सेटिंग्स का एक स्क्रीनशॉट जोड़ा गया।
मिकाल मोंडिस्क


0

मेरे लिए, मुद्दा यह था कि स्टैक दृश्य की ऊंचाई बस बहुत कम थी। लेबल और स्टैक दृश्य को ठीक से सेट किया गया था ताकि लेबल को कई लाइनें मिल सकें, लेकिन लेबल सामग्री संपीड़न का पहला शिकार था जिसका स्टैक दृश्य इसकी ऊंचाई को काफी छोटा करता था।

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