UIView mit abgerundeten Ecken und Schlagschatten?

Question

Ich arbeite seit ein paar Jahren an einer Anwendung und habe eine einfache Designanfrage erhalten: Runden Sie die Ecken einer UIView ab und fügen Sie einen Schlagschatten hinzu, wie unten angegeben.

Ich möchte eine individuelle UIView ... : Ich wollte nur eine leere weiße Ansicht mit abgerundeten Ecken und einem leichten Schlagschatten (ohne Lichteffekt). Ich kann jede von denen eine nach der anderen zu tun, aber die üblichen clipToBounds / maskToBounds Konflikte auftreten.

Answer 1

Mauersegler 4 Lösung für die Erstellung von UICollectionViewCell rund und Hinzufügen Schatten ohne jegliche Erweiterungen und Komplikationen :)

Hinweis: Für einfache Ansichten, z. B. Schaltflächen. Siehe die Antwort von @suragch in diesem Beitrag. https://stackoverflow.com/a/34984063/7698092 . Erfolgreich getestet für Tasten

Für den Fall, dass jemand immer noch Kämpfen a rund die Ecken und hinzufügen. schatten zur gleichen Zeit. Obwohl diese Lösung mit UICollectionViewCell funktioniert, kann sie auf jede Ansicht verallgemeinert werden.

Diese Technik hat bei mir funktioniert, ohne dass ich irgendwelche Verlängerungen gemacht habe und ohne all den komplizierten Kram. Ich arbeite mit storyBoard.

Technik

Sie müssen eine UIView (nennen wir sie "containerView") innerhalb Ihrer UICollectionViewCell im StoryBoard hinzufügen und alle erforderlichen Ansichten (Schaltflächen, Bilder usw.) innerhalb dieser containerView hinzufügen. Siehe den Screenshot.

Schließen Sie die Steckdose für containerView an. Fügen Sie die folgenden Codezeilen in die Delegatenfunktion CellforItemAtIndexPath ein.

//adds shadow to the layer of cell

cell.layer.cornerRadius = 3.0
    cell.layer.masksToBounds = false
    cell.layer.shadowColor = UIColor.black.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 0)
    cell.layer.shadowOpacity = 0.6

//makes the cell round 

let containerView = cell.containerView!
    containerView.layer.cornerRadius = 8
    containerView.clipsToBounds = true

Ausgabe

Siehe den Screenshot des Simulators

Answer 2

Alter Thread noch aktuell...

Ich habe die Methode von Daniel Gindi so bearbeitet, dass sie auch für Schaltflächen usw. verwendet werden kann. Wenn jemand abgerundete Ecken benötigt oder runde Ecken und einen Rahmen kombinieren möchte, muss dies auf der Ebene der Ansicht eingestellt werden, die an diese Methode übergeben wird. Ich habe auch die Rasterung so eingestellt, dass sie ein wenig schneller wird.

+ (UIView*)putView:(UIView*)view insideShadowWithColor:(CGColorRef)color 
                                 andRadius:(CGFloat)shadowRadius 
                                 andOffset:(CGSize)shadowOffset 
                                 andOpacity:(CGFloat)shadowOpacity
{
    // Must have same position like "view"
    UIView *shadow = [[UIView alloc] initWithFrame:view.frame]; 

    shadow.layer.contentsScale = [UIScreen mainScreen].scale;
    shadow.userInteractionEnabled = YES; // Modify this if needed
    shadow.layer.shadowColor = color;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = shadowRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;
    shadow.layer.rasterizationScale = [UIScreen mainScreen].scale;
    shadow.layer.shouldRasterize = YES;

    [view.superview insertSubview:shadow belowSubview:view];
    [shadow addSubview:view];

    // Move view to the top left corner inside the shadowview 
    // ---> Buttons etc are working again :)
    view.frame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height);

    return shadow;
}

Answer 3

Ich habe so viele Lösungen aus diesem Beitrag ausprobiert und bin bei der folgenden Lösung gelandet. Dies ist absolut sicher Lösung es sei denn, Sie brauchen einen Schlagschatten auf einer klaren Farbansicht .

- (void)addShadowWithRadius:(CGFloat)shadowRadius withOpacity:(CGFloat)shadowOpacity withOffset:(CGSize)shadowOffset withColor:(UIColor *)shadowColor withCornerradius:(CGFloat)cornerRadius
{
    UIView *viewShadow = [[UIView alloc]initWithFrame:self.frame];
    viewShadow.backgroundColor = [UIColor whiteColor];
    viewShadow.layer.shadowColor = shadowColor.CGColor;
    viewShadow.layer.shadowOffset = shadowOffset;
    viewShadow.layer.shadowRadius = shadowRadius;
    viewShadow.layer.shadowOpacity = shadowOpacity;
    viewShadow.layer.cornerRadius = cornerRadius;
    viewShadow.layer.masksToBounds = NO;
    [self.superview insertSubview:viewShadow belowSubview:self];

    [viewShadow setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0]];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0]];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:viewShadow attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];
    [self.superview addConstraint:[NSLayoutConstraint constraintWithItem:viewShadow attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:viewShadow attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0]];
    [self layoutIfNeeded];

    self.layer.cornerRadius = cornerRadius;
    self.layer.masksToBounds = YES;
}

Answer 4

Sie müssen zwei UIViews um dies zu erreichen. Eine UIView funktioniert wie ein Schatten und der andere für einen abgerundeten Rand.

Hier ist ein Codeschnipsel a Class Method mit Hilfe eines protocol :

@implementation UIMethods

+ (UIView *)genComposeButton:(UIViewController <UIComposeButtonDelegate> *)observer;
{
    UIView *shadow = [[UIView alloc]init];
    shadow.layer.cornerRadius = 5.0;
    shadow.layer.shadowColor = [[UIColor blackColor] CGColor];
    shadow.layer.shadowOpacity = 1.0;
    shadow.layer.shadowRadius = 10.0;
    shadow.layer.shadowOffset = CGSizeMake(0.0f, -0.5f);

    UIButton *btnCompose = [[UIButton alloc]initWithFrame:CGRectMake(0, 0,60, 60)];
    [btnCompose setUserInteractionEnabled:YES];
    btnCompose.layer.cornerRadius = 30;
    btnCompose.layer.masksToBounds = YES;
    [btnCompose setImage:[UIImage imageNamed:@"60x60"] forState:UIControlStateNormal];
    [btnCompose addTarget:observer action:@selector(btnCompose_click:) forControlEvents:UIControlEventTouchUpInside];
    [shadow addSubview:btnCompose];
    return shadow;
}

In dem obigen Code btnCompose_click: wird zu einer @required Delegate-Methode, die beim Klicken auf die Schaltfläche ausgelöst wird.

Und hier habe ich eine Schaltfläche zu meinem UIViewController wie diese:

UIView *btnCompose = [UIMethods genComposeButton:self];
btnCompose.frame = CGRectMake(self.view.frame.size.width - 75,
                          self.view.frame.size.height - 75,
                          60, 60);
[self.view addSubview:btnCompose];

Das Ergebnis sieht dann so aus:

Answer 5

Ich habe einige Änderungen am Code von daniel.gindi vorgenommen

Das ist alles, was Sie brauchen, damit es funktioniert.

+ (void)putView:(UIView*)view insideShadowWithColor:(UIColor*)color andBlur:         (CGFloat)blur andOffset:(CGSize)shadowOffset andOpacity:(CGFloat)shadowOpacity
{
    CGRect shadowFrame = view.frame;
    UIView * shadow = [[UIView alloc] initWithFrame:shadowFrame];
    shadow.backgroundColor = [UIColor redColor];
    shadow.userInteractionEnabled = YES; // Modify this if needed
    shadow.layer.shadowColor = color.CGColor;
    shadow.layer.shadowOffset = shadowOffset;
    shadow.layer.shadowRadius = blur;
    shadow.layer.cornerRadius = view.layer.cornerRadius;
    shadow.layer.masksToBounds = NO;
    shadow.clipsToBounds = NO;
    shadow.layer.shadowOpacity = shadowOpacity;
    [view.superview insertSubview:shadow belowSubview:view];
}