web-dev-qa-db-ja.com

下部UIViewのみに影を設定

UIViewに下のみの影を作成したい。現在、この機能を使用すると、上下左右に影が作成されます。

func setCardView(view : UIView){
    view.layer.masksToBounds = false
    view.layer.shadowOffset = CGSize(width: 0, height: 0)
    view.layer.shadowRadius = 2
    view.layer.shadowOpacity = 0.5
}

とにかく下に影を作成するだけですか？任意の助けをいただければ幸いです。ありがとうございました！

iosuiviewshadow
27
Sonic Master

影の適切な考え方は、影はオブジェクトの一部であり、ボタンの一部であるuiviewに属しているだけだと思います。仮想光源があると想像してください。片側だけの影を作ることはできません。

そうは言っても、影は常にビュー全体の影になります。ただし、シャドウオフセットを変更して、下に向けることができます。

view.layer.shadowOffset = CGSize(width: 0, height: 3)

これは、光源が上から光を放ち、影が下になるようにすることを意味します。上部にまだ影が見える理由は、影の半径です。これは、光のdiffuseをシミュレートすることです。ライトが拡散するほど、シャドウは柔らかくなり、トップシャドウが表示されたままになります。

view.layer.shadowRadius = 1 or 0.5

半径も小さくしてください。より良い視覚的な結果が得られます。

必要に応じて、umbra、penumbra、antumbraを理解するには、 https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra をご覧ください。

32
Elvin

shadowOffsetを変更します

 view.layer.shadowOffset = CGSize(width: 0, height: 3)
11
Luan Tran

Swift 4で機能するこのコードと、ビューの下部に適用されるシャドウ：

view.layer.masksToBounds = false
view.layer.shadowRadius = 4
view.layer.shadowOpacity = 1
view.layer.shadowColor = UIColor.gray.cgColor
view.layer.shadowOffset = CGSize(width: 0 , height:2)
8
Srinivasan.M

Swiftでシャドウを適用する適切な方法は次のとおりです。

yourView.layer.shadowOffset = CGSize(width: 0, height: 3)
yourView.layer.shadowOpacity = 0.6
yourView.layer.shadowRadius = 3.0
yourView.layer.shadowColor = UIColor.red.cgColor
6
Hemang

UIViewの片側だけにシャドウが必要な場合は、view.layer.shadowPathをUIBezierPathに設定する必要があります。

以下は、ビューの下部にのみ影を表示する例です。

view.layer.shadowPath = UIBezierPath(rect: CGRect(x: 0,
                                                  y: bounds.maxY - layer.shadowRadius,
                                                  width: bounds.width,
                                                  height: layer.shadowRadius)).cgPath

CGRect値を分解すると、以下が得られます。

  • xおよびwidthは、ビューの水平方向の幅全体に影がかかることを確認します（たとえば、layer.shadowRadius値をオフセットのベースとして使用して、影を調整することもできます）
  • yおよびheightは、シャドウができるだけ低く開始し、半径と同じ大きさであることを確認します

もちろん、ビューのshadowRadiusよりも大きいheightが必要な場合など、これが機能しない場合があります。これらの場合、画像ビューまたはマスクされたレイヤーを使用することをお勧めします。

お役に立てれば、

3
Zedenem

古い質問ですが、答えのどれも本当に質問に答えていないようです。上記の回答は低いshadowRadiusで機能しますが、実際には「シャドウ」効果は得られません。

UIBezierPathを使用すると、一番下にのみ影を追加できます。

Heres how-

    let shadowWidth: CGFloat = 1.2 // Shadow width, will be the width furthest away from the view, this is equivalent to 120% of the views width
    let shadowHeight: CGFloat = 0.3 // Shadow height, again this is equivalent to 30%
    let shadowRadius: CGFloat = 5 
    let width = someView.frame.width
    let height = someView.frame.height // Get width and height of the view

    // Plot the path
    let shadowPath = UIBezierPath()
    shadowPath.move(to: CGPoint(x: shadowRadius / 2, y: height - shadowRadius / 2))
    shadowPath.addLine(to: CGPoint(x: width - shadowRadius / 2, y: height - shadowRadius / 2))
    shadowPath.addLine(to: CGPoint(x: width * shadowWidth, y: height + (height * shadowHeight)))
    shadowPath.addLine(to: CGPoint(x: width * -(shadowWidth - 1), y: height + (height * shadowHeight)))
    // Add shadow
    someView.layer.shadowPath = shadowPath.cgPath
    someView.layer.shadowRadius = shadowRadius
    someView.layer.shadowOffset = .zero
    someView.layer.shadowOpacity = 0.2

これはこれを出力します

enter image description here

または、より少ないオプションでよりシンプルなソリューションが必要な場合は、これで行くことができます

   let buttonHeight = someButton.frame.height
    let buttonWidth = someButton.frame.width

    let shadowSize: CGFloat = 15
    let contactRect = CGRect(x: -shadowSize, y: buttonHeight - (shadowSize * 0.2), width: buttonWidth + shadowSize * 2, height: shadowSize)
    someButton.layer.shadowPath = UIBezierPath(ovalIn: contactRect).cgPath
    someButton.layer.shadowRadius = 5
    someButton.layer.shadowOpacity = 0.6

これはこれを出力します

enter image description here

ここの例

https://github.com/hemo87/ExampleShadow/tree/master

2
M.Hem