UI 스택 뷰의 다중 선 레이블

UI 스택 뷰의 다중 선 레이블

여러 줄 레이블(줄 바꿈이 Word Wrap으로 설정됨)을 스택 뷰에 배치하면 레이블은 줄 바꿈을 즉시 잃고 대신 레이블 텍스트를 한 줄로 표시합니다.

이러한 현상이 발생하는 이유는 무엇이며 스택 뷰 내에서 다중 행 레이블을 어떻게 보존합니까?

정답은 다음과 같습니다.
https://.com/a/43110590/566360https ://stackoverflow.com/a/43110590/566360

---

1. 을 합니다.UILabel富士山의 UIView> (편집자주 -> 편집자)
2. 조건을 하여 약제조적합여사하에 .UILabel에▁UIView 공간,맨공간 및 조건에

그UIStackView확장할 것입니다.UIView 적하게들고맞어고그, 리절고▁to.UIView는 할것다니입제약을 구속합니다.UILabel여러 줄로.

수평 스택 뷰의 경우 다음과 같이 표시됩니다.UILabel중 로, 뷰중하나로, 페이빌먼설다저니정됩더서스에를 설정합니다.label.numberOfLines = 0이렇게 하면 레이블에 줄이 하나 이상 있어야 합니다.스택 뷰가 다음과 같을 때 처음에는 이것이 작동하지 않았습니다.stackView.alignment = .fill하려면 간히설할수있다니습정단▁set다니를 설정하면 .stackView.alignment = .center 레이블은 이레이을여줄확수있다습니장할 에서 여러 될 수 .UIStackView.

애플 문서에는 다음과 같이 나와 있습니다.

채우기 선형을 제외한 모든 선형에 대해 스택 뷰는 스택 축에 수직인 크기를 계산할 때 각 정렬 뷰의 고유한 ContentSize 특성을 사용합니다.

여기를 제외하고는 그 단어를 주목하세요.언제.fill사용됩니다. 사, 수UIStackView정렬된 하위 뷰의 크기를 사용하여 수직으로 크기를 조정하지 않습니다.

• 먼저 라인 수를 0으로 설정합니다.
• 스택 보기는 여전히 다음과 같이 증가하지 않습니다.multiLine당신이 그것을 고정된 너비로 주지 않는 한.너비를 수정하면 다음과 같이 너비에 도달하면 여러 줄로 분할됩니다.

스택 뷰에 고정된 너비를 지정하지 않으면 상황이 모호해집니다.스택 뷰가 레이블과 함께 증가하는 시간은 얼마나 됩니까(라벨 값이 동적인 경우)?

문제가 해결되기를 바랍니다.

위의 모든 제안을 시도해 본 결과 UISackView에 대한 속성 변경이 필요하지 않습니다.다음과 같이 UILabel의 속성을 변경하면 됩니다(레이블은 이미 수직 스택 뷰에 추가되었습니다).

Swift 4 예:

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

UI 레이블에 기본 MaxLayoutWidth를 설정하는 것이 효과적이었습니다.

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

레이블에 대한 속성 검사기에서 줄 수를 0으로 설정하기만 하면 됩니다.당신에게 효과가 있을 겁니다.

2020년 11월 26일, Xcode 12.2, iOS 14.2.다음은 수직 스택 뷰에 대한 작업입니다.모든 장치와 시뮬레이터에서 작동합니다.저는 스토리보드를 사용하며 이 모든 값은 스토리보드에 설정되어 있습니다.

UI 레이블

선: 0

UI 스택 보기

선형: 채우기

분포:비례 채우기

UILabel은 뷰에 내장되어 있으며 UIView의 모든 측면에 고정되어 있습니다.

iOS 9+

러[textLabel sizeToFit]UILabel의 텍스트를 설정한 후.

sizeToFit은 기본 MaxWidth를 사용하여 다중 라인 레이블을 다시 레이아웃합니다.레이블이 스택 뷰의 크기를 조정하고 셀의 크기를 조정합니다.스택 보기를 내용 보기에 고정하는 것 외에 추가 제약 조건이 필요하지 않습니다.

제가 마술을 부린 것은widthAnchor에▁UIStackView.

정leadingAnchor그리고.trailingAnchor작하지않설정만지동설정▁woncenterXAnchor그리고.widthAnchorUI 레이블이 올바르게 표시되도록 했습니다.

여기 수직선의 완전한 예가 있습니다.UIStackView 줄로 UILabel자동 높이의 s.

뷰의 (이을 뷰스너이스감다니습을레블이. (근접방서는레포필없다함요니습가할을이블에식으로준택기를이의높비와택뷰의)이▁(▁the▁the▁a없▁is▁you다니▁in'습▁don▁labelswith▁())에 포함시킬가 없습니다.UIView.) (Swift 5, iOS 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])
    }
}

더하다UIStackView 추가 정보.

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

내부에 레이블을 추가하는 대신UIView필요하지 않습니다.를 하는 경우.UITableViewCell회전 시 데이터를 다시 로드하십시오.

은 Playground에서 줄 줄 입니다.UIStackView내장할 필요가 없습니다.UILabel 9 4Xcode 9.2로 되었습니다.도움이 되길 바랍니다.

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

시스템 레이아웃은 하위 뷰를 그리기 위해 원점, 너비 및 높이를 파악해야 합니다. 이 경우 모든 하위 뷰는 우선 순위가 같고, 점이 충돌하며, 레이아웃 시스템은 뷰 간 종속성을 알지 못합니다. 즉, 첫 번째, 두 번째 등을 그립니다.

스택 하위 뷰 설정 압축은 스택 뷰가 수평 또는 수직이고 여러 선이 될 것인지에 따라 여러 선의 문제를 해결합니다. stackOtherSubviews .setContentCompressionResistancePriority(.defaultHight, for: .horizontal) lblTitle.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)

저한테는 효과가 있었어요. (스위프트 5)

let label = UILabel()
label.numberOfLines = 0
label.text = text  // text defined somewhere
label.font = font  // font defined somewhere
let height = text.height(forConstrainedWidth: stackView.width, font: font)
label.heightAnchor.constraint(equalToConstant: height).isActive = true

그러면 이▁your▁this다▁add▁to에 추가하면 .stackView와 함께addArrangedSubview.

저의 경우, 저는 이전 제안을 따랐지만, 제 텍스트는 여전히 풍경에서만 한 줄로 잘리고 있었습니다.알고 보니, 보이지 않는 것을 발견되었습니다.\0라벨의 텍스트에 있는 null 문자가 원인입니다.그것은 제가 삽입한 엠 대시 기호와 함께 도입된 것이 틀림없습니다.이 경우에도 이러한 현상이 발생하는지 확인하려면 View Debugger(보기 디버거)를 사용하여 레이블을 선택하고 텍스트를 검사합니다.

내게 효과가 있었던 것!

스택 뷰: 선형: 채우기, 분포: 채우기, 수퍼뷰에 비례하는 너비에 대한 구속조건 0.8,

레이블: 중심 및 선 = 0

s , 은 여러분의 @Andy's Answer와 @Andy's Answer를 할 수 UILabelUIStackview수직적으로 일했습니다.

저에게 문제는 스택 뷰의 높이가 너무 짧다는 것이었습니다.레이블과 스택 뷰는 레이블이 여러 줄을 가질 수 있도록 올바르게 설정되었지만, 레이블은 스택 뷰가 충분히 작은 높이를 얻기 위해 사용한 내용 압축의 첫 번째 희생자였습니다.

스토리보드 또는 XIB 파일을 사용하여 수평 스택 뷰에 UI 레이블을 포함하려는 경우 스택 뷰가 생성되기 전에 스택 뷰에 넣을 어떤 제약 조건도 추가하지 마십시오.이로 인해 오류가 발생하거나 텍스트를 래핑할 수 없습니다.

대신 Andy와 pmb가 제안한 사항에 추가하여 이를 수행합니다.

1. 함을 합니다.UILabelUIView.
2. 트UILabel=165 = 0.
3. 스택 뷰를 만듭니다.
4. 스택 뷰 정렬을 위쪽/아래쪽/가운데로 설정합니다.
5. 스택 뷰 내의 요소에 구속조건을 추가합니다.

이 작업 순서가 왜 차이를 만드는지는 잘 모르겠지만, 차이가 있습니다.

이 페이지에서 대부분의 답변을 시도한 후, 저는 UISackView를 전혀 사용하지 않는 것이 해결책이었습니다.

저는 제가 그것이 정말로 필요하지 않다는 것을 깨달았고 단지 습관적으로 그것을 사용하고 있었고, UIView로 같은 일을 할 수 있었습니다.

여전히 작동하지 못하는 사람들을 위한 것입니다.해당 UILabel에서 최소 글꼴 크기로 자동 축소를 설정합니다.

스크린샷 UILabel 자동 축소

특성이 있는 레이블에 사용할 수 있습니다."\n"과 관련 줄 수가 "\n"인 텍스트

언급URL : https://stackoverflow.com/questions/34386528/multiline-label-in-uistackview