Programowo dodawaj subviews do UIStackView

Question

Próbuję zaimplementować komórkę widoku tabeli, która wyświetla serię ikon reprezentujących udogodnienia domowe (np. Ręczniki, wifi, pranie itp.). Komórka może potencjalnie wyświetlać wiele udogodnień (w zależności od tego, ile ma domu), więc wyświetlam maksymalnie trzy i wskazuję, że możesz wyświetlić więcej, klikając komórkę, jeśli jest ich więcej niż trzy. Oto, co powinno wyglądać (z aplikacji Airbnb za):

Próbuję zrobić to przez dynamiczne dodawanie UIImageViews do UIStackView w komórce widoku tabeli. Używam UIStackView z wyrównaniem ustawionym na "Fill" i dystrybucją ustawionym na "Equal spacing", co oznacza, że ​​widok stosu będzie równomiernie rozmieszczać ikony bez względu na to, ile dodam do niego.

Konfiguruję widok stosu w Storyboard. Ma ograniczenia do górnego, dolnego, lewego i prawego marginesu jego widoku treści, tak że wypełnia komórkę widoku tabeli, aż do marginesów.

Oto kod, którego używam, aby spróbować dynamicznie dodawać UIImageViews do komórki. Uwaga amenities jest tablicą ciągów równa nazw ikon w folderze mój obraz aktywów:

 cell.stackView.backgroundColor = UIColor.greenColor() 
     var i = 0 
     while (i < amenities.count && i < 4) { 
      if (i < 3) { 
       let imageView = UIImageView(image: UIImage(named: amenities[i])) 
       imageView.contentMode = .ScaleAspectFit 
       imageView.translatesAutoresizingMaskIntoConstraints = false 
       imageView.backgroundColor = UIColor.blueColor() 

       // Add size constraints to the image view 
       let widthCst = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 50) 
       imageView.addConstraint(widthCst) 

       // Add image view to stack view 
       cell.stackView.addSubview(imageView) 
      } else { 
       // Add a label to the stack view if there are more than three amenities 
       let label = UILabel() 
       label.text = "\(amens.count - i) more" 
       label.textAlignment = NSTextAlignment.Left 
       cell.stackView.addSubview(label) 
      } 
      i++ 
     } 

Tła poglądów graficznych są niebieskie, a kolor tła widoku stosu jest zielony. Oto wynik, dla przypadku, gdy dom ma trzy udogodnienia:

wygląda wszystkie widoki graficzne są pchane na szczycie siebie po lewej stronie ekranu. Ponadto wypełniają widok zawartości komórki od góry do dołu, mimo że widok stosu jest przypięty do marginesów widoku treści. Nie widać zieleni, więc wygląda na to, że widok stosu nie jest przypięty do marginesów komórki.

Każdy pomysł, co jest nie tak?

Answer 1

Jak powiedział Dan w komentarzach, użyj addArrangedSubview, aby dodać wyskakujące, które będą automatycznie układane przez UIStackView.

Pamiętaj jednak, że jeśli usuniesz widok z tablicy arrangedSubviews na UIStackView, to będzie to , a następnie. Z dokumentacji UIStackView:

Widok stosu zapewnia, że ​​jego właściwość zaaranżowanych widoków jest zawsze podzbiorem właściwości podrzędnych. W szczególności widok stosu wymusza następujące reguły:

• Gdy widok stosu dodaje widok do swojej tablicy rozmieszczonych widoków, dodaje ten widok również jako widok podrzędny, jeśli jeszcze nie jest.

• Po usunięciu widoku podrzędnego z widoku stosu, widok stosu usuwa go również z tablicy aranżowanych widoków.

• Usunięcie widoku z tablicy arranSubviews nie powoduje usunięcia go jako widoku podrzędnego. Widok stosu nie zarządza wielkością i pozycją widoku, ale widok jest nadal częścią hierarchii widoku i jest renderowany na ekranie, jeśli jest widoczny.

Zawsze dobrze jest zacząć od dokumentacji.