Question

我有一个UIView我在xib文件中创建并集成在我的故事板中。此视图类似于您可以拖动以显示它的选项卡。

我想在顶部边缘添加一个小矩形，这样当隐藏UIView时，只有小矩形可见，我可以通过拖动这个小矩形来拉UIView。

为此，我覆盖了drawRect

的UIView方法

override func drawRect(rect: CGRect) {
    super.drawRect(rect)

    let context = UIGraphicsGetCurrentContext()
    CGContextSetFillColorWithColor(context, UIColor.purpleColor().CGColor)
    CGContextMoveToPoint(context, rect.width / 2 - 20, 0)
    CGContextAddLineToPoint(context, rect.width / 2 - 20, -20)
    CGContextAddLineToPoint(context, rect.width / 2 + 20, -20)
    CGContextAddLineToPoint(context, rect.width / 2 + 20, 0)
    CGContextFillPath(context)
}

当我运行它时，我看不到任何东西，甚至在视图层次结构中......

我做错了吗？

Answer 1

您拖动的矩形必须位于视图内（或单独的视图），因为超出其超级视图范围的视图不会接收到触摸。我这样做的方法是使用CAShapeLayer作为视图的遮罩，让它从视图的顶部开始20点，然后在宽度的一半减去20等上升到视图的顶部，等等。会给视图一个背景颜色，但它只显示掩码的位置，在其他地方，它将是透明的。在这种情况下，您可以放置视图，使得前20个点位于屏幕底部，其余部分位于屏幕下方。只有遮罩贴在视图顶部的矩形才会显示颜色。以下是视图类的代码

class RDPullTabView: UIView {
    let upSwiper = UISwipeGestureRecognizer()
    let downSwiper = UISwipeGestureRecognizer()
    let shapeLayer = CAShapeLayer()
    let bez = UIBezierPath()

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.backgroundColor = UIColor.purpleColor()
        self.layer.mask = shapeLayer
        upSwiper.direction = .Up
        downSwiper.direction = .Down
        self.addGestureRecognizer(upSwiper)
        self.addGestureRecognizer(downSwiper)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        bez.moveToPoint(CGPoint(x: 0, y: 20))
        bez.addLineToPoint(CGPoint(x: self.bounds.size.width/2 - 20, y: 20))
        bez.addLineToPoint(CGPoint(x: self.bounds.size.width/2 - 20, y: 0))
        bez.addLineToPoint(CGPoint(x: self.bounds.size.width/2 + 20, y: 0))
        bez.addLineToPoint(CGPoint(x: self.bounds.size.width/2 + 20, y: 20))
        bez.addLineToPoint(CGPoint(x: self.bounds.size.width, y: 20))
        bez.addLineToPoint(CGPoint(x: self.bounds.size.width, y: self.bounds.size.height))
        bez.addLineToPoint(CGPoint(x: 0, y: self.bounds.size.height))
        bez.closePath()
        shapeLayer.path = bez.CGPath
    }
}

我从这个视图的顶部到控制器的self.view底部做了一个约束，常量为20.控制器中的代码是这样的，

class ViewController: UIViewController {

    @IBOutlet weak var pullTabView: RDPullTabView!
    @IBOutlet weak var bottomCon: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()
        pullTabView.upSwiper.addTarget(self, action: "handleSwipe:")
        pullTabView.downSwiper.addTarget(self, action: "handleSwipe:")
    }

    func handleSwipe(swiper: UISwipeGestureRecognizer) {
        var point = swiper.locationInView(swiper.view)
        if pullTabView.bez.containsPoint(point) {
            if swiper.direction == UISwipeGestureRecognizerDirection.Up {
                bottomCon.constant = 200 // 200 is the height of the pullTabView
            }else{
                bottomCon.constant = 20;
            }
            UIView.animateWithDuration(0.3){ self.view.layoutIfNeeded()}
        }
    }
}

Answer 2

使用UIView作为子视图添加backgroundColor会不会更简单？

let aView = UIView(frame:
  CGRect(x: 0, y: 0, width: 200, height: 200))

let subView = UIView(frame:
  CGRect(x: 0, y: aView.frame.height + 20, width: 20, height: 20))

subView.backgroundColor = UIColor.purpleColor()
aView.addSubview(subView)

// Subview will move relative, and 20 points should still be visible
aView.frame.origin.y = -200

Answer 3

你需要开始＆amp;在抚摸/填充它之前关闭你的路径。下面的代码在中间绘制一个rect（drawRect调用的原点）：

override func drawRect(rect: CGRect)
{
    let context = UIGraphicsGetCurrentContext()
    CGContextSetFillColorWithColor(context, UIColor.purpleColor().CGColor)
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, rect.width / 2 - 20, rect.height / 2 + 20)
    CGContextAddLineToPoint(context, rect.width / 2 - 20, rect.height / 2 - 20)
    CGContextAddLineToPoint(context, rect.width / 2 + 20, rect.height / 2 - 20)
    CGContextAddLineToPoint(context, rect.width / 2 + 20, rect.height / 2 + 20)
    CGContextClosePath(context); // close path
    CGContextFillPath(context)
}

如果您仍然没有看到任何内容，我建议您的下一站是使用superview / controller确定视图约束的自动布局。

在我的UIView的上边缘添加一个矩形

3 个答案: