如何将子视图添加到父视图范围之外

Question

我有一个带有贝塞尔路径蒙版层的视图。现在我需要在我的视图中添加一个子视图，它必须放在超级视图之外

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

}

虽然我的视图生成正确，但我的 shadowView 被 superView 边界裁剪。我怎样才能避免这种行为？

Answer 1

有几种方法可以实现您想要的：

方法一：在每个选项卡中插入阴影形状

创建您想要的选项卡，然后为每个选项卡添加自定义 CAShapeLayer：

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

你可以像这样访问标签和shadowLayer（给定一个数组'tabs'）：

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

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

方法二：移动阴影视图

另一种方法是创建一个自定义的“tabShadowView”，然后将其移动到所选选项卡的位置。下面是在自定义视图中布置选项卡的代码：

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

把上面的代码放在你布局视图的地方。 tabShadowView 是我们移动的视图，它位于视图层次结构的底部。然后 for 循环只是在它上面添加标签。以下是它使用的方法：

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

点击一个按钮，然后将阴影移动到所选选项卡下。代码又快又脏，你需要添加更多逻辑、清理等，但你明白了，方法一在每个中插入一个阴影视图，方法二在选项卡下方移动一个阴影视图。