UIView with rounded corners and drop shadow?

前端 未结 30 3160
一整个雨季
一整个雨季 2020-11-22 08:00

I’ve been working on an application for a couple of years and received a simple design request: Round the corners on a UIView and add a drop shadow.To do as given below.

30条回答
  •  清歌不尽
    2020-11-22 08:13

    After one whole day research of the round corner view with shadow, I'm glad to post my custom uiview class here, hope to end this question:

    RoundCornerShadowView.h

    #import 
    
    @interface RoundCornerShadowView : UIView
    
    @end
    

    RoundCornerShadowView.m

    #import "RoundCornerShadowView.h"
    
    @implementation RoundCornerShadowView
    
    // *** must override this method, not the other method ***
    // otherwise, the background corner doesn't disappear....
    // @2015/05/29
    -(void) layoutSubviews {
        [super layoutSubviews];//is must to ensure rightly layout children view
    
        //1. first, create Inner layer with content
        CALayer *innerView = [CALayer layer];
        innerView.frame = CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height);
        //instead of: innerView.frame = self.frame;
        innerView.borderWidth = 1.0f;
        innerView.cornerRadius = 6.0f;
        innerView.masksToBounds = YES;
        innerView.borderColor = [[UIColor lightGrayColor] CGColor];
        innerView.backgroundColor = [[UIColor whiteColor] CGColor];
        //put the layer to the BOTTOM of layers is also a MUST step...
        //otherwise this layer will overlay the sub uiviews in current uiview...
        [self.layer insertSublayer:innerView atIndex:0];
    
        //2. then, create shadow with self layer
        self.layer.masksToBounds = NO;
        self.layer.shadowColor = [[UIColor darkGrayColor] CGColor];
        self.layer.shadowOpacity = 0.4f;
        //shadow length
        self.layer.shadowRadius = 2.0f;
        //no offset
        self.layer.shadowOffset = CGSizeMake(0, 0);
        //right down shadow
        //[self.layer setShadowOffset: CGSizeMake(1.0f, 1.0f)];
    
        //3. last but important, MUST clear current view background color, or the color will show in the corner!
        self.backgroundColor = [UIColor clearColor];
    }
    
    @end
    

    so, NO need to add subview in view or below in target view, just add one layer in current view, and do 3 step to complete it!

    take a close look at to the comments in the code, it's helpful to understanding the component!

提交回复
热议问题