У меня есть UIImageView
на каждой из моих UITableView
ячеек, которые отображают удаленное изображение (используя SDWebImage
). Я сделал некоторые QuartzCore
стили слоя для представления изображения, как таковые:
UIImageView *itemImageView = (UIImageView *)[cell viewWithTag:100];
itemImageView.layer.borderWidth = 1.0f;
itemImageView.layer.borderColor = [UIColor concreteColor].CGColor;
itemImageView.layer.masksToBounds = NO;
itemImageView.clipsToBounds = YES;
Итак, теперь у меня есть квадрат 50x50 со слабой серой рамкой, но я бы хотел сделать его круглым, а не квадратным. Приложение Hemoglobe
использует круглые изображения в представлениях таблиц, и я хотел бы добиться именно такого эффекта. Однако я не хочу использовать cornerRadius
, так как это ухудшает мой FPS при прокрутке.
Здесь Hemoglobe
показан циркуляр UIImageViews
:
Есть ли способ добиться такого эффекта? Благодарю.
ios
objective-c
uitableview
uiimageview
swiftcode
источник
источник
Ответы:
Просто установите
cornerRadius
половину ширины или высоты (при условии, что вид вашего объекта квадратный).Например, если ширина и высота вашего объекта равны 50:
itemImageView.layer.cornerRadius = 25;
Обновление - как указывает пользователь atulkhatri, это не сработает, если вы не добавите:
itemImageView.layer.masksToBounds = YES;
источник
Добавить границу
self.ImageView.layer.borderWidth = 3.0f; self.ImageView.layer.borderColor = [UIColor whiteColor].CGColor;
Для круглой формы
self.ImageView.layer.cornerRadius = self.ImageView.frame.size.width / 2; self.ImageView.clipsToBounds = YES;
Обратитесь по этой ссылке
http://www.appcoda.com/ios-programming-circular-image-calayer/
источник
Используйте этот код .. Это будет полезно ..
UIImage* image = ...; UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0); // Add a clip before drawing anything, in the shape of an rounded rect [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:50.0] addClip]; // Draw your image [image drawInRect:imageView.bounds]; // Get the image, here setting the UIImageView image imageView.image = UIGraphicsGetImageFromCurrentImageContext(); // Lets forget about that we were drawing UIGraphicsEndImageContext();
Он отлично работает для меня. :)
источник
Вот более современный метод быстрого использования IBDesignable и IBInspectable для подкласса UIImageView
@IBDesignable class RoundableUIImageView: UIImageView { private var _round = false @IBInspectable var round: Bool { set { _round = newValue makeRound() } get { return self._round } } override internal var frame: CGRect { set { super.frame = newValue makeRound() } get { return super.frame } } private func makeRound() { if self.round == true { self.clipsToBounds = true self.layer.cornerRadius = (self.frame.width + self.frame.height) / 4 } else { self.layer.cornerRadius = 0 } } override func layoutSubviews() { makeRound() } }
источник
Да, можно дать
layer.cornerRadius
(нужно добавить#import <QuartzCore/QuartzCore.h>
)для создания кругового любого контроля , но в вместо вашего случая набора
layer
изUIImageView
это лучший способ создать свой имидж круговых и добавить его наUIImageView
каком естьbackGroundColor
этоClearColor
.Также обратитесь к этим двум источникам кода.
https://www.cocoacontrols.com/controls/circleview
и
https://www.cocoacontrols.com/controls/mhlazytableimages
Это может быть полезно в вашем случае:
источник
Установите одинаковую высоту и ширину UIImageView, например:
Height=60
&Width = 60
, тогдаcornerRadius
должно быть ровно половина. В моем случае я оставил 30. У меня это сработало.self.imageView.layer.cornerRadius = 30; self.imageView.layer.borderWidth = 3; self.imageView.layer.borderColor = [UIColor whiteColor].CGColor; self.imageView.layer.masksToBounds = YES;
источник
Если вы используете автопрокладку и разную высоту ячеек, лучше сделать это так:
override func layoutSubviews() { super.layoutSubviews() logo.layer.cornerRadius = logo.frame.size.height / 2; logo.clipsToBounds = true; }
источник
Я использую класс Round Image View ... Поэтому я просто использую его вместо UIImageView, и мне нечего настраивать ...
Этот класс также рисует необязательную границу вокруг круга. Часто вокруг закругленных изображений есть рамка.
Это не подкласс UIImageView, потому что UIImageView имеет собственный механизм отрисовки и не вызывает метод drawRect.
Интерфейс:
#import <UIKit/UIKit.h> @interface MFRoundImageView : UIView @property(nonatomic,strong) UIImage* image; @property(nonatomic,strong) UIColor* strokeColor; @property(nonatomic,assign) CGFloat strokeWidth; @end
Реализация :
#import "MFRoundImageView.h" @implementation MFRoundImageView -(void)setImage:(UIImage *)image { _image = image; [self setNeedsDisplay]; } -(void)setStrokeColor:(UIColor *)strokeColor { _strokeColor = strokeColor; [self setNeedsDisplay]; } -(void)setStrokeWidth:(CGFloat)strokeWidth { _strokeWidth = strokeWidth; [self setNeedsDisplay]; } - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGPathRef path = CGPathCreateWithEllipseInRect(self.bounds, NULL); CGContextAddPath(ctx, path); CGContextClip(ctx); [self.image drawInRect:rect]; if ( ( _strokeWidth > 0.0f ) && _strokeColor ) { CGContextSetLineWidth(ctx, _strokeWidth*2); // Half border is clipped [_strokeColor setStroke]; CGContextAddPath(ctx, path); CGContextStrokePath(ctx); } CGPathRelease(path); } @end
источник
Полезное решение при
Swift
использованииextension
:extension UIView{ func circleMe(){ let radius = CGRectGetWidth(self.bounds) / 2 self.layer.cornerRadius = radius self.layer.masksToBounds = true } }
Применение:
self.venueImageView.circleMe()
источник
UIImageView
? Этот код работает, но делает расширение универсальным для любыхUIView
объектов.UIImageView
уже распространяется сUIView
. В некоторых случаях вам может потребоваться обвести несколько кружковUIViews
, поэтому этот метод подойдет всем.Создание кругового представления изображения, и это довольно просто с помощью приведенной ниже ссылки SO, просто создайте настраиваемые ячейки для представления таблицы вместо того, чтобы выделять все элементы в вашем методе cellForRowAtIndexPath.
как сделать кнопку круглой с фоном изображения в IPhone?
Приведенная выше ссылка дает вам пример кнопок, просто используйте ее для просмотра изображений.
источник
Если вы показываете изображения поверх сплошного цвета фона, простым решением может быть использование наложенного изображения с прозрачным кружком посередине.
Таким образом, вы по-прежнему можете использовать квадратные изображения и добавлять изображение круга над ними, чтобы получить эффект круга.
Если вам не нужно манипулировать изображениями или отображать их на сложном цвете фона, это может быть простое решение без снижения производительности.
источник
Быстро , внутри вашего
viewDidLoad
метода, сuserImage
выходом:self.userImage.layer.borderWidth = 1; self.userImage.layer.borderColor = UIColor.whiteColor().CGColor; self.userImage.layer.cornerRadius = self.userImage.frame.size.width / 2; self.userImage.clipsToBounds = true;
источник
В Swift используйте это расширение для CircularImageView или RoundedImageView:
extension UIView { func circular(borderWidth: CGFloat = 0, borderColor: UIColor = UIColor.whiteColor()) { let radius = CGRectGetWidth(self.bounds) / 2 self.layer.cornerRadius = radius self.layer.masksToBounds = true self.layer.borderWidth = borderWidth self.layer.borderColor = borderColor.CGColor } func roundedCorner(borderWidth: CGFloat = 0, borderColor: UIColor = UIColor.whiteColor()) { let radius = CGRectGetWidth(self.bounds) / 2 self.layer.cornerRadius = radius / 5 self.layer.masksToBounds = true self.layer.borderWidth = borderWidth self.layer.borderColor = borderColor.CGColor } }
Применение:
self.ImageView.circular() self.ImageView.roundedCorner()
источник
Для кругового просмотра изображений используйте приведенный ниже код.
self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2; self.imageView.clipsToBounds = true
Не забудьте изменить cornerRadius в методе viewDidLayoutSubviews вашего UIView.
Пример:
override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2; self.imageView.clipsToBounds = true }
источник