2015-11-02 14 views
10

Chcę dodać kilka etykiet wieloliniowych do UIStackView.UIStackView i ucięty Multiline UILabels

Ale zawsze kończy się, że moje etykiety są obcinane. Jak widać na tym zrzucie truncated as it is

Ale chciałbym mieć go więcej, jak pokazano tutaj (mój sfałszowane Screenshot) truncated as it should be

Oto mój kod. Najpierw utwórz StackView rodzic/Master, umieścić go w Scrollview (który jest schowany do ekranu)

stackView = UIStackView() 
    stackView.axis = .Vertical 
    stackView.distribution = .Fill 
    stackView.spacing = 2 
    stackView.translatesAutoresizingMaskIntoConstraints = false 
    scrollView.addSubview(stackView) 
    NSLayoutConstraint.activateConstraints(stackConstraints) 


    let s1 = createHeaderStackView() 
    stackView.insertArrangedSubview(s1, atIndex: 0) 

    let lbl2 = makeLabel() 
    lbl2.text = "Second One" 
    stackView.insertArrangedSubview(lbl2, atIndex: 1) 

    scrollView.setNeedsLayout() 

podczas makeLabel i makeButton są tylko pomocnicze funkcje

func makeButton() -> UIButton { 
    let btn = UIButton(type: .Custom) 
    btn.backgroundColor = UIColor.lightGrayColor() 
    return btn 
} 

func makeLabel() -> UILabel { 
    let lbl = UILabel() 
    lbl.font = UIFont.systemFontOfSize(18) 
    lbl.setContentCompressionResistancePriority(1000, forAxis: .Vertical) 
    lbl.setContentHuggingPriority(10, forAxis: .Vertical) 
    lbl.preferredMaxLayoutWidth = scrollView.frame.width 
    lbl.numberOfLines = 0 
    lbl.textColor = UIColor.blackColor() 
    lbl.backgroundColor = UIColor.redColor() 
    return lbl 
} 

Sposób createHeaderStackView jest skonfigurowanie mój StackView, aby umieścić w StackView wszystkie moje nagłówki.

func createHeaderStackView() -> UIStackView { 
    let lblHeader = makeLabel() 
    lblHeader.text = "UIStackView" 
    lblHeader.textAlignment = .Center 

    let lblInfo = makeLabel() 
    lblInfo.text = "This is a long text, over several Lines. Because why not and am able to to so, unfortunaltey Stackview thinks I'm not allowed." 
    lblInfo.textAlignment = .Natural 
    lblInfo.layoutIfNeeded() 

    let lblInfo2 = makeLabel() 
    lblInfo2.text = "This is a seconds long text, over several Lines. Because why not and am able to to so, unfortunaltey Stackview thinks I'm not allowed." 
    lblInfo2.textAlignment = .Natural 
    lblInfo2.layoutIfNeeded() 

    let btnPortal = makeButton() 
    btnPortal.setTitle("My Button", forState: .Normal) 
    btnPortal.addTarget(self, action: "gotoPushWebPortalAction", forControlEvents: .TouchUpInside) 

    let headerStackView = UIStackView(arrangedSubviews: [lblHeader, btnPortal, lblInfo, lblInfo2]) 
    headerStackView.axis = .Vertical 
    headerStackView.alignment = .Center 
    headerStackView.distribution = .Fill 
    headerStackView.spacing = 2 
    headerStackView.setContentCompressionResistancePriority(1000, forAxis: .Vertical) 
    headerStackView.setContentHuggingPriority(10, forAxis: .Vertical) 
    headerStackView.setNeedsUpdateConstraints() 
    headerStackView.setNeedsLayout() 
    //headerStackView.layoutMarginsRelativeArrangement = true 
    return headerStackView 
} 

tak aby długie opowiadanie: Co jest potrzebne, aby dostosować swoje stackviews, więc każdy stackview i dlatego etykieta jest pokazany w pełnym rozmiarze chwalebne? Próbowałem kompresować i przytulać wszystko, ale wydawało się, że to nie działa. I googlowania uistackview uilabel multiline truncated wydaje się być ślepy zaułek, zbyt

Doceniam jakiejkolwiek pomocy, pozdrowienia Flori

+1

Jak pokazano na http://stackoverflow.com/questions/34386528/multiline-label-in-uistackview/34430212#34430212, kluczem jest ustawienie stałej szerokości dla widoku stosu w celu nadania wielowierszowej etykiecie czegoś wpaść i stać się multi-line. – GlennRay

+1

@SpaceDog imho nie są źle zaplanowane, ale mają inną logikę niż inne kontrolki, co wymaga innego sposobu myślenia w przypadku bardziej złożonych układów, szczególnie z powodu zasad wypełniania –

Odpowiedz

0

Musisz podać wymiary widoku stosu. Etykieta nie "przepełni się" w następnej linii, jeśli wymiary widoku stosu są niejednoznaczne.

Ten kod nie jest dokładnie wyjście tylko chcesz, ale dostaniesz pomysł:

override func viewDidLoad() { 
    super.viewDidLoad() 
    let stackView = UIStackView() 
    stackView.axis = .Vertical 
    stackView.distribution = .Fill 
    stackView.translatesAutoresizingMaskIntoConstraints = false 
    view.addSubview(stackView) 
    let views = ["stackView" : stackView] 
    let h = NSLayoutConstraint.constraintsWithVisualFormat("H:|-50-[stackView]-50-|", options: [], metrics: nil, views: views) 
    let w = NSLayoutConstraint.constraintsWithVisualFormat("V:|-100-[stackView]-50-|", options: [], metrics: nil, views: views) 
    view.addConstraints(h) 
    view.addConstraints(w) 
    let lbl = UILabel() 
    lbl.preferredMaxLayoutWidth = stackView.frame.width 
    lbl.numberOfLines = 0 
    lbl.text = "asddf jk;v ijdor vlb otid jkd;io dfbi djior dijt ioure f i;or dfuu;nfg ior mf;drt asddf jk;v ijdor vlb otid jkd;io dfbi djior dijt ioure f infg ior mf;drt asddf jk;v ijdor vlb otid jkd;io dfbi djior dijt ioure f i;or dfuu;nfg ior mf;drt " 
    dispatch_async(dispatch_get_main_queue(), { 
     stackView.insertArrangedSubview(lbl, atIndex: 0) 
    }) 
} 
0

Należy spróbować tego na storyboard. ustaw wysokość stosu jako równą 60% lub 70% widoku.

Ustaw mnożnik jako 0,6 lub 0,7.

See here

1

Zgodnie wiem Jeśli używasz tego wewnątrz UITableViewCell następnie każdy obrót trzeba przeładować tableView. Możesz użyć stackView.distribution = .fillProporcjonalnie będzie działać poprawnie.