Round two corners in UIView

z tego, co wiem, Jeśli chcesz również zamaskować podgląd, możesz użyć maskowania CALayer. Są na to dwa sposoby. Pierwszy jest nieco bardziej elegancki, drugi to obejście: -) ale i szybki. Oba są oparte na maskowaniu CALayer. Używałem obu metod w kilku projektach w zeszłym roku, więc mam nadzieję, że znajdziesz coś przydatnego.

Rozwiązanie 1

Po pierwsze, stworzyłem tę funkcję do generowania maski obrazu w locie (UIImage) z zaokrąglonym rogiem Potrzebuję. Ta funkcja zasadniczo potrzebuje 5 parametrów: granic obrazu i 4 promieni narożników (góra-lewo, góra-prawo, dół-lewo i dół-prawo).

static inline UIImage* MTDContextCreateRoundedMask( CGRect rect, CGFloat radius_tl, CGFloat radius_tr, CGFloat radius_bl, CGFloat radius_br ) {  

    CGContextRef context;
    CGColorSpaceRef colorSpace;

    colorSpace = CGColorSpaceCreateDeviceRGB();

    // create a bitmap graphics context the size of the image
    context = CGBitmapContextCreate( NULL, rect.size.width, rect.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast );

    // free the rgb colorspace
    CGColorSpaceRelease(colorSpace);    

    if ( context == NULL ) {
        return NULL;
    }

    // cerate mask

    CGFloat minx = CGRectGetMinX( rect ), midx = CGRectGetMidX( rect ), maxx = CGRectGetMaxX( rect );
    CGFloat miny = CGRectGetMinY( rect ), midy = CGRectGetMidY( rect ), maxy = CGRectGetMaxY( rect );

    CGContextBeginPath( context );
    CGContextSetGrayFillColor( context, 1.0, 0.0 );
    CGContextAddRect( context, rect );
    CGContextClosePath( context );
    CGContextDrawPath( context, kCGPathFill );

    CGContextSetGrayFillColor( context, 1.0, 1.0 );
    CGContextBeginPath( context );
    CGContextMoveToPoint( context, minx, midy );
    CGContextAddArcToPoint( context, minx, miny, midx, miny, radius_bl );
    CGContextAddArcToPoint( context, maxx, miny, maxx, midy, radius_br );
    CGContextAddArcToPoint( context, maxx, maxy, midx, maxy, radius_tr );
    CGContextAddArcToPoint( context, minx, maxy, minx, midy, radius_tl );
    CGContextClosePath( context );
    CGContextDrawPath( context, kCGPathFill );

    // Create CGImageRef of the main view bitmap content, and then
    // release that bitmap context
    CGImageRef bitmapContext = CGBitmapContextCreateImage( context );
    CGContextRelease( context );

    // convert the finished resized image to a UIImage 
    UIImage *theImage = [UIImage imageWithCGImage:bitmapContext];
    // image is retained by the property setting above, so we can 
    // release the original
    CGImageRelease(bitmapContext);

    // return the image
    return theImage;
}  

Teraz wystarczy kilka linijek kodu. Umieszczam rzeczy w mojej metodzie viewController viewDidLoad, ponieważ jest szybsza, ale możesz jej użyć również w swoim niestandardowym UIView za pomocą metody layoutSubviews w przykładzie.

- (void)viewDidLoad {

    // Create the mask image you need calling the previous function
    UIImage *mask = MTDContextCreateRoundedMask( self.view.bounds, 50.0, 50.0, 0.0, 0.0 );
    // Create a new layer that will work as a mask
    CALayer *layerMask = [CALayer layer];
    layerMask.frame = self.view.bounds;       
    // Put the mask image as content of the layer
    layerMask.contents = (id)mask.CGImage;       
    // set the mask layer as mask of the view layer
    self.view.layer.mask = layerMask;              

    // Add a backaground color just to check if it works
    self.view.backgroundColor = [UIColor redColor];
    // Add a test view to verify the correct mask clipping
    UIView *testView = [[UIView alloc] initWithFrame:CGRectMake( 0.0, 0.0, 50.0, 50.0 )];
    testView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:testView];
    [testView release];

    [super viewDidLoad];
}

Rozwiązanie 2

To rozwiązanie jest nieco bardziej "brudne". Zasadniczo można utworzyć warstwę maski z zaokrąglone rogu trzeba (wszystkie rogi). Następnie należy zwiększyć wysokość warstwy maski o wartość promienia narożnika. W ten sposób dolne zaokrąglone rogi są ukryte i można zobaczyć tylko górny zaokrąglony róg. Kod umieszczam tylko w metodzie viewDidLoad, ponieważ jest szybszy, ale można go użyć również w swoim niestandardowym UIView z metodą layoutSubviews w przykładzie.

  

- (void)viewDidLoad {

    // set the radius
    CGFloat radius = 50.0;
    // set the mask frame, and increase the height by the 
    // corner radius to hide bottom corners
    CGRect maskFrame = self.view.bounds;
    maskFrame.size.height += radius;
    // create the mask layer
    CALayer *maskLayer = [CALayer layer];
    maskLayer.cornerRadius = radius;
    maskLayer.backgroundColor = [UIColor blackColor].CGColor;
    maskLayer.frame = maskFrame;

    // set the mask
    self.view.layer.mask = maskLayer;

    // Add a backaground color just to check if it works
    self.view.backgroundColor = [UIColor redColor];
    // Add a test view to verify the correct mask clipping
    UIView *testView = [[UIView alloc] initWithFrame:CGRectMake( 0.0, 0.0, 50.0, 50.0 )];
    testView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:testView];
    [testView release];

    [super viewDidLoad];
}

Przeglądając kilka odpowiedzi i komentarzy, dowiedziałem się, że używając UIBezierPath bezierPathWithRoundedRect i CAShapeLayer najprostszej i najbardziej prostej drogi do przodu. Może to nie być odpowiednie dla bardzo skomplikowanych przypadków, ale dla sporadycznych zaokrąglania rogów, działa szybko i sprawnie dla mnie.

Stworzyłem uproszczony helper, który ustawia odpowiedni róg w masce:

-(void) setMaskTo:(UIView*)view byRoundingCorners:(UIRectCorner)corners
{
    UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(10.0, 10.0)];

    CAShapeLayer* shape = [[CAShapeLayer alloc] init];
    [shape setPath:rounded.CGPath];

    view.layer.mask = shape;
}

Aby go użyć, po prostu wywołaj z odpowiednim UIRectCorner enum, np.:

[self setMaskTo:self.photoView byRoundingCorners:UIRectCornerTopLeft|UIRectCornerBottomLeft];

Proszę zauważyć, że dla mnie, używam go do okrągłe rogi zdjęć w zgrupowanych UITableViewCell, promień 10.0 działa dobrze dla mnie, jeśli trzeba po prostu zmienić wartość w razie potrzeby.

EDIT: zwróć tylko uwagę na wcześniej udzieloną odpowiedź bardzo podobną do tej ( link ). W razie potrzeby możesz nadal używać tej odpowiedzi jako dodatkowej funkcji wygody.

extension UIView {
    func maskByRoundingCorners(_ masks:UIRectCorner, withRadii radii:CGSize = CGSize(width: 10, height: 10)) {
        let rounded = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: masks, cornerRadii: radii)

        let shape = CAShapeLayer()
        shape.path = rounded.cgPath

        self.layer.mask = shape
    }
}

Aby go użyć, proste wywołanie maskByRoundingCorner na dowolnym UIView:

view.maskByRoundingCorners([.topLeft, .bottomLeft])

Nie mogłem zmieścić tego wszystkiego w komentarzu do odpowiedzi @ lomanf. Więc dodaję to jako odpowiedź.

Jak powiedział @ lomanf, musisz dodać maskę warstwy, aby zapobiec rysowaniu podwarstw poza granicami ścieżki. Teraz jest o wiele łatwiej. Dopóki celujesz w system iOS 3.2 lub nowszy, nie musisz tworzyć obrazu za pomocą kwarcu i ustawiać go jako maskę. Możesz po prostu utworzyć CAShapeLayer z UIBezierPath i użyć go jako maski.

Również, podczas korzystania z masek warstw, upewnij się, że warstwa, którą maskujesz, nie jest częścią żadnej hierarchii warstw po dodaniu maski. W przeciwnym razie zachowanie jest nieokreślone. Jeśli twój widok jest już w hierarchii, musisz go usunąć z superview, zamaskować, a następnie umieścić go z powrotem w miejscu, w którym był.

CAShapeLayer *maskLayer = [CAShapeLayer layer];
UIBezierPath *roundedPath = 
  [UIBezierPath bezierPathWithRoundedRect:maskLayer.bounds
                        byRoundingCorners:UIRectCornerTopLeft |
                                          UIRectCornerBottomRight
                              cornerRadii:CGSizeMake(16.f, 16.f)];    
maskLayer.fillColor = [[UIColor whiteColor] CGColor];
maskLayer.backgroundColor = [[UIColor clearColor] CGColor];
maskLayer.path = [roundedPath CGPath];

//Don't add masks to layers already in the hierarchy!
UIView *superview = [self.view superview];
[self.view removeFromSuperview];
self.view.layer.mask = maskLayer;
[superview addSubview:self.view];

Ze względu na sposób renderowania animacji rdzenia, maskowanie jest stosunkowo powolną operacją. Każda maska wymaga dodatkowej przepustki renderowania. Więc używaj masek oszczędnie.

Jedną z najlepszych części tego podejścia jest to, że nie musisz już utwórz własne UIView i nadpisaj drawRect:. To powinno sprawić, że Twój kod będzie prostszy, a może nawet szybszy.

Wziąłem przykład Nathana i stworzyłem kategorię na UIView, aby umożliwić przestrzeganie suchych zasad. Bez dalszych ceregieli:

UIView+Roundify.h

#import <UIKit/UIKit.h>

@interface UIView (Roundify)

-(void)addRoundedCorners:(UIRectCorner)corners withRadii:(CGSize)radii;
-(CALayer*)maskForRoundedCorners:(UIRectCorner)corners withRadii:(CGSize)radii;

@end

UIView+Roundify.m

#import "UIView+Roundify.h"

@implementation UIView (Roundify)

-(void)addRoundedCorners:(UIRectCorner)corners withRadii:(CGSize)radii {
    CALayer *tMaskLayer = [self maskForRoundedCorners:corners withRadii:radii];
    self.layer.mask = tMaskLayer;
}

-(CALayer*)maskForRoundedCorners:(UIRectCorner)corners withRadii:(CGSize)radii {
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.bounds;

    UIBezierPath *roundedPath = [UIBezierPath bezierPathWithRoundedRect:
        maskLayer.bounds byRoundingCorners:corners cornerRadii:radii];
    maskLayer.fillColor = [[UIColor whiteColor] CGColor];
    maskLayer.backgroundColor = [[UIColor clearColor] CGColor];
    maskLayer.path = [roundedPath CGPath];

    return maskLayer;
}

@end

Do wywołania:

[myView addRoundedCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
                withRadii:CGSizeMake(20.0f, 20.0f)];

Aby rozwinąć trochę odpowiedź P. L przepisałem metodę tak jak by nie zaokrąglała pewnych obiektów np. UIButton poprawnie

- (void)setMaskTo:(id)sender byRoundingCorners:(UIRectCorner)corners withCornerRadii:(CGSize)radii
{
    // UIButton requires this
    [sender layer].cornerRadius = 0.0;

    UIBezierPath *shapePath = [UIBezierPath bezierPathWithRoundedRect:[sender bounds]
                                                byRoundingCorners:corners
                                                cornerRadii:radii];

    CAShapeLayer *newCornerLayer = [CAShapeLayer layer];
    newCornerLayer.frame = [sender bounds];
    newCornerLayer.path = shapePath.CGPath;
    [sender layer].mask = newCornerLayer;
}

I nazwij to przez

[self setMaskTo:self.continueButton byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight withCornerRadii:CGSizeMake(3.0, 3.0)];

Jeśli chcesz to zrobić w języku Swift, możesz użyć rozszerzenia UIView. W ten sposób wszystkie podklasy będą mogły użyć następującej metody:

import QuartzCore

extension UIView {
    func roundCorner(corners: UIRectCorner, radius: CGFloat) {
        let maskPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = maskPath.CGPath
        layer.mask = maskLayer
    }
}    

Przykładowe użycie:

self.anImageView.roundCorner(.topRight, radius: 10)

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(5, 5, self.bounds.size.width-10, self.bounds.size.height-10)
                                               byRoundingCorners:UIRectCornerAllCorners
                                                     cornerRadii:CGSizeMake(12.0, 12.0)];

Zmień "AllCorners" zgodnie z Twoimi potrzebami.

Wszystkie dostarczone rozwiązania osiągają cel. Ale czasami może to wysadzić.

Na przykład dolne rogi muszą być zaokrąglone. Jeśli wysokość lub ogranicznik odstępu dolnego jest ustawiony na UIView, który musi być zaokrąglony, fragmenty kodu, które zaokrąglają rogi, należy przenieść do viewDidLayoutSubviews metoda.

Podkreślenie:

UIBezierPath *maskPath = [UIBezierPath
    bezierPathWithRoundedRect:roundedView.bounds byRoundingCorners:
    (UIRectCornerTopRight | UIRectCornerBottomRight) cornerRadii:CGSizeMake(16.0, 16.0)];

Powyższy fragment kodu będzie zaokrąglony w prawym górnym rogu, jeśli kod zostanie ustawiony w viewDidLoad. Ponieważ roundedView.bounds zmieni się po aktualizacji ograniczeń UIView.

Utwórz maskę i ustaw ją na warstwie widoku

Zaczynając od Twojego kodu, możesz użyć czegoś takiego jak Poniższy fragment.

 // make sure the view's background is set to [UIColor clearColor]
- (void)drawRect:(CGRect)rect
{
    CGFloat radius = 10.0;
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextTranslateCTM(context, rect.size.width/2, rect.size.height/2);
    CGContextRotateCTM(context, M_PI); // rotate so image appears right way up
    CGContextTranslateCTM(context, -rect.size.width/2, -rect.size.height/2);

    CGContextBeginPath(context);

    CGContextMoveToPoint(context, rect.origin.x, rect.origin.y);
    CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, radius, M_PI, M_PI / 2, 1);
    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);
    CGContextClip(context); 

    // now do your drawing, e.g. draw an image
    CGImageRef anImage = [[UIImage imageNamed:@"image.jpg"] CGImage];
    CGContextDrawImage(context, rect, anImage);    
}

Bezier path to anwer, jeśli potrzebujesz dodatkowego kodu to mi się udało: https://stackoverflow.com/a/13163693/936957

UIBezierPath *maskPath;
maskPath = [UIBezierPath bezierPathWithRoundedRect:_backgroundImageView.bounds 
                                 byRoundingCorners:(UIRectCornerBottomLeft | UIRectCornerBottomRight) 
                                       cornerRadii:CGSizeMake(3.0, 3.0)];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.bounds;
maskLayer.path = maskPath.CGPath;
_backgroundImageView.layer.mask = maskLayer;
[maskLayer release];

UIBezierPath solution.

- (void) drawRect:(CGRect)rect {

    [super drawRect:rect];

    //Create shape which we will draw. 
    CGRect rectangle = CGRectMake(2, 
                                  2, 
                                  rect.size.width - 4,
                                  rect.size.height - 4);

    //Create BezierPath with round corners
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:rectangle 
                                                   byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight 
                                                         cornerRadii:CGSizeMake(10.0, 10.0)];

    //Set path width
    [maskPath setLineWidth:2];

    //Set color
    [[UIColor redColor] setStroke];

    //Draw BezierPath to see it
    [maskPath stroke];
}

Prawdopodobnie musisz zacisnąć do granic. Dodaj wiersz

self.clipsToBounds = YES

Gdzieś w kodzie, aby ustawić tę właściwość.

To może działać tylko wtedy, gdy niektóre rzeczy są ustawione poprawnie:

1. clipsToBounds musi być ustawione na YES
2. nieprzezroczyste musi być nie
3. backgroundColor powinien być " clearColor "(nie jestem do końca pewien co do tego)
4. contentMode musi być "UIContentModeRedraw", ponieważ drawRect nie jest często wywoływany, jeśli nie jest
5. [super drawRect: rect] musi być wywołane po cgcontextclip
6. twój widok może nie zawierać arbitralnych podwidywań (nie jestem tego pewien)
7. pamiętaj, aby ustawić "needsDisplay:" co najmniej raz, aby uruchomić drawrect

Nieco chwiejnym, ale stosunkowo prostym sposobem (bez podklasowania, maskowania itp.) jest posiadanie dwóch interfejsów użytkownika. Zarówno z clipToBounds = YES. Ustaw zaokrąglone rogi w widoku potomnym, a następnie umieść je w widoku nadrzędnym, aby narożniki, które chcesz wyprostować, zostały przycięte.

UIView* parent = [[UIView alloc] initWithFrame:CGRectMake(10,10,100,100)];
parent.clipsToBounds = YES;

UIView* child = [[UIView alloc] new];
child.clipsToBounds = YES;
child.layer.cornerRadius = 3.0f;
child.backgroundColor = [UIColor redColor];
child.frame = CGRectOffset(parent.bounds, +4, -4);


[parent addSubView:child];

Nie obsługuje przypadku, w którym dwa przeciwległe narożniki mają być zaokrąglone.

Zdaję sobie sprawę, że próbujesz okrążyć dwa górne rogi UITableView, ale z jakiegoś powodu odkryłem, że najlepszym rozwiązaniem jest użycie:

self.tableView.layer.cornerRadius = 10;

Programowo powinien zaokrąglać wszystkie cztery rogi, ale z jakiegoś powodu zaokrągla tylko dwie górne. ** Zobacz zrzut ekranu poniżej, aby zobaczyć efekt kodu, który napisałem powyżej.

Rozszerzając akceptowaną odpowiedź, dodajmy do niej wsteczną kompatybilność. Przed iOS 11, widok.warstwa.maskedCorners nie jest dostępna. Więc możemy zrobić tak

if #available(iOS 11.0, *) {
        myView.layer.maskedCorners = [.layerMinXMinYCorner,.layerMaxXMinYCorner]
    }else{
        myView.maskByRoundingCorners([.topLeft, .topRight])
    }

extension UIView{
func maskByRoundingCorners(_ masks:UIRectCorner, withRadii radii:CGSize = CGSize(width: 10, height: 10)) {
        let rounded = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: masks, cornerRadii: radii)

        let shape = CAShapeLayer()
        shape.path = rounded.cgPath

        self.layer.mask = shape
    }

}

Napisaliśmy maskByRoundingCorners jako rozszerzenie UIView, aby usprawnić ponowne użycie kodu.

Napisy dla @ SachinVsSachin i @P. l:) połączyłem ich kody aby było lepiej.