web-dev-qa-db-ja.com

StoryViewを使用してUIViewをマスクし、角を丸くしますか？

たくさんの質問 このように マスクをプログラムで作成し、UIViewに角を丸くする方法を説明します。

ストーリーボード内ですべてを行う方法はありますか？ストーリーボードで丸い角を作成するように思えるので、質問するだけで、プレゼンテーションとロジックの境界が明確になります。

iosxcodeswiftstoryboardautolayout
86
Crashalot

はい、私はそれをたくさん使いますが、このような質問はすでに何度も答えられました。

しかし、とにかくInterface Builderでは。次のようなユーザー定義のランタイム属性を追加する必要があります。

layer.masksToBounds Boolean YES
layer.cornerRadius Number {View's Width/2}

enter image description here

そして有効にする

Clips subviews

enter image description here

結果：

enter image description here

232
Woraphot Chokratanasombat

ユーザー定義のプロパティを使用して、ストーリーボードでそれを行うことができます。丸めたいビューを選択し、そのアイデンティティインスペクターを開きます。 ユーザー定義のランタイム属性セクションで、次の2つのエントリを追加します。

  • キーパス：layer.cornerRadius、タイプ：数値、値：（必要な半径）
  • キーパス：layer.masksToBounds、タイプ：ブール、値：チェック

ビューの対応するクラスファイル（存在する場合）にQuartzKitをインポートする必要があるかもしれませんが、それをせずに動作するようになったことを誓います。結果は異なる場合があります。

編集：動的半径の例

extension UIView {

    /// The ratio (from 0.0 to 1.0, inclusive) of the view's corner radius
    /// to its width. For example, a 50% radius would be specified with
    /// `cornerRadiusRatio = 0.5`.
    @IBDesignable public var cornerRadiusRatio: CGFloat {
        get {
            return layer.cornerRadius / frame.width
        }

        set {
            // Make sure that it's between 0.0 and 1.0. If not, restrict it
            // to that range.
            let normalizedRatio = max(0.0, min(1.0, newValue))
            layer.cornerRadius = frame.width * normalizedRatio
        }
    }

}

これが遊び場で機能することを確認しました。

19
NRitH

ビューを選択 you changed Corner Rediuse , Border Widthe and Border Color also Using StoryBord 

extension UIView {

    @IBInspectable var cornerRadiusV: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidthV: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColorV: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}
6
Ananda Aiwale

ストーリーボードですべての変更を行った後でも、 Woraphotの答え は機能しません。

これは私のために働いた：

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

長答：

UIView/UIButtonなどの角丸

customUIView.layer.cornerRadius = 10

ボーダーの厚さ

pcustomUIView.layer.borderWidth = 1

ボーダの色

customUIView.layer.borderColor = UIColor.blue.cgColor
0
swiftBoy