UIButton顶部和底部边框附加线

时间:2015-07-12 07:22:31

标签: ios objective-c xcode uibutton

我正在尝试将一个顶部和底部边框添加到一个uibutton我的函数来添加边框看起来像这样

    CALayer *topBorder = [CALayer layer];

    topBorder.frame = CGRectMake(os, 1.0f, b.bounds.size.width - (os * 2.0f), 1.0f);

    topBorder.backgroundColor = [c1 CGColor];

    [b.layer addSublayer:topBorder];

    CALayer *bottomBorder = [CALayer layer];

    bottomBorder.frame = CGRectMake(os, b.bounds.size.height, b.bounds.size.width - (os * 2.0f), 1.0f);

    bottomBorder.backgroundColor = [c1 CGColor];

    [b.layer addSublayer:bottomBorder];

    //os..offset, b..uibutton, c1..color

当我在viewDidAppear中调用该函数时,这工作正常(但是有一个延迟)但是当我把它放在viewdidlayoutsubviews时,它会添加一个额外的行,这看起来像这样 enter image description here

我为它的superview设置了一个前导和尾随空间,我在这里做错了什么?

1 个答案:

答案 0 :(得分:0)

当您在屏幕上显示视图并且每次从导航流程中的其他视图控制器返回时,将执行viewDidAppear。所以你的代码多次添加行。您可以查看视图控制器生命周期here

如果您要删除“延迟”并执行一次,请在viewDidLoad中编写代码。

更新

我看到两种方法。创建一个UIButton子类,然后:

  1. 如果您想继续使用CALayers,则需要调用重绘方法,始终按钮更改其大小。如果动画更改将出现奇怪的神器。

  2. 好的。我建议您使用'drawRect'绘制这些线条并使用按钮框架动态计算线条XY。如果您按钮改变其大小,动画与否......没问题,Core Animation可以完成所有工作。

    - (void)drawRect:(CGRect)rect
    {
        // Frames
        CGRect frame = self.bounds;
    
        // Parameters (change these values if you want to change appearance)
        UIColor *lineColor = [UIColor colorWithRed: 0.5 green: 0.5 blue: 0.5 alpha: 1];
        CGFloat topRatioPositionY = 0.02;
        CGFloat middleRatioPositionY = 0.6;
        CGFloat bottomRatioPositionY = 0.98;
        CGFloat middleRatioPositionX = 0.33333;
        CGFloat lineWidth = 1.0;
    
        //// Top line
        UIBezierPath* bezierPath = [UIBezierPath bezierPath];
        [bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame) + topRatioPositionY * CGRectGetHeight(frame))];
        [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 1.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + topRatioPositionY * CGRectGetHeight(frame))];
        [lineColor setStroke];
        bezierPath.lineWidth = lineWidth;
        [bezierPath stroke];
    
    
        // Middle line
        UIBezierPath* bezier2Path = [UIBezierPath bezierPath];
        [bezier2Path moveToPoint: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame) + bottomRatioPositionY * CGRectGetHeight(frame))];
        [bezier2Path addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 1.00000 * CGRectGetWidth(frame), CGRectGetMinY(frame) + bottomRatioPositionY * CGRectGetHeight(frame))];
        [lineColor setStroke];
        bezier2Path.lineWidth = lineWidth;
        [bezier2Path stroke];
    
    
        // Bottom Line
        UIBezierPath* bezier3Path = [UIBezierPath bezierPath];
        [bezier3Path moveToPoint: CGPointMake(CGRectGetMinX(frame), CGRectGetMinY(frame) + middleRatioPositionY * CGRectGetHeight(frame))];
        [bezier3Path addLineToPoint: CGPointMake(CGRectGetMinX(frame) + middleRatioPositionX * CGRectGetWidth(frame), CGRectGetMinY(frame) + middleRatioPositionY * CGRectGetHeight(frame))];
        [lineColor setStroke];
        bezier3Path.lineWidth = lineWidth;
        [bezier3Path stroke];
    
    }// drawRect:
    
  3. 我已将此source code与CALayer和UIBezierPath解决方案相关联。触摸按钮,看到它们发生变化时的差异。