Как добавить тень в круг UIImageView или UIView?
Я пытаюсь сделать круг UIImageView
, и он работает. Ниже приведен способ, которым я его использую:
[self.pic.layer setMasksToBounds:YES];
[self.pic.layer setCornerRadius:50.0];
Я хотел бы добавить некоторую тень к UIImageView
. Приведенный ниже код добавляет некоторую тень к моему представлению изображения, однако представление изображения изменяется на квадратную форму. Может кто-нибудь дать мне несколько советов, чтобы решить эту проблему? Ниже приведен код, который я использую для добавления тени:
self.pic.layer.shadowColor = [UIColor purpleColor].CGColor;
self.pic.layer.shadowOffset = CGSizeMake(0, 1);
self.pic.layer.shadowOpacity = 1;
self.pic.layer.shadowRadius = 1.0;
self.pic.clipsToBounds = NO;
6 ответов
использовать CALayer
' s shadowPath
свойства и добавить UIBezierPath
прямоугольник со скругленными
self.pic.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.pic.frame cornerRadius:50.0].CGPath;
редактировать
для квадратного изображения Этот метод не работает напрямую, потому что, как вы сказали, вид изображения возвращается к квадрату. Причина: вы установили clipsToBounds = NO
чтобы показать тень, которая удаляет отсечение для радиуса угла, где imageView
это подпанель container
.
решение:
Добавьте imageview в контейнер просмотрите и затем примените тень слоя к этому контейнеру. Ниже приведен код, который я пробовал.
[self.imageView.layer setCornerRadius:60.0];
[self.imageView.layer setMasksToBounds:YES];
self.imageView.clipsToBounds = YES;
self.container.backgroundColor = [UIColor clearColor];
self.container.layer.shadowColor = [UIColor blackColor].CGColor;
self.container.layer.shadowOffset = CGSizeMake(5,15);
self.container.layer.shadowOpacity = 0.5;
self.container.layer.shadowRadius = 2.0;
self.container.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.container.bounds cornerRadius:100.0].CGPath;
результирующий эффект, как показано на скриншоте,
надеюсь, что это поможет!
без контейнера, но с фоновым видом вот мои 2 цента
как расширение swift 2.2
image?.applyCircleShadow(5, shadowOpacity: 1)
extension UIView {
func applyCircleShadow(shadowRadius: CGFloat = 2,
shadowOpacity: Float = 0.3,
shadowColor: CGColor = UIColor.blackColor().CGColor,
shadowOffset: CGSize = CGSize.zero) {
layer.cornerRadius = frame.size.height / 2
layer.masksToBounds = false
layer.shadowColor = shadowColor
layer.shadowOffset = shadowOffset
layer.shadowRadius = shadowRadius
layer.shadowOpacity = shadowOpacity
}
}
extension UIImageView {
override func applyCircleShadow(shadowRadius: CGFloat = 2,
shadowOpacity: Float = 0.3,
shadowColor: CGColor = UIColor.blackColor().CGColor,
shadowOffset: CGSize = CGSize.zero) {
// Use UIImageView.hashvalue as background view tag (should be unique)
let background: UIView = superview?.viewWithTag(hashValue) ?? UIView()
background.frame = frame
background.backgroundColor = backgroundColor
background.tag = hashValue
background.applyCircleShadow(shadowRadius, shadowOpacity: shadowOpacity, shadowColor: shadowColor, shadowOffset: shadowOffset)
layer.cornerRadius = background.layer.cornerRadius
layer.masksToBounds = true
superview?.insertSubview(background, belowSubview: self)
}
}
в случае, если кто ищет Swift 3 или 4 работает устранение:
let imageSize: CGFloat = 64.0
// Create a container which has a shadow
let imageCotainer = UIView(frame: CGRect(x: 0, y: 0, width: imageSize, height: imageSize))
imageCotainer.clipsToBounds = false
imageCotainer.layer.shadowColor = UIColor.black.cgColor
imageCotainer.layer.shadowOpacity = 0.2
imageCotainer.layer.shadowOffset = CGSize(width: 0, height: 1)
imageCotainer.layer.shadowRadius = 2
// Create an image view that will be inserted into the container view
let imageView = UIImageView(frame: imageCotainer.bounds)
imageView.image = yourImage
imageView.clipsToBounds = true
let cornerRadius = imageView.frame.height / 2
imageView.layer.cornerRadius = cornerRadius
// Draw a shadow
imageCotainer.layer.shadowPath = UIBezierPath(roundedRect: imageCotainer.bounds, cornerRadius: cornerRadius).cgPath
// Add image into container
imageCotainer.addSubview(imageView)
иногда вам также нужно установить ограничения для изображения внутри контейнера, но в некоторых случаях он может работать и без него. Но если это не так, добавьте это:
// Set constraints for the image inside the container view
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.topAnchor.constraint(equalTo: imageCotainer.topAnchor).isActive = true
imageView.leftAnchor.constraint(equalTo: imageCotainer.leftAnchor).isActive = true
imageView.rightAnchor.constraint(equalTo: imageCotainer.rightAnchor).isActive = true
imageView.bottomAnchor.constraint(equalTo: imageCotainer.bottomAnchor).isActive = true
imageView.heightAnchor.constraint(equalToConstant: imageSize).isActive = true
imageView.widthAnchor.constraint(equalToConstant: imageSize).isActive = true
extension UIImageView {
func addShadow() {
self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 2, height: 5)
self.layer.shadowOpacity = 0.5
self.layer.shadowRadius = 1.0
self.clipsToBounds = false
}
}
try this code. hope it will help you....
Я создал пользовательские классы ( swift 3 или 4) и он работает очень хорошо:
class RoundShadowImageView: RoundView {
var imageView = RoundImageView()
var image: UIImage! {
didSet {
imageView.image = image
}
}
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(imageView)
needsUpdateConstraints()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
addSubview(imageView)
needsUpdateConstraints()
}
override func layoutSubviews() {
super.layoutSubviews()
clipsToBounds = false
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.1
layer.shadowOffset = CGSize(width: 0, height: 10)
layer.shadowRadius = 10
layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: frame.height / 2.0).cgPath
}
override func updateConstraints() {
super.updateConstraints()
imageView.snp.makeConstraints { (make) -> Void in
make.height.width.equalTo(self)
make.center.equalTo(self)
}
}
}
class RoundImageView: UIImageView {
override func layoutSubviews() {
super.layoutSubviews()
let radius: CGFloat = self.bounds.size.height / 2.0
layer.cornerRadius = radius
clipsToBounds = true
}
}
class RoundView: UIView {
override func layoutSubviews() {
super.layoutSubviews()
let radius: CGFloat = self.bounds.size.height / 2.0
layer.cornerRadius = radius
clipsToBounds = true
}
}
есть 2 класса, чтобы сделать контейнер и представление изображения круглым. И основной класс, который объединяет их обоих: тот, который вы будете называть.
yourImageView.layer.masksToBounds = NO;
yourImageView.layer.shadowOffset = CGSizeMake(5, 0);
yourImageView.layer.shadowRadius = 5;
yourImageView.layer.shadowOpacity = 0.5;
yourImageView.layer.shadowPath = [UIBezierPath bezierPathWithRect:yourImageView.bounds].CGPath;
попробуйте этот код...