Zaokrąglone UIView za pomocą CALayers - tylko niektóre rogi-jak?

Począwszy od systemu iOS 3.2, możesz użyć funkcji UIBezierPaths, aby utworzyć Zaokrąglony prostokąt (gdzie tylko określone rogi są zaokrąglone). Następnie można użyć tego jako ścieżki CAShapeLayer i użyć tego jako maski dla warstwy widoku:

// 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;

I tyle - bez bałaganu ręcznego definiowania kształtów w grafice Core, bez tworzenia maskowania obrazów w Photoshopie. Warstwa nie wymaga nawet unieważniania. Zastosowanie zaokrąglonego narożnika lub zmiana na nowy jest równie proste jako definiowanie nowej UIBezierPath i używanie jej CGPath jako ścieżki warstwy maski. Parametr corners metody bezierPathWithRoundedRect:byRoundingCorners:cornerRadii: jest maską bitową, więc wiele narożników może być zaokrąglonych przez ORing ich razem.

EDIT: dodawanie cienia

Jeśli chcesz dodać do tego Cień, potrzeba trochę więcej pracy.

Ponieważ "imageView.layer.mask = maskLayer" stosuje maskę, Cień zwykle nie będzie się pojawiał poza nią. Sztuczka polega na użyciu przezroczystego widoku, a następnie dodaniu dwóch podwarstw (CALayer s) do warstwy widoku: shadowLayer i roundedLayer. Oba muszą korzystać z UIBezierPath. Obraz jest dodawany jako zawartość 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];

Użyłem tego kodu w wielu miejscach w moim kodzie i działa w 100% poprawnie. Możesz zmienić dowolny corder zmieniając jedną właściwość "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];

Stuarts przykład zaokrąglania konkretnych narożników działa świetnie. Jeśli chcesz zaokrąglać wiele rogów, takich jak górny lewy i prawy, oto jak to zrobić

// 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; 

Dzięki za podzielenie się. Tutaj chciałbym podzielić się rozwiązaniem na swift 2.0 w celu uzyskania dalszych informacji na ten temat. (aby dostosować protokół 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

Istnieje łatwiejsza i szybsza odpowiedź, która może działać w zależności od twoich potrzeb, a także działa z cieniami. można ustawić maskobound na superlayerze na true i przesunąć warstwy potomne tak, aby 2 ich rogi znajdowały się poza granicami superlayera, skutecznie odcinając zaokrąglone rogi z dwóch stron.

Oczywiście działa to tylko wtedy, gdy chcemy mieć tylko 2 zaokrąglone rogi po tej samej stronie, a zawartość warstwy wygląda tak samo po odcięciu kilku pikseli z jednej strony. świetnie sprawdza się przy zaokrąglaniu wykresów słupkowych tylko na górze.

Rozszerzenie Calayera z Swift 3 i wyżej składnia

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
    }
}

Może być używany w następujący sposób:

let layer: CALayer = yourView.layer
layer.round(roundedRect: yourView.bounds, byRoundingCorners: [.bottomLeft, .topLeft], cornerRadii: CGSize(width: 5, height: 5))

W iOS 11 możemy teraz tylko zaokrąglać niektóre rogi

let view = UIView()

view.clipsToBounds = true
view.layer.cornerRadius = 8
view.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMinXMaxYCorner]

Zobacz to powiązane pytanie . Musisz narysować własny prostokąt na CGPath z kilkoma zaokrąglonymi rogami, dodać CGPath do swojego CGContext, a następnie przyciąć do niego za pomocą CGContextClip.

Możesz również narysować zaokrąglony rect z wartościami alfa na obrazie, a następnie użyć go do utworzenia nowej warstwy, którą ustawisz jako właściwość warstwy mask ( zobacz dokumentację Apple).

Pół dekady później, ale myślę, że obecny sposób, w jaki ludzie to robią, nie jest w 100% właściwy. Wiele osób miało problem z tym, że używanie metody Uibezierpath + CAShapeLayer zakłóca automatyczny układ, zwłaszcza gdy jest ustawiony na Storyboardzie. Brak odpowiedzi na to pytanie, więc postanowiłem dodać własne.

Jest bardzo łatwy sposób na obejście tego: narysuj zaokrąglone rogi w funkcji drawRect(rect: CGRect).

Na przykład, gdybym chciał górne zaokrąglone rogi dla UIView, podklasowałbym UIView, a następnie użyj tej podklasy, gdzie jest to właściwe.

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
    }
}

Jest to najlepszy sposób na przezwyciężenie problemu i nie zajmuje dużo czasu, aby się do niego dostosować.

Zaokrąglanie tylko niektórych narożników nie będzie przyjemne z automatyczną zmianą rozmiaru lub automatycznym układem.

Więc inną opcją jest użycie zwykłego cornerRadius i ukrycie narożników, których nie chcesz pod innym widokiem lub poza jego granicami superview, upewniając się, że jest ustawiony tak, aby klipował jego zawartość.

Aby dodać do ODPOWIEDŹ i dodanie, stworzyłem prosty, wielokrotnego użytku UIView w języku Swift. W zależności od przypadku użycia, możesz chcieć wprowadzić modyfikacje (unikaj tworzenia obiektów na każdym układzie itp.), ale chciałem, aby było to tak proste, jak to tylko możliwe. Rozszerzenie pozwala zastosować to do innych widoków (np. UIImageView) łatwiej, jeśli nie lubisz podklasowania.

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)
    }
}

Oto jak zastosujesz go do 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)
    }
}

Podsumowując odpowiedź Stuarta, można zastosować metodę zaokrąglania narożników w następujący sposób:

@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

Aby zastosować zaokrąglenie narożnika, wystarczy:

[self.imageView applyRoundCorners:UIRectCornerTopRight|UIRectCornerTopLeft radius:10];