Comment ajouter une sous-vue aux limites de la vue parente

Question

J'ai une vue avec la couche de masque de chemin de bezier. Maintenant, je dois ajouter à mon avis un sous-vue, qui doit être placé à l'extérieur de la Superview

class MiddleSegmentView: UIView { 

override func layoutSubviews() { 
    super.layoutSubviews() 
    createMaskView() 
} 

func createPath() -> UIBezierPath { 
    let width = self.frame.size.width 
    let height = self.frame.size.height 
    let lineWidth = -height/tan(angle) 

    let path = UIBezierPath() 
    path.moveToPoint(CGPoint(x: 0.0, y: 0.0)) 
    path.addLineToPoint(CGPoint(x: width, y: 0)) 
    path.addLineToPoint(CGPoint(x: width - lineWidth, y: height)) 
    path.addLineToPoint(CGPoint(x: lineWidth, y: height)) 
    path.addLineToPoint(CGPoint(x: 0.0, y: 0.0)) 
    path.closePath() 

    return path 
} 

func createMaskView() { 
    let mask = CAShapeLayer() 
    mask.path = createPath().CGPath 
    self.layer.mask = mask 
} 

    //Creating shadow 

    override func drawRect(rect: CGRect) { 
    super.drawRect(rect) 
    //createShadow() 
    let shadowView = SegmentShadow(frame: CGRect(x: 0, y: 0, width: 10, height: 40)) 
    self.clipsToBounds = false 
    self.addSubview(shadowView) 
    shadowView.bringToFront() 
} 

} 

Bien que mon avis génère correctement mon shadowView est recadrée par des bornes étant SuperView. Comment puis-je éviter un tel comportement?

Answer 1

Il y a deux façons d'obtenir ce que vous voulez:

méthode: INSERT OMBRE FORME DANS CHAQUE TAB

Créez les onglets que vous voulez puis ajoutez un CAShapeLayer personnalisé à chacun:

//insert a CAShapeLayer into each 'tab' 
CAShapeLayer * shadowLayer = [self trapezium]; 
shadowLayer.fillColor = grey.CGColor; 
shadowLayer.shadowOpacity = 1.0f; 
shadowLayer.shadowRadius = 1.0f; 
shadowLayer.shadowOffset = CGSizeZero; 
shadowLayer.shadowColor = [UIColor blackColor].CGColor; 
[tab.layer insertSublayer:shadowLayer atIndex:0]; 

Vous pouvez accéder aux onglets et shadowLayer comme celui-ci (étant donné un tableau 'onglets'):

//then access like this 
UIView * tab = tabs[2]; 
[self.view bringSubviewToFront:tab]; 

CAShapeLayer * layer = (CAShapeLayer*)tab.layer.sublayers[0]; 
layer.fillColor = orange.CGColor; 

MÉTHODE DEUX: MOVE OMBRE VUE

Une autre façon est de créez un 'tabShadowView' personnalisé et déplacez-le simplement vers l'emplacement de l'onglet sélectionné. Voici le code pour la pose les onglets dans une vue personnalisée:

grey = [_peacock colourForHex:@"#ACA499" andAlpha:1.0f]; 
orange = [_peacock colourForHex:@"#CB9652" andAlpha:1.0f]; 

tabShadowView = [UIView new]; 
tabShadowView.frame = CGRectMake(0, 20, 100, 40); 
tabShadowView.layer.shadowPath = [self trapezium].path; 
tabShadowView.layer.shadowColor = [UIColor blackColor].CGColor; 
tabShadowView.layer.shadowOffset = CGSizeZero; 
tabShadowView.layer.shadowRadius = 1.0f; 
tabShadowView.layer.shadowOpacity = 0.5f; 
[self.view addSubview:tabShadowView]; 

customTabView = [UIView new]; 
customTabView.frame = CGRectMake(0, 0, w, 60); 
[self.view addSubview:customTabView]; 

NSArray * titles = @[@"Button A", @"Button B", @"Button C",@"Button D"]; 
tabs = [NSMutableArray new]; 

float xOff = 0.0f; 
for (NSString * title in titles){ 

    UIView * tab = [UIView new]; 
    tab.frame = CGRectMake(xOff, 20, 100, 40); 
    tab.backgroundColor = grey; 
    tab.layer.mask = [self trapezium]; 
    [customTabView addSubview:tab]; 
    [tabs addObject:tab]; 

    UIButton * button = [UIButton new]; 
    button.frame = tab.bounds; 
    [button setTitle:title forState:UIControlStateNormal]; 
    [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; 
    button.titleLabel.textAlignment = NSTextAlignmentCenter; 
    button.titleLabel.font = [UIFont systemFontOfSize:14.0f weight:UIFontWeightRegular]; 
    [button addTarget:self action:@selector(tabSelected:) forControlEvents:UIControlEventTouchUpInside]; 
    [button setTag:[titles indexOfObject:title]]; 
    [tab addSubview:button]; 

    xOff += 70.0f; 
} 

[self updateTabsForSelected:tabs[1]]; 

Mettre le code ci-dessus dans l'endroit où vous LayOut votre point de vue. La tabShadowView est la vue sur laquelle nous nous déplaçons, elle se trouve tout en bas de la hiérarchie de la vue. Alors la boucle for ajoute simplement des onglets dessus. Voici les méthodes qu'il utilise:

-(void)tabSelected:(UIButton *)button { 

    UIView * tab = tabs[(int)button.tag]; 
    [self updateTabsForSelected:tab]; 
} 
-(void)updateTabsForSelected:(UIView *)tab{ 

    for (UIView * view in customTabView.subviews){ 

     [customTabView sendSubviewToBack:view]; 
     view.backgroundColor = grey; 
    } 

    [customTabView bringSubviewToFront:tab]; 
    tab.backgroundColor = orange; 
    tabShadowView.transform = CGAffineTransformMakeTranslation([tabs indexOfObject:tab]*70, 0); 
} 
-(CAShapeLayer *)trapezium { 

    UIBezierPath * path = [UIBezierPath bezierPath]; 
    [path moveToPoint:CGPointZero]; 
    [path addLineToPoint:CGPointMake(20, 40)]; 
    [path addLineToPoint:CGPointMake(80, 40)]; 
    [path addLineToPoint:CGPointMake(100, 0)]; 
    [path closePath]; 

    CAShapeLayer * layer = [CAShapeLayer layer]; 
    layer.path = path.CGPath; 

    return layer; 
} 

Tapoter sur un bouton puis déplace l'ombre sous l'onglet sélectionné. Le code est rapide et sale, vous devrez ajouter plus de logique, nettoyer etc, mais vous obtenez le point, la méthode un insère une vue d'ombre dans chacun, la méthode deux déplace une seule vue sous les onglets.