Округленный UIView с использованием CALayers - только некоторые углы - Как?
В моем приложении - четыре кнопки, названные так:
- Верхний левый
- Нижний левый
- В правом верхнем углу
- Нижний правый
Над кнопками находится вид изображения (или UIView).
Теперь предположим, что пользователь нажимает на верхнюю левую кнопку. Выше изображение / вид должны быть округлены в этом конкретном углу.
У меня возникли некоторые трудности в применении закругленных углов к UIView.
Прямо сейчас я использую следующий код, чтобы применить закругленные углы к каждому представлению:
// imgVUserImg is a image view on IB.
imgVUserImg.image=[UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"any Url Here"];
CALayer *l = [imgVUserImg layer];
[l setMasksToBounds:YES];
[l setCornerRadius:5.0];
[l setBorderWidth:2.0];
[l setBorderColor:[[UIColor darkGrayColor] CGColor]];
Выше код применяет округлость к каждому из углов поставляемого просмотра. Вместо этого я просто хотел применить округлость к выбранным углам, таким как - верх / верх + левый / нижний + правый и т. Д.
Является ли это возможным? Как?
14 ответов
Я использовал ответ в разделе Как создать UILabel с круглыми углами на iPhone? и код из Как сделать округлое прямоугольное представление с прозрачностью на iPhone? сделать этот код.
Затем я понял, что ответил на неправильный вопрос (дал округленный UILabel вместо UIImage), поэтому я использовал этот код, чтобы изменить его:
http://discussions.apple.com/thread.jspa?threadID=1683876
Сделайте проект iPhone с шаблоном просмотра. В контроллере представления добавьте это:
- (void)viewDidLoad
{
CGRect rect = CGRectMake(10, 10, 200, 100);
MyView *myView = [[MyView alloc] initWithFrame:rect];
[self.view addSubview:myView];
[super viewDidLoad];
}
MyView это просто UIImageView подкласс:
@interface MyView : UIImageView
{
}
Я никогда раньше не использовал графические контексты, но мне удалось собрать воедино этот код. Не хватает кода для двух углов. Если вы читаете код, вы можете увидеть, как я это реализовал (удалив некоторые из CGContextAddArc вызовы и удаление некоторых значений радиуса в коде. Код для всех углов есть, поэтому используйте его в качестве отправной точки и удалите части, которые создают углы, которые вам не нужны. Обратите внимание, что вы можете сделать прямоугольники с 2 или 3 закругленными углами, если хотите.
Код не идеален, но я уверен, что вы можете немного привести его в порядок.
static void addRoundedRectToPath(CGContextRef context, CGRect rect, float radius, int roundedCornerPosition)
{
// all corners rounded
// CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
// CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
// CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius,
// radius, M_PI / 4, M_PI / 2, 1);
// CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius,
// rect.origin.y + rect.size.height);
// CGContextAddArc(context, rect.origin.x + rect.size.width - radius,
// rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
// CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
// CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius,
// radius, 0.0f, -M_PI / 2, 1);
// CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
// CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius,
// -M_PI / 2, M_PI, 1);
// top left
if (roundedCornerPosition == 1) {
CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius,
radius, M_PI / 4, M_PI / 2, 1);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width,
rect.origin.y + rect.size.height);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y);
}
// bottom left
if (roundedCornerPosition == 2) {
CGContextMoveToPoint(context, rect.origin.x, rect.origin.y);
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width,
rect.origin.y + rect.size.height);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius,
-M_PI / 2, M_PI, 1);
}
// add the other corners here
CGContextClosePath(context);
CGContextRestoreGState(context);
}
-(UIImage *)setImage
{
UIImage *img = [UIImage imageNamed:@"my_image.png"];
int w = img.size.width;
int h = img.size.height;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst);
CGContextBeginPath(context);
CGRect rect = CGRectMake(0, 0, w, h);
addRoundedRectToPath(context, rect, 50, 1);
CGContextClosePath(context);
CGContextClip(context);
CGContextDrawImage(context, rect, img.CGImage);
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
[img release];
return [UIImage imageWithCGImage:imageMasked];
}
http://nevan.net/skitch/skitched-20100224-092237.png
Не забывайте, что для этого вам понадобится интегрированная среда QuartzCore.
Начиная с iOS 3.2, вы можете использовать функциональность UIBezierPaths для создания прямоугольного прямоугольника с закругленными углами (где только указанные углы скруглены). Затем вы можете использовать это как путь CAShapeLayerи используйте это как маску для слоя вашего вида:
// Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds
byRoundingCorners:UIRectCornerTopLeft
cornerRadii:CGSizeMake(10.0, 10.0)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = imageView.bounds;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
imageView.layer.mask = maskLayer;
И это все - не нужно возиться с определением фигур вручную в Core Graphics, не создавать маскирующие изображения в Photoshop. Слой даже не нуждается в аннулировании. Применение закругленного угла или переход к новому углу так же просто, как определение нового UIBezierPath и используя его CGPath как путь слоя маски. corners параметр bezierPathWithRoundedRect:byRoundingCorners:cornerRadii: Метод является битовой маской, поэтому множественные углы могут быть округлены путем объединения их в OR.
РЕДАКТИРОВАТЬ: Добавление тени
Если вы хотите добавить тень, требуется немного больше работы.
Так как "imageView.layer.mask = maskLayer"применяет маску, тень обычно не будет отображаться за ее пределами. Хитрость заключается в том, чтобы использовать прозрачный вид, а затем добавить два подслоя (CALayers) к слою вида: shadowLayer а также roundedLayer, Оба должны использовать UIBezierPath, Изображение добавляется как содержание roundedLayer,
// Create a transparent view
UIView *theView = [[UIView alloc] initWithFrame:theFrame];
[theView setBackgroundColor:[UIColor clearColor]];
// Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:theView.bounds
byRoundingCorners:UIRectCornerTopLeft
cornerRadii:CGSizeMake(10.0f, 10.0f)];
// Create the shadow layer
CAShapeLayer *shadowLayer = [CAShapeLayer layer];
[shadowLayer setFrame:theView.bounds];
[shadowLayer setMasksToBounds:NO];
[shadowLayer setShadowPath:maskPath.CGPath];
// ...
// Set the shadowColor, shadowOffset, shadowOpacity & shadowRadius as required
// ...
// Create the rounded layer, and mask it using the rounded mask layer
CALayer *roundedLayer = [CALayer layer];
[roundedLayer setFrame:theView.bounds];
[roundedLayer setContents:(id)theImage.CGImage];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
[maskLayer setFrame:theView.bounds];
[maskLayer setPath:maskPath.CGPath];
roundedLayer.mask = maskLayer;
// Add these two layers as sublayers to the view
[theView.layer addSublayer:shadowLayer];
[theView.layer addSublayer:roundedLayer];
Я использовал этот код во многих местах в моем коде, и он работает на 100% правильно. Вы можете изменить любой кордер, изменив одно свойство "byRoundingCorners:UIRectCornerBottomLeft"
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:UIRectCornerBottomLeft cornerRadii:CGSizeMake(10.0, 10.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = view.bounds;
maskLayer.path = maskPath.CGPath;
view.layer.mask = maskLayer;
[maskLayer release];
В iOS 11 теперь мы можем закруглять только некоторые углы
let view = UIView()
view.clipsToBounds = true
view.layer.cornerRadius = 8
view.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMinXMaxYCorner]
Расширение CALayer с синтаксисом Swift 3 и выше
extension CALayer {
func round(roundedRect rect: CGRect, byRoundingCorners corners: UIRectCorner, cornerRadii: CGSize) -> Void {
let bp = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: cornerRadii)
let sl = CAShapeLayer()
sl.frame = self.bounds
sl.path = bp.cgPath
self.mask = sl
}
}
Может использоваться как:
let layer: CALayer = yourView.layer
layer.round(roundedRect: yourView.bounds, byRoundingCorners: [.bottomLeft, .topLeft], cornerRadii: CGSize(width: 5, height: 5))
Пример Стюартса для закругления определенных углов прекрасно работает. Если вы хотите скруглить несколько углов, таких как верхний левый и правый, это как это сделать
// Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageview
byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight
cornerRadii:CGSizeMake(10.0, 10.0)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = imageview.bounds;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
imageview.layer.mask = maskLayer;
Спасибо, что поделился. Здесь я хотел бы поделиться решением на Swift 2.0 для дальнейшего ознакомления по этому вопросу. (чтобы соответствовать протоколу UIRectCorner)
let mp = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.bottomLeft, .TopLeft], cornerRadii: CGSize(width: 10, height: 10))
let ml = CAShapeLayer()
ml.frame = self.bounds
ml.path = mp.CGPath
self.layer.mask = ml
Существует более простой и быстрый ответ, который может работать в зависимости от ваших потребностей, а также работать с тенями. Вы можете установить для maskToBounds суперслоя значение true и сместить дочерние слои так, чтобы 2 их угла находились за пределами границ суперслоя, эффективно срезая закругленные углы с двух сторон.
Конечно, это работает только тогда, когда вы хотите иметь только 2 закругленных угла на одной стороне, и содержимое слоя выглядит одинаково, когда вы отсекаете несколько пикселей с одной стороны. отлично подходит для того, чтобы гистограммы округлялись только на верхней стороне.
Смотрите этот связанный вопрос. Вы должны будете нарисовать свой собственный прямоугольник CGPath с некоторыми закругленными углами, добавьте CGPath на ваш CGContext а затем клип к нему с помощью CGContextClip,
Вы также можете нарисовать скругленный прямоугольник с альфа-значениями на изображении, а затем использовать это изображение для создания нового слоя, который вы установите в качестве слоя. mask собственность ( см. документацию Apple).
Опоздание на полдесятилетия, но я думаю, что в настоящее время люди делают это не на 100% правильно. Многие люди сталкивались с проблемой, заключающейся в том, что использование метода UIBezierPath + CAShapeLayer мешает автоматическому макету, особенно когда он установлен на раскадровке. Никаких ответов на это нет, поэтому я решил добавить свои.
Существует очень простой способ обойти это: нарисовать закругленные углы в drawRect(rect: CGRect) функция.
Например, если бы я хотел верхние закругленные углы для UIView, я бы подкласс UIView, а затем использовать этот подкласс, где это уместно.
import UIKit
class TopRoundedView: UIView {
override func drawRect(rect: CGRect) {
super.drawRect(rect)
var maskPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: UIRectCorner.TopLeft | UIRectCorner.TopRight, cornerRadii: CGSizeMake(5.0, 5.0))
var maskLayer = CAShapeLayer()
maskLayer.frame = self.bounds
maskLayer.path = maskPath.CGPath
self.layer.mask = maskLayer
}
}
Это лучший способ решить проблему и не требует времени для адаптации.
Скругление только некоторых углов не будет хорошо с автоматическим изменением размера или автоматическим расположением.
Так что другой вариант заключается в использовании обычного cornerRadius и скрыть углы, которые вам не нужны, под другим видом или за пределами его границ суперпредставления, убедившись, что он установлен для обрезки его содержимого.
Чтобы добавить к ответу и дополнению, я создал простой, многоразовый UIView в Свифте. В зависимости от вашего варианта использования вы можете захотеть внести изменения (избегайте создания объектов на каждом макете и т. Д.), Но я хотел, чтобы это было как можно проще. Расширение позволяет применять это к другим представлениям (например, UIImageView) проще, если не любишь подклассы.
extension UIView {
func roundCorners(_ roundedCorners: UIRectCorner, toRadius radius: CGFloat) {
roundCorners(roundedCorners, toRadii: CGSize(width: radius, height: radius))
}
func roundCorners(_ roundedCorners: UIRectCorner, toRadii cornerRadii: CGSize) {
let maskBezierPath = UIBezierPath(
roundedRect: bounds,
byRoundingCorners: roundedCorners,
cornerRadii: cornerRadii)
let maskShapeLayer = CAShapeLayer()
maskShapeLayer.frame = bounds
maskShapeLayer.path = maskBezierPath.cgPath
layer.mask = maskShapeLayer
}
}
class RoundedCornerView: UIView {
var roundedCorners: UIRectCorner = UIRectCorner.allCorners
var roundedCornerRadii: CGSize = CGSize(width: 10.0, height: 10.0)
override func layoutSubviews() {
super.layoutSubviews()
roundCorners(roundedCorners, toRadii: roundedCornerRadii)
}
}
Вот как бы вы применили его к UIViewController:
class MyViewController: UIViewController {
private var _view: RoundedCornerView {
return view as! RoundedCornerView
}
override func loadView() {
view = RoundedCornerView()
}
override func viewDidLoad() {
super.viewDidLoad()
_view.roundedCorners = [.topLeft, .topRight]
_view.roundedCornerRadii = CGSize(width: 10.0, height: 10.0)
}
}
Я бы предложил определить маску слоя. Сама маска должна быть CAShapeLayer объект с выделенным путем. Вы можете использовать следующее расширение UIView (Swift 4.2):
extension UIView {
func round(corners: UIRectCorner, with radius: CGFloat) {
let maskLayer = CAShapeLayer()
maskLayer.frame = bounds
maskLayer.path = UIBezierPath(
roundedRect: bounds,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius)
).cgPath
layer.mask = maskLayer
}
}
Подводя итог ответа Стюарта, вы можете использовать метод скругления углов следующим образом:
@implementation UIView (RoundCorners)
- (void)applyRoundCorners:(UIRectCorner)corners radius:(CGFloat)radius {
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(radius, radius)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.bounds;
maskLayer.path = maskPath.CGPath;
self.layer.mask = maskLayer;
}
@end
Таким образом, чтобы применить закругление угла, вы просто делаете:
[self.imageView applyRoundCorners:UIRectCornerTopRight|UIRectCornerTopLeft radius:10];