Swift-圓角與陰影

iOS中圓角實現非常容易,對比而言,設置陰影則需要設置顏色,偏移位置,陰影透明度,陰影半徑:
<pre><code>` /* The color of the shadow. Defaults to opaque black. Colors created
* from patterns are currently NOT supported. Animatable. */

/** Shadow properties. **/
open var shadowColor: CGColor?


/* The opacity of the shadow. Defaults to 0. Specifying a value outside the
 * [0,1] range will give undefined results. Animatable. */

open var shadowOpacity: Float


/* The shadow offset. Defaults to (0, -3). Animatable. */

open var shadowOffset: CGSize


/* The blur radius used to create the shadow. Defaults to 3. Animatable. */

open var shadowRadius: CGFloat`</code></pre>
FlyElephant.png

圖一實現的代碼非常原始,簡單設置了陰影顏色:
<pre><code>` let view:UIView = UIView.init(frame: CGRect(x: 50, y: 200, width: 50, height: 50))

    view.backgroundColor = UIColor.blue
    
    view.layer.shadowColor = UIColor.red.cgColor
    view.layer.shadowOpacity = 1.0
    
    self.view.addSubview(view)`</code></pre>

對比圖一陰影分步的更加均勻,shadowOffset都設置了0:
<pre><code>` let view1:UIView = UIView.init(frame: CGRect(x: 150, y: 200, width: 50, height: 50))

    view1.backgroundColor = UIColor.blue
    
    view1.layer.shadowColor = UIColor.red.cgColor
    view1.layer.shadowOpacity = 1.0
    view1.layer.shadowOffset = CGSize(width: 0, height: 0)
    view1.layer.shadowRadius = 4
    
    self.view.addSubview(view1)`</code></pre>

圖三是設置陰影,同時設置圓角,陰影不顯示:
<pre><code>` let view2:UIView = UIView.init(frame: CGRect(x: 250, y: 200, width: 50, height: 50))

    view2.backgroundColor = UIColor.blue
    view2.layer.masksToBounds = true
    view2.layer.cornerRadius = 25
    
    view2.layer.shadowColor = UIColor.red.cgColor
    view2.layer.shadowOpacity = 1.0
    view2.layer.shadowOffset = CGSize(width: 0, height: 0)
    view2.layer.shadowRadius = 4
    
    self.view.addSubview(view2)`</code></pre>

圖四既設置圓角同時設置陰影:

<pre><code>` let view2:UIView = UIView.init(frame: CGRect(x: 260, y: 200, width: 50, height: 50))

    view2.backgroundColor = UIColor.blue
    view2.layer.cornerRadius = 25
    
    view2.layer.shadowColor = UIColor.red.cgColor
    view2.layer.shadowOpacity = 1.0
    view2.layer.shadowOffset = CGSize(width: 0, height: 0)
    view2.layer.shadowRadius = 4
    view2.layer.masksToBounds = false
    
    self.view.addSubview(view2)`</code></pre>

<pre><code>` let shadowView:UIView = UIView(frame: CGRect(x: 50, y: 300, width: 50, height: 50))
shadowView.backgroundColor = UIColor.white
shadowView.layer.shadowColor = UIColor.red.cgColor
shadowView.layer.shadowOpacity = 1.0
shadowView.layer.shadowOffset = CGSize(width: 0, height: 0)
shadowView.layer.shadowRadius = 4
shadowView.clipsToBounds = false
shadowView.layer.cornerRadius = 25.0

    let innerView:UIView = UIView.init(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
    
    innerView.backgroundColor = UIColor.yellow
    innerView.clipsToBounds = true
    innerView.layer.cornerRadius = 25
    
    shadowView.addSubview(innerView)
    
    self.view.addSubview(shadowView)`</code></pre>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • text-shadow是給文本添加陰影效果,box-shadow是給元素塊添加周邊陰影效果。隨著HTML5和CSS...
    arlene112閱讀 2,290評論 0 1
  • 好吧,圓和橢圓是很好的,但圓角矩形如何?我們現在也可以那樣做吧?——Steve Jobs 我們在第3章“圖層幾何”...
    liril閱讀 2,193評論 4 6
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,656評論 0 7