web-dev-qa-db-ja.com

iOS：UIViewにドロップシャドウとストロークシャドウを追加する方法

UIViewにドロップシャドウとストロークシャドウを追加したいこれは、デザイナーがシャドウを適用するために私に与えたものです。

  • ドロップシャドウについては、不透明度90％、距離3、サイズ5のRGB（176,199,226）を使用するように言われました

  • ストロークシャドウについては、サイズ1の不透明度100％のRGB（209,217,226）を適用するように彼は言いました。

これはフォトショップのエフェクト画面です

enter image description hereenter image description here

必要なシャドウのあるビュー（予想される出力）

enter image description here

ドロップシャドウを取得するために以下を試しました

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;

そしてこれはその結果です

enter image description here

フォトショップのスクリーンショット（上記で追加）に表示するときに、ストロークとドロップシャドウを適用する方法を理解するのに問題があります。距離、広がり、サイズ、位置を適用する方法は？

誰かが私にこれらの種類の影を適用するためのガイドを教えてもらえますか？たくさんの影の効果が出てきます。ここでそれぞれの質問をする代わりに、それがどのように可能になるのかを学びたいです！

ありがとう:)

iosobjective-cuiviewdropshadowstrokeshadow
22
Hemang

あなたが探しているほとんどの設定は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;

たとえば、shadowInsetsをこのように設定する

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

あなたは素敵な望ましい影を得るでしょう：

enter image description here

シャドウパスの四角形のインセットを制御することで、シャドウ四角形をどのように作成するかを決定できます。

37
Morse

User Defined Runtime Attributeの手順は次のとおりです。

  1. Interface Builderでストーリーボードまたはxibファイルを開きます。
  2. Interface Builderで、属性を追加するオブジェクトを選択します。
  3. [表示]> [ユーティリティ]> [IDインスペクターの表示]を選択します。

IDインスペクタがユーティリティ領域に表示されます。以下に示すように、ユーザー定義のランタイム属性エディターはインスペクターの項目の1つです。

enter image description here

  1. ユーザー定義のランタイム属性エディターの左下にある追加ボタン（+）をクリックします。

enter image description here

11
Nimit Parekh

ギブの場合Border Of UIView。

#import "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.
6
iPatel

申し訳ありませんが、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)
    }

}

私は試したことはありませんが、このコードをSwiftファイルに貼り付けて、Obj-Cコードから呼び出すことができます。

3
Esqarrouth