Swiftワン・ピース・コード：吹き出し用のViewを使う・・仕込み編　

著者：川上洋

公開日：2019/01/21

最終更新日：2019/01/21

カテゴリー：技術情報

タグ：Mac／Swift／Xcode

こんにちは。川上です。

所々の場所に、吹き出し感じのViewを諸々で表示してみました。
結構、面白いViewになりそうです。

まず、吹き出し感じのVieｗ（BalloonView）の仕込みから。。。

// enum Type
enum eBalloonType  : Int {
    case eBlloonUL = 0, //上Line-左側向け バルーン描き
	・・・
}

// enum Type

enum eBalloonType : Int {

case eBlloonUL = 0, //上Line-左側向けバルーン描き

・・・

}

//MARK: - ++++ 吹き出しView  BalloonView --
class BalloonView: UIView {
    let triangleSideLength: CGFloat = 20
    let triangleHeight: CGFloat = 17.3
    
    //ポップUpメニューの種類
    var swCtrll = eBalloonType.eBlloonUL
    var bkMyColor = UIColor.green
	
	
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        let context = UIGraphicsGetCurrentContext()
        context!.setFillColor(bkMyColor.cgColor)

        switch swCtrll {
        case eBalloonType.eBlloonUL:
            contextBalloonPath_UL(context: context!, rect: rect)
			・・・・
	   	}
	}

  // MARK: - 三角形印の矩形 上Line-左側向け バルーン描き
    func contextBalloonPath_UL(context: CGContext, rect: CGRect) {
        //角が丸い四角
        let maru:CGFloat = triangleHeight
        let roundRect = UIBezierPath(roundedRect: CGRect(x:rect.origin.x + maru,
                                                         y:rect.origin.y + maru,
                                                         width:rect.width - maru * 2,
                                                         height: rect.height - maru * 2),
                                     cornerRadius: 10)
        roundRect.lineWidth = 6
        roundRect.fill()

        //吹き出し三角つぶし
        let triangleRightCorner = (x: triangleSideLength * 2 , y: triangleHeight)
        let triangleBottomCorner = (x: triangleSideLength / 2, y: rect.origin.y)
        let triangleLeftCorner = (x: triangleSideLength , y: triangleHeight)
        context.move(to: CGPoint(x: triangleLeftCorner.x, y: triangleLeftCorner.y))
        context.addLine(to: CGPoint(x: triangleBottomCorner.x, y: triangleBottomCorner.y))
        context.addLine(to: CGPoint(x: triangleRightCorner.x, y: triangleRightCorner.y))
        context.fillPath()

    }	
}

//MARK: - ++++ 吹き出しView BalloonView --

class BalloonView: UIView {

let triangleSideLength: CGFloat = 20

let triangleHeight: CGFloat = 17.3

//ポップUpメニューの種類

var swCtrll = eBalloonType.eBlloonUL

var bkMyColor = UIColor.green

override func draw(_ rect: CGRect) {

super.draw(rect)

let context = UIGraphicsGetCurrentContext()

context!.setFillColor(bkMyColor.cgColor)

switch swCtrll {

case eBalloonType.eBlloonUL:

contextBalloonPath_UL(context: context!, rect: rect)

・・・・

}

// MARK: - 三角形印の矩形上Line-左側向けバルーン描き

func contextBalloonPath_UL(context: CGContext, rect: CGRect) {

//角が丸い四角

let maru:CGFloat = triangleHeight

let roundRect = UIBezierPath(roundedRect: CGRect(x:rect.origin.x + maru,

y:rect.origin.y + maru,

width:rect.width - maru * 2,

height: rect.height - maru * 2),

cornerRadius: 10)

roundRect.lineWidth = 6

roundRect.fill()

//吹き出し三角つぶし

let triangleRightCorner = (x: triangleSideLength * 2 , y: triangleHeight)

let triangleBottomCorner = (x: triangleSideLength / 2, y: rect.origin.y)

let triangleLeftCorner = (x: triangleSideLength , y: triangleHeight)

context.move(to: CGPoint(x: triangleLeftCorner.x, y: triangleLeftCorner.y))

context.addLine(to: CGPoint(x: triangleBottomCorner.x, y: triangleBottomCorner.y))

context.addLine(to: CGPoint(x: triangleRightCorner.x, y: triangleRightCorner.y))

context.fillPath()

}

仕込んだBalloonViewに、色んなボタンやカレンダーを組み込んで、貼り付けて行くのです。
ではでは。