2016-10-13 35 views
0

我想創建的標籤居中列表,沿此線爲中心的名單,但中心:斯威夫特:擴展UIStackView創建的標籤

Tags

圖片來源:http://blog.gqueues.com/2013/07/android-vs-ios-comparing-development.html

我認爲這樣做的一個好方法是擴展UIStackView,這樣我可以通過'addData'函數來完成創建視圖並將其添加到堆棧的過程。這裏是到目前爲止的代碼:

進口基金會 進口的UIKit

class DataView: UIStackView { 
    func addData(_ data: String) { 
     let view = UIView() 
     let label = UILabel() 
     view.backgroundColor = UIColor.blue 
     label.textColor = UIColor.white 
     label.text = data 
     label.sizeToFit() 
     view.frame.size = label.frame.size 
     view.addSubview(label) 
     self.addArrangedSubview(view) 
    } 
} 

不幸的是,這並不完全正確。我可以通過堆棧視圖來顯示項目的唯一方法是在寬度或左側和右側設置約束來強制寬度。我還需要將堆棧視圖設置設置爲對齊:填充和分佈:同樣填充以查看它們中的任何一個。

Stack view showing items filled equally

我 沒有任何人有任何想法我怎麼可以在這裏得到一個更好的結果?

回答

3

最終,解決這個問題的關鍵是指定每個視圖的寬度,並使用自動佈局來標記標籤。最後,我需要計算總寬度,以便將UIStackView的模式設置爲「分佈:等間距」,這些項目將被適當地分隔開。這是我的最終代碼:

import Foundation 
import UIKit 

class DataView: UIStackView { 
    var widthRequired = CGFloat() 

    func addData(_ data: String) { 
     let view = UIView() 
     let label = UILabel() 
     label.font = uifont_notification 
     view.backgroundColor = uicolor_verylight 
     label.textColor = uicolor_dark 
     label.text = data 
     label.textAlignment = .center 
     label.sizeToFit() 
     view.addSubview(label) 
     widthRequired = label.frame.width + widthRequired + 24 
     label.translatesAutoresizingMaskIntoConstraints = false 
     view.translatesAutoresizingMaskIntoConstraints = false 
     let labelView = ["label" : label] 
     let formatString = "H:|-[label]-|" 
     let formatStringV = "V:|-[label]-|" 
     let outerView = ["view" : view] 
     let formatStringW = "[view(==\(label.frame.width + 20))]" 
     let constraintH = NSLayoutConstraint.constraints(withVisualFormat: formatString, options:.alignAllCenterX , metrics: nil, views: labelView) 
     let constraintV = NSLayoutConstraint.constraints(withVisualFormat: formatStringV, options:.alignAllCenterX , metrics: nil, views: labelView) 
     let constraintW = NSLayoutConstraint.constraints(withVisualFormat: formatStringW, options:.alignAllCenterX , metrics: nil, views: outerView) 
     NSLayoutConstraint.activate(constraintH) 
     NSLayoutConstraint.activate(constraintV) 
     NSLayoutConstraint.activate(constraintW) 
     view.layer.cornerRadius = 4 
     self.addArrangedSubview(view) 
     label.setNeedsLayout() 
    } 
} 

像這樣來使用,一個collectionView cellForItemAt功能

cell.itemData.addData("One") 
cell.itemData.addData("Two") 
cell.itemData.addData("Three") 
cell.itemDataWidth.constant = cell.itemData.widthRequired // The width of the `UIStackView` constraint as a @IBOutlet in the custom cell 

希望幫助別人之內。以下是使用時的最終圖像:

Showing the UIStackView extension in use