web-dev-qa-db-ja.com

自動レイアウトを使用して全幅のパーセンテージを作成する方法は？

3つの動的な列を作成する必要があります。それぞれの列の幅の割合は固定されています。サードではなく、異なる値。たとえば、次の図は3つの列を示しています。最初の列は幅42％、2番目は幅25％、3番目は幅33％です。

ビューコントローラー全体で600ピクセルの場合、それぞれ252、150、198ピクセルになります。

ただし、以降のディスプレイサイズ（つまり、iPhone 4の横（960幅）またはiPad 2の縦（768幅））については、相対的な割合を同じにしたいと思います（上記のピクセル幅ではありません）。

ストーリーボードを使用してこれを行う方法はありますか（コードなし）？これはコードで簡単に行うことができますが、私の目標は、この表示ロジックをできるだけストーリーボードに入れることです。

enter image description here

iosxcodeautolayout
106
Jeffrey Berthiaume

あなたが言うように、あなたがコードでそれを行う方法を知っているなら、あなたはすでにストーリーボードでそれを行う方法を知っています。まったく同じ制約ですが、コードではなく視覚的に作成しています。

  1. ビューとそのスーパービューの両方を選択します。

  2. [エディタ]-> [ピン]-> [幅を等しく]を選択して、スーパービューの幅と等しくなるように幅を制限します（実際には、キャンバスの下部にある[ピン]ポップアップダイアログが最適です）。

  3. 制約を編集し、乗数を目的の分数に設定します。 0.42。他のビューについても同様です。

195
matt

AppleがIStackViewを導入するので、作業が非常に簡単になりました。

方法1：ペン先/ストーリーボードを使用する：

インターフェイスビルダーに3つのビューを追加し、それらをstackviewに埋め込むだけです。

Xcode►エディター►埋め込み►StackView

enter image description here

StackViewを選択し、safeAreaを使用して先頭、末尾、上部、等しい高さに制約を与えます

クリックして属性インスペクターエリア＆StackViewの水平方向と分布を比例的に設定します

[enter image description here

3つのビューの制約を、それぞれの側で先頭、末尾、上部、下部に与えます。 enter image description here

方法2：プログラム：

import UIKit
class StackViewProgramatically: UIViewController {
    var propotionalStackView: UIStackView!
    ///Initially defining three views
    let redView: UIView = {
        let view = UIView()//taking 42 % initially
        view.frame = CGRect(x: 0, y: 0, width: 42 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
        view.backgroundColor = .red
        return view
    }()

    let greenView: UIView = {
        let view = UIView()//taking 42* initially
        view.frame = CGRect(x: 42 * UIScreen.main.bounds.width/100, y: 0, width: 25 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
        view.backgroundColor = .green
        return view
    }()
    let blueView: UIView = {
        let view = UIView()//taking 33*initially
        view.frame = CGRect(x: 67 * UIScreen.main.bounds.width/100, y: 0, width: 33 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
        view.backgroundColor = .blue
        return view
    }()

    ///Changing UIView frame to supports landscape mode.
    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        DispatchQueue.main.async {
            self.redView.frame = CGRect(x: 0, y: 0, width: 42 * self.widthPercent, height: self.screenHeight)
            self.greenView.frame = CGRect(x: 42 * self.widthPercent, y: 0, width: 25 * self.widthPercent, height: self.screenHeight)
            self.blueView.frame = CGRect(x: 67 * self.widthPercent, y: 0, width: 33 * self.widthPercent, height: self.screenHeight)
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        //Adding subViews to the stackView
        propotionalStackView = UIStackView()
        propotionalStackView.addSubview(redView)
        propotionalStackView.addSubview(greenView)
        propotionalStackView.addSubview(blueView)
        propotionalStackView.spacing = 0
        ///setting up stackView
        propotionalStackView.axis = .horizontal
        propotionalStackView.distribution = .fillProportionally
        propotionalStackView.alignment = .fill
        view.addSubview(propotionalStackView)
    }
}
//MARK: UIscreen helper extension
extension NSObject {

    var widthPercent: CGFloat {
        return UIScreen.main.bounds.width/100
    }

    var screenHeight: CGFloat {
        return UIScreen.main.bounds.height
    }
}

出力：

風景とポートレートに対応

enter image description hereenter image description here

デモプロジェクト- https://github.com/janeshsutharios/UIStackView-with-constraints

https://developer.Apple.com/videos/play/wwdc2015/218/

9
Jack

これはより詳細に説明できるので、スーパービュー内の固定割合レイアウトを必要とする任意の数のビューにより簡単に適用できると思います。

左端のビュー

  • SuperView.Leadingに固定されています
  • SuperView.Heightの乗数として固定パーセンテージを定義します

中間ビュー

  • SuperView.Heightの乗数として固定パーセンテージを定義します
  • leftを隣人の権利に固定します

右端のビュー

  • 固定パーセンテージを定義しません（利用可能なビューの残りの部分です）
  • leftを隣人の権利に固定します
  • rightをSuperView.Trailingに固定します

すべてのビュー

  • Top Layout Guide.TopおよびTop Layout Guide.bottomに固定して、固定されていない高さを定義します。上記の答えでは、隣接するビューに同じ高さを設定することでもこれを実行できることに注意してください。
4
JuJoDi