web-dev-qa-db-ja.com

swift:プログラムで、UILabelの固定幅を作成し、テキストの長さに応じて垂直方向にサイズを変更します

自動レイアウトを含む垂直方向のサイズ変更への回答を見てきましたが、作成しているUILabelsは実行時にのみ必要です。 (ゼロからこれらのラベルの多くまで必要になるかもしれません。)

例(色は無視してください)

  1. 短いテキスト(長いテキストと同じ幅に注意):

enter image description here

  1. 長いテキスト(追加テキストの行数が多い短いテキストの例と同じ幅に注意してください):

enter image description here

テキストが固定幅の1行に収まる場合、ラベルを垂直方向にサイズ変更する必要はありません。ただし、さらに文字がある場合、ラベルはこれらの追加の文字に合わせて垂直方向に拡大し続ける必要があります。テキストは行ごとに折り返し続ける必要があります。テキストはラベルの左上隅から開始する必要があります。

具体的には:

let marker = GMSMarker(position: myLatLng)
// see http://stackoverflow.com/a/40211383/1168364 for imageWithView
marker.icon = imageWithView(label) // **how do i create this label?**
marker.map = map // map is a GMSMapView

これらのラベルは画面のどこにでも配置できます。これは、各ラベルがランダムな場所に配置されるマップアプリケーション用です。ラベルの場所は互いに関係がありません。

9
lf215

UIViewには2つの便利なメソッドがあります:sizeToFit()およびsizeThatFits(_:)

1つ目はサブビューのコンテンツに合わせてビューのサイズを最小に変更し、2つ目はフレームをまったく変更しませんが、(1)すべてのサブビューにフィットし、(2)パラメータsizeを超えない計算サイズを返します

したがって、目的に応じてsizeThatFitsを使用できます。

let label = UILabel()

override func viewDidLoad() {
    super.viewDidLoad()

    label.backgroundColor = UIColor.orange
    label.textColor = UIColor.white
//  label.text = "ultimate Frisbee"
    label.text = "ultimate Frisbee\nin 3 minutes,\nall welcome|2"
    label.numberOfLines = 10
    view.addSubview(label)

    updateLabelFrame()
}

func updateLabelFrame() {
    let maxSize = CGSize(width: 150, height: 300)
    let size = label.sizeThatFits(maxSize)
    label.frame = CGRect(Origin: CGPoint(x: 100, y: 100), size: size)
}

出力:

enter image description hereenter image description here

追伸自動レイアウト制約を使用して問題を解決することもできますが、私はそれらをプログラムで使用することはあまり好きではありません。

12
alexburtnik

ラベルのnumberOfLinesプロパティをゼロに設定し、制約を使用してラベルの幅を修正します(幅を明示的に制約するか、リーディングエッジとトレーリングエッジをラベルのスーパービューなどの他のビューに制約します)。その後、ラベルはテキストに合わせた高さに自動的に垂直方向にサイズ変更されます。ビューシステムがレイア​​ウトの開始位置を認識できるように、上部の制約を介して1つのラベルを固定する必要があります。その後、他のすべてのラベルの上部を前のラベルの下部に制限する必要があります。このようにして、それらはすべて前のラベルの高さを基準にしてレイアウトします。

コメントに応じて編集:

IOS 9以降では、widthAnchorプロパティを使用してビューの幅を明示的に設定できます。 NSLayoutConstraintsを使用して、古いiOSバージョンで設定できます(検索SO)。

例えば。:

label.widthAnchor.constraintEqualToConstant(50.0).active = true

これにより、ラベルの幅が50ポイント幅に設定されますが、高さは固定されないため、numberOfLines = 0その後、テキストを設定すると、ラベルは垂直方向に自動サイズ変更されます。

1
par