23

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

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

  • ストローク シャドウについては、サイズ 1 の RGB(209,217,226) と 100% の不透明度を適用するように指示されました。

これは、Photoshop を適用したエフェクト画面です。

ここに画像の説明を入力ここに画像の説明を入力

必要な影のあるビュー (期待される出力)

ここに画像の説明を入力

ドロップシャドウを取得するために次のことを試しました

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;

で、これがその結果、

ここに画像の説明を入力

Photoshop のスクリーンショットに表示されるようにストロークとドロップ シャドウを適用する方法を理解するのに問題があります (上記で追加しました)。距離、広がり、サイズ、位置を適用する方法は?

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

ありがとう ：）

4

4 に答える 4

40

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

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

ここに画像の説明を入力

影のパスの四角形のインセットを制御することで、影の四角形をどのように構築するかを決定できます。

于 2015-08-05T10:03:58.370 に答える
12

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

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

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

ここに画像の説明を入力

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

ここに画像の説明を入力

于 2015-08-05T10:15:05.060 に答える
6

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.
于 2013-07-06T10:43:14.110 に答える
3

申し訳ありませんが、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 コードから呼び出すことができます。

于 2015-08-05T10:20:51.047 に答える