チャットアイテムの上部の角、境界線、および影の表示

Question

私はチャットアイテムのように見えるカスタムセルを作成しようとしています。 チャレンジアイテムは、上隅に三角形を追加し、チャットアイテムの共通の枠線と影を作ることですか？

すべての「雲」の幅は同じです。

これを達成する最も良い方法は何ですか？

Answer 1

私はアイデアを持っている：

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

使用法：

は "クラウド" の "尾" を描画するのUIViewのサブクラストライアングルを作成します。 ：

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