web-dev-qa-db-ja.com

UIStackViewの境界線を指定できますか？

UIStackViewsの境界線に5つの個別のViewControllerを指定しようとしています。それぞれにIBOutletを与え、viewDidLoadで呼び出してlayerプロパティを使用しましたが、役に立ちませんでした。プログラムでスタックビューに境界線を付けることはできませんか？

コード：

@IBOutlet weak var stackView1: UIStackView!
@IBOutlet weak var stackView2: UIStackView!
@IBOutlet weak var stackView3: UIStackView!
@IBOutlet weak var stackView4: UIStackView!
@IBOutlet weak var stackView5: UIStackView!

override func viewDidLoad() {
    super.viewDidLoad()

    stackView1.layer.borderWidth = 5
    stackView2.layer.borderWidth = 5
    stackView3.layer.borderWidth = 5
    stackView4.layer.borderWidth = 5
    stackView5.layer.borderWidth = 5   
}
swiftuistackview
22
pmoney13

残念ながら、これはできません。 UIStackViewは、（自動レイアウト制約を使用して）レイアウトを実行するが、それ自体を表示しない「非レンダリング」ビューであるという点で異常です。すべてのUIViewのようなレイヤーがありますが、無視されます。

「スタックビューの外観の管理」の the Apple doc を参照してください。

UIStackViewは、UIViewの非レンダリングサブクラスです。独自のユーザーインターフェイスは提供しません。代わりに、配置されたビューの位置とサイズを管理するだけです。その結果、いくつかのプロパティ（backgroundColorなど）はスタックビューに影響しません。同様に、layerClass、drawRect :、またはdrawLayer：inContext：をオーバーライドすることはできません。

26
Clafou

スタックビュー内のビューを境界線にすることでこれを行うことができます。これには多くの作業が必要になる可能性があり、機能しない、または回避する必要がある特定の状況が存在する可能性があるため、努力する価値はありません。水平方向と垂直方向の両方に境界線を提供できるように、スタックビューをネストする必要があります。 Bordered Stack Viewsブログ投稿 でこれについてさらに詳しく説明します。しかし、基本的には、通常のビューには選択した色に設定された背景があり、スタックビューの軸の方向に応じて高さまたは幅の制約を1に設定します。以下に、インターフェイスビルダーに組み込まれた2x2グリッドの完全な階層を示します。

view hierarchy

この結果は次のとおりです。

enter image description here

この例のgithubリポジトリへのリンク この例の場合、ストーリーボードファイルを見ることができます。

14
Korey Hinton

StackViewをUIView内に埋め込み、そのビューの境界（色、幅など）を設定し、stackViewをそのUIViewに上、左、右、高さのように制約できます。

8
Filip Raj

ここに私が見つけて使用した便利なコードの塊があります：

extension UIView {
    func addTopBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:0,y: 0, width:self.frame.size.width, height:width)
        self.layer.addSublayer(border)
    }

    func addRightBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x: self.frame.size.width - width,y: 0, width:width, height:self.frame.size.height)
        self.layer.addSublayer(border)
    }

    func addBottomBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:0, y:self.frame.size.height - width, width:self.frame.size.width, height:width)
        self.layer.addSublayer(border)
    }

    func addLeftBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:0, y:0, width:width, height:self.frame.size.height)
        self.layer.addSublayer(border)
    }

    func addMiddleBorderWithColor(color: UIColor, width: CGFloat) {
        let border = CALayer()
        border.backgroundColor = color.cgColor
        border.frame = CGRect(x:self.frame.size.width/2, y:0, width:width, height:self.frame.size.height)
        self.layer.addSublayer(border)
    }
}

このようなビューで使用するだけです：

bottomControls.addMiddleBorderWithColor(color: buttonBorderColor, width: 3.0)

ソース： IButtonにTOPボーダーのみを追加する方法

1
devpreneur

それを行う最も簡単な方法は、境界線を表すために高さ/幅が1に等しいラベルまたはビューを使用しないことであると思います。つまり、スタックビュー自体のSPACING属性を使用するよりも簡単ですあなたのスタックとその物質を満たしてから、外側の垂直スタックに1つのスペースを作り、内側の水平スタックに1つのスペースを作り、完璧な結果を得る。最後に、外側のstckviewの背景ビューを使用してこれを維持した境界線に特定の色を与えるために、境界線にしたい背景色とスタックのような同じ制約があります。スタック、それは：D、添付画像のように結果を親切に確認し、はっきりしないものがあれば教えてください enter image description here

0
IsPha

他の人が示したように、これを行うことはできません（詳細については、Clafouの回答を参照してください）。

ただし、できることは、スタックビューを別のUIViewに埋め込むことです。囲んでいるUIViewのレイヤーを変更します。

0
Spencer Hall