iOS:如何在UIView上添加投影和描邊?

[英]iOS : How to add drop shadow and stroke shadow on UIView?


I want to add drop shadow and stroke shadow on UIView This is what my designer given me to apply shadow,

我想在UIView上添加投影和描邊這是我的設計師給我的應用陰影,

  • For drop shadow, he told me to use RGB(176,199,226) with 90% opacity, distance-3 and size-5

    對於投影,他讓我使用RGB(176,199,226),不透明度為90%,距離為3,尺寸為5。

  • For stroke shadow, he told to apply, RGB(209,217,226) of size-1 and 100% opacity.

    對於筆觸陰影,他要求應用大小為1的RGB(209,217,226)和100%不透明度。

This is photoshop applied effects screen,

這是photoshop應用效果屏幕,

enter image description hereenter image description here

The view with the required shadow (expected output)

具有所需陰影的視圖(預期輸出)

enter image description here

I tried the following to get the drop shadow

我嘗試了下面的方法來獲得投影。

viewCheck.layer.masksToBounds = NO;
viewCheck.layer.cornerRadius = 5.f;
viewCheck.layer.shadowOffset = CGSizeMake(.0f,2.5f);
viewCheck.layer.shadowRadius = 1.5f;
viewCheck.layer.shadowOpacity = .9f;
viewCheck.layer.shadowColor = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowPath = [UIBezierPath bezierPathWithRect:viewCheck.bounds].CGPath;

And this is the result of it,

這就是結果,

enter image description here

I'm having problem in understanding how I can apply stroke and drop shadow as showing into photoshop screenshots (I've added above). How to apply Distance, Spread, Size, Position?

我在理解如何在photoshop的截圖中應用描邊和投影(我在上面添加了)時遇到了問題。如何應用距離,擴展,大小,位置?

Can someone point me to a guide to applying these kind of shadows? There's lots of shadow effects coming out and I want to learn how it can be possible instead asking each of the questions here!

有人能給我指點一下如何使用這些陰影嗎?有很多陰影效果出來了,我想學習它如何可能,而不是問這里的每一個問題!

Thanks :)

謝謝:)

4 个解决方案

#1


28  

I believe most of configuration you look for can be achieved by employing the shadowPath property.

我相信您所尋找的大多數配置都可以通過使用shadowPath屬性來實現。

viewCheck.layer.shadowRadius  = 1.5f;
viewCheck.layer.shadowColor   = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowOffset  = CGSizeMake(0.0f, 0.0f);
viewCheck.layer.shadowOpacity = 0.9f;
viewCheck.layer.masksToBounds = NO;

UIEdgeInsets shadowInsets     = UIEdgeInsetsMake(0, 0, -1.5f, 0);
UIBezierPath *shadowPath      = [UIBezierPath bezierPathWithRect:UIEdgeInsetsInsetRect(viewCheck.bounds, shadowInsets)];
viewCheck.layer.shadowPath    = shadowPath.CGPath;

e.g, by setting shadowInsets this way

e。通過這樣設置陰影

UIEdgeInsets shadowInsets = UIEdgeInsetsMake(0, 0, -1.5f, 0);

you will get a nice desirable shadow:

你會得到一個理想的影子:

enter image description here

You can decide now how you want the shadow rectangle to be constructed by controlling the shadow path rectangle insets.

現在,您可以通過控制陰影路徑矩形嵌套來決定如何構造陰影矩形。

#2


9  

Following are the steps for User Defined Runtime Attribute.

下面是用戶定義的運行時屬性的步驟。

  1. Open a storyboard or xib file in Interface Builder.
  2. 在接口構建器中打開故事板或xib文件。
  3. In Interface Builder, select the object to add the attribute to.
  4. 在Interface Builder中,選擇要添加屬性的對象。
  5. Choose View > Utilities > Show Identity Inspector.
  6. 選擇查看>實用程序>,顯示標識檢查器。

The Identity inspector appears in the utility area. As shown below, the user defined runtime attributes editor is one of the items in the inspector.

標識檢查器出現在實用程序區域。如下所示,用戶定義的運行時屬性編輯器是檢查器中的項之一。

enter image description here

  1. Click the Add button (+) in the lower left of the user defined runtime attributes editor.
  2. 單擊用戶定義的運行時屬性編輯器左下角的Add按鈕(+)。

enter image description here

#3


6  

For give Border Of UIView.

提供UIView的邊框。

Add #import "QuartzCore/QuartzCore.h" fram work.

添加#導入“QuartzCore / QuartzCore。h“弗拉姆號工作。

myView.layer.cornerRadius = 15.0; // set as you want.
myView.layer.borderColor = [UIColor lightGrayColor].CGColor; // set color as you want.
myView.layer.borderWidth = 1.0; // set as you want.

#4


2  

I am sorry, I only have the Swift solution but heres my UIView extensions which I use to do this task:

對不起,我只有Swift解決方案,但這是我的UIView擴展,我用它來完成這個任務:

// MARK: Layer Extensions
extension UIView {

    func setCornerRadius(#radius: CGFloat) {
        self.layer.cornerRadius = radius
        self.layer.masksToBounds = true
    }

    func addShadow(#offset: CGSize, radius: CGFloat, color: UIColor, opacity: Float, cornerRadius: CGFloat? = nil) {
        self.layer.shadowOffset = offset
        self.layer.shadowRadius = radius
        self.layer.shadowOpacity = opacity
        self.layer.shadowColor = color.CGColor
        if let r = cornerRadius {
            self.layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: r).CGPath
        }
    }

    func addBorder(#width: CGFloat, color: UIColor) {
        self.layer.borderWidth = width
        self.layer.borderColor = color.CGColor
        self.layer.masksToBounds = true
    }

    func drawStroke(#width: CGFloat, color: UIColor) {
        let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.w, height: self.w), cornerRadius: self.w/2)
        let shapeLayer = CAShapeLayer ()
        shapeLayer.path = path.CGPath
        shapeLayer.fillColor = UIColor.clearColor().CGColor
        shapeLayer.strokeColor = color.CGColor
        shapeLayer.lineWidth = width
        self.layer.addSublayer(shapeLayer)
    }

}

I never tried it but you could just paste this code to any Swift file and probably call them from Obj-C code.

我從來沒有嘗試過,但是你可以把這些代碼粘貼到任何Swift文件中,也可以從object - c代碼中調用它們。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/07/06/72f632b2114fa3f7c499760a6b53709c.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com