ios - 带有顶角、边框和阴影的聊天项目 View

Question

我正在尝试创建看起来像聊天项目的自定义单元格。挑战是:在顶角添加三角形并制作聊天项目的公共(public)边框和阴影？

所有“云”的宽度都是相同的。

实现这一目标的最佳方法是什么？

Answer 1

我有一个想法:

创建UIView的子类Triangle来绘制“云”的“尾部”:

class LeftTriangleView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }

        context.beginPath()
        context.move(to: CGPoint(x: rect.minX, y: rect.minY))
        context.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        context.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        context.closePath()

        context.setFillColor(UIColor.gray.cgColor)
        context.fillPath()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}



class RightTriangleView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }

        context.beginPath()
        context.move(to: CGPoint(x: rect.minX, y: rect.maxY))
        context.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
        context.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        context.closePath()


        context.setFillColor(UIColor.blue.cgColor)
        context.fillPath()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

用法:

let leftTailView: LeftTriangleView = {
        let tail = LeftTriangleView()
        tail.backgroundColor = .white
        tail.isHidden = true

        return tail
    }()

let rightTailView: RightTriangleView = {
        let tail = RightTriangleView()
        tail.backgroundColor = .white
        tail.isHidden = true

        return tail
    }()

let cloudView: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor(white: 0.95, alpha: 1)
        view.layer.cornerRadius = 5
        view.layer.masksToBounds = true

        return view
    }()



addSubview(cloudView)
addSubview(leftTailView)
addSubview(rightTailView)



leftTailView.anchor(topAnchor, left: nil, bottom: nil, right: bubbleView.leftAnchor, topConstant: 5, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 9, heightConstant: 6)

rightTailView.anchor(topAnchor, left: bubbleView.rightAnchor, bottom: nil, right: nil, topConstant: 5, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 9, heightConstant: 6)



If send message: 

rightTailView.isHidden = false


If received message: 

leftTailView.isHidden = false