Soru Köşede, resim görünümüne sahip olan katmanda köşe Radius VE gölge ayarlanamaz mı?


Bu beni güldürüyor. UIView'im var ("ebeveyn" olarak adlandırın). Bu görüntünün en alt alt görünümü, çerçevesi "ana" sınırlarının tamamını kaplayan bir UIImageView (buna "çocuk" diyor).

Köşeleri "ana" görünümde yuvarlamak ve bir alt gölge ayarlamak istiyorum. Bunu üzerinde yapıyorum CALayer her zamanki gibi "ebeveyn" in:

[[parent layer] setShadowOffset:CGSizeMake(5, 5)];
[[parent layer] setShadowRadius:6];
[[parent layer] setShadowOpacity:0.4];    
[[parent layer] setCornerRadius:6];

Bu, gölgeyi doğru olarak gösterir, ancak köşeleri yuvarlamaz.

İşte kicker:

  1. "Çocuk" görüntü görünümünü kaldırırsam ya da "ana" görünümün tüm sınırlarını işgal etmeyecek şekilde küçültür olsaydım, yuvarlatılmış köşeleri ve gölgeyi üst öğeden doğru olarak alırım.
  2. "Çocuk" u yalnız bırakırsam ancak "ebeveynler" görünümünde "clipsToBounds" ayarlıyorum, köşeleri doğru şekilde alırım. Ama şimdi gölge gitti.
  3. Köşe yarıçapını çocuk hiçbir etkisi yok gibi görünüyor.

Görünüşe bakılırsa, “çocuk” görüntüsü sadece “ana” görünümdeki yuvarlatılmış köşeleri gölgelemekte, çünkü tüm rect'i kaplamaktadır ve ana görünüme dayalı kırpma, köşeleri alır ama aynı zamanda gölgeyi de maskeler. # 3 neden çalışmadığından emin değil.

Neyi kaçırıyorum? Çok uzun süre bakarak, bariz bir şeye bakıyor muyum?

Teşekkürler.

(Şöyle ki, "yuvarlak damgalayıcılar-dropshadow" etiketi zaten var. Harika.)


18
2017-09-14 02:10


Menşei




Cevaplar:


İç içe geçmiş iki görüntüye, iç köşelere yuvarlatılmış ve ciltlemeyi kesmeye ve dış görünümü gölgeye (ve dolayısıyla kırpmayacak şekilde) sahip olmanız gerekir. Durumunuzda iç ve dış görünüm muhtemelen "çocuk" ve "ebeveyn" olacaktır, ama sanırım bu görüşler için doğru kırpma değerlerini ayarlamadınız?

İçindeki cevaba bakın Neden masksToBounds = YES, CALayer gölgesini önler?.


21
2017-09-29 19:56



Sonunda bir kazananımız var. :) Teşekkürler Julian. - Ben Zotto


Normalde klipleriToBounds'u yuvarlatılmış köşelere sahip olacak şekilde ayarlamalısınız, ancak gölgeyi korumak istediğiniz için gölgenin köşelerini de yuvarlamanız gerekir. Gölge yolunu bir bezier yolu kullanarak ayarlamayı denediniz mi? ClipsToBounds / maskksToBounds'u varsayılana, NO. Gibi bir şey:

  [[parent layer] setCornerRadius:6.0f];
  [[parent layer] setShadowPath:
             [[UIBezierPath bezierPathWithRoundedRect:[parent bounds] 
                   cornerRadius:6.0f] CGPath]];

5
2017-09-20 15:45



Sağol Matt. Evet, gölge köşelerinin yuvarlanması bir problem değil, bir yolla mı, yoksa normal özelliklerle mi ayarlasalar da çalışıyorlar. Ben klipleriToBounds ayarladığımda hiç görünmüyor, ve eğer görüntülemezsem, görüntü görüntüsü yuvarlanmış köşeleri öldürür. ("Çocuk" görüntü görünümüne sahip olmadığımda, her ikisinin de beklendiği gibi çalışacağını unutmayın) - Ben Zotto
Bir görüntü görüntüsü kullanmak yerine, katmanınızın içeriğini istediğiniz görüntüye ayarladığınızda ne olur? Örneğin. [layer setContents: (id) [image CGImage]]; Görüntüyü katmanı dolgu ile doldurmak veya istenen etki değilse başka sabitleri denemek için görüntü elde etmek içinCCravityResizeAspectFill öğesini ayarlayabilirsiniz. - Matt Long
Benim durumumda (oldukça benzer), görüntülenen öğenin arka planı olan yığının en altında bir UIImageView olan bir XIB dosyası var. Resim görünümü ebeveyninin köşe yarıçapını geçersiz kılar. Bir xib dosyası olduğu için Matt'i önerdiğiniz içerik ayarlarının nasıl yapıldığını bilmiyorum. (OP değil aynı problem) - Kalle
@Kalle. Tam olarak ne sorduğundan emin değilim. Bunu bir alıntı yapan yeni bir soru olarak gönderebilir ve sonra sizin için çalışmayan daha derinlemesine açıklayabilir misiniz? Belki bazı kodları içerir? Teşekkürler. - Matt Long
Harika, teşekkürler Matt! - DZenBot


UIImageView çocuğun sınırlarını ayarlamayı denediniz mi, ayrıca köşeleri yuvarlatılmış olsun? Belki de konteyner görünümünün gölgesini geçersiz kılmaz. Sadece bir düşünce, işe yarayacağından emin değil.


0
2017-09-26 13:36



Evet. Yukarıdaki 3 numaralı noktada belirtildiği gibi. - Ben Zotto


Swift 3 ile, bir görüntü görünümünde veya bir görüntü katmanı içeren bir görünümde cornerRadius ve gölge ayarlamak için aşağıdaki iki kod parçasından birini seçebilirsiniz.


# 1. kullanma UIView, CALayer ve Bahar ve Struts

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // constants
        let radius: CGFloat = 20, dimension: CGFloat = 200, offset = 8
        let frame = CGRect(x: 0, y: 0, width: 200, height: 200)

        // custom view
        let customView = UIView(frame: frame)
        customView.contentMode = .scaleAspectFill

        // image layer
        let imageLayer = CALayer()
        imageLayer.contentsGravity = kCAGravityResizeAspectFill
        imageLayer.contents = UIImage(named: "image")!.cgImage
        imageLayer.masksToBounds = true
        imageLayer.frame = frame
        imageLayer.cornerRadius = radius
        imageLayer.masksToBounds = true

        // rounded layer
        let roundedLayer = CALayer()
        roundedLayer.shadowColor = UIColor.darkGray.cgColor
        roundedLayer.shadowPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: dimension, height: dimension), cornerRadius: radius).cgPath
        roundedLayer.shadowOffset = CGSize(width: offset, height: offset)
        roundedLayer.shadowOpacity = 0.8
        roundedLayer.shadowRadius = 2
        roundedLayer.frame = frame

        // views and layers hierarchy
        customView.layer.addSublayer(imageLayer)
        customView.layer.insertSublayer(roundedLayer, below: imageLayer)
        view.addSubview(customView)

        // layout
        customView.center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
        customView.autoresizingMask = [UIViewAutoresizing.flexibleLeftMargin, .flexibleRightMargin, .flexibleTopMargin, .flexibleBottomMargin]
    }

}

# 2. kullanma UIView, UIImageView, CALayer ve Otomatik Düzen

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // constants
        let radius: CGFloat = 20, dimension: CGFloat = 200, offset = 8

        // image view
        let imageView = UIImageView(image: UIImage(named: "image"))
        imageView.contentMode = .scaleAspectFill
        imageView.layer.cornerRadius = radius
        imageView.layer.masksToBounds = true

        // rounded view
        let roundedView = UIView()
        roundedView.layer.shadowColor = UIColor.darkGray.cgColor
        roundedView.layer.shadowPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: dimension, height: dimension), cornerRadius: radius).cgPath
        roundedView.layer.shadowOffset = CGSize(width: offset, height: offset)
        roundedView.layer.shadowOpacity = 0.8
        roundedView.layer.shadowRadius = 2

        // views hierarchy
        roundedView.addSubview(imageView)
        view.addSubview(roundedView)

        // layout
        imageView.translatesAutoresizingMaskIntoConstraints = false
        roundedView.translatesAutoresizingMaskIntoConstraints = false
        roundedView.widthAnchor.constraint(equalToConstant: dimension).isActive = true
        roundedView.heightAnchor.constraint(equalToConstant: dimension).isActive = true
        imageView.widthAnchor.constraint(equalTo: roundedView.widthAnchor).isActive = true
        imageView.heightAnchor.constraint(equalTo: roundedView.heightAnchor).isActive = true
        roundedView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        roundedView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        imageView.centerXAnchor.constraint(equalTo: roundedView.centerXAnchor).isActive = true
        imageView.centerYAnchor.constraint(equalTo: roundedView.centerYAnchor).isActive = true
    }

}

Her iki kod snippet'i aşağıdaki ekranı oluşturur:

enter image description here


Görüntüleri köşeleri yuvarlatılmış köşelerle birleştirmek için daha fazla yol bulabilirsiniz. Github repo.


0
2018-01-03 22:01