热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用故事板来屏蔽UIView并给出圆角?-UseStoryboardtomaskUIViewandgiveroundedcorners?

Lotsofquestionslikethisexplainhowtoprogrammaticallycreateamaskandprovideroundedcorner

Lots of questions like this explain how to programmatically create a mask and provide rounded corners to a UIView.

像这样的许多问题解释了如何以编程的方式创建一个掩码,并为UIView提供圆角。

Is there a way to do it all within Storyboard? Just asking because it seems like creating rounded corners in Storyboard keeps a clearer demarcation between presentation and logic.

是否有一种方法可以在故事板中完成?仅仅是询问,因为在故事板中创建圆角似乎可以在表示和逻辑之间进行更清晰的划分。

3 个解决方案

#1


176  

Yes, I use that a lot but question like this was already answered many times.

是的,我经常用这个,但是像这样的问题已经被回答过很多次了。

But anyway in Interface Builder. You need to add User Defined Runtime Attributes like this:

不管怎样,在接口构建器中。您需要添加用户定义的运行时属性如下:

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

enter image description here

and enable

并使

Clips subviews

enter image description here

Results:

结果:

enter image description here

#2


11  

You can do it in a storyboard by using user-defined properties. Select the view that you want to round and open its Identity Inspector. In the User Defined Runtime Attributes section, add the following two entries:

通过使用用户定义的属性,可以在故事板中实现。选择要循环的视图并打开它的标识检查器。在用户定义的运行时属性部分,添加以下两个条目:

  • Key Path: layer.cornerRadius, Type: Number, Value: (whatever radius you want)
  • 关键路径:层。角半径,类型:数字,值:(任意半径)
  • Key Path: layer.masksToBounds, Type: Boolean, Value: checked
  • 关键路径:层。masksToBounds,类型:布尔,值:勾选

You may have to import QuartzKit in your view's corresponding class file (if any), but I swear that I've gotten it to work without doing that. Your results may vary.

您可能需要在您的视图的相应的类文件中导入QuartzKit(如果有的话),但是我发誓,我没有这样做就已经让它工作了。您的结果可能不同。

EDIT: Example of a dynamic radius

编辑:动态半径示例

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
        }
    }

}

I verified that this works in a playground.

我证实这在操场上行得通。

#3


0  

Select view 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
        }
    }
}

推荐阅读
author-avatar
羊碧刚_648
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有