画像を使わずに吹き出しUIを実現する方法
最近のアプリのUIでは、このように↓ 画像の下に吹き出しのボックスを配置してそこにコメントや説明文が標示されるものをみかけると思います
最初、これ実現するのに、Photoshop等で素材の画像を準備して・・・と考えていたのですが、Titaniumの標準のAPIを駆使してちょっと小細工しあげることで、意外と簡単に実現できるのがわかったのでまとめておきます
実装のポイント
一番悩んだのが、吹き出し部分の三角形の作り方。「Titanium draw line」みたいなキーワードでググってもWebViewを使ってcanvasタグ、もしくはRaphaël—JavaScript Libraryを使えばいいみたいな情報しか見つからずにちょっと諦めようと思ったのですが
「TI.UI.ImageViewを45度回転させて、上下半分に切ったように見せればいいんじゃないかな?」
という考えに気づきそこから突破口が見えました。
TI.UI.ImageViewを3つ準備して、それぞれいかのような役割を果たすようにしてます
三角形っぽく見せるためのTI.UI.ImageViewを準備して、これは45度回転させて、一番下に配置させる(zIndexの値を0にする)以下のキャプチャでは赤く囲っている部分になります
吹き出しの説明文を格納するためのconainer的なものを準備して、45度回転させた上記ImageViewの上半分が標示されるようにtop 位置を合わせる。以下のキャプチャだと青色で囲っている部分になります
containerの枠線の一部を消すための線となるTI.UI.ImageViewを準備。以下のキャプチャだと緑色の部分になります
実際の画面キャプチャとソースコード
キャプチャ
該当しそうなソースコードのみ抜粋
bodySummary = Ti.UI.createLabel width:220 height:60 left:25 top:10 color:"#444" borderRadius:3 font: fontSize:12 text:entry.content triangleImage = Ti.UI.createImageView width:15 height:15 left:60 top:260 borderRadius:3 transform : Ti.UI.create2DMatrix().rotate(45) borderColor:"#bbb" borderWidth:1 zIndex:0 backgroundColor:"#fff" breakLine = Ti.UI.createImageView width:15 height:1 left:60 top:265 zIndex:10 backgroundColor:"#fff" messageBoxContainer = Ti.UI.createView width:270 height:80 left:25 top:265 zIndex:5 borderColor:"#bbb" borderWidth:1 borderRadius:5 backgroundGradient: type: 'linear' startPoint: x:'0%' y:'0%' endPoint: x:'0%' y:'100%' colors: [ color: '#fff' position: 0.0 , color: '#fefefe' position: 0.3 , color: '#eee' position: 1.0 ] messageBoxContainer.add bodySummary row.add triangleImage row.add breakLine row.add messageBoxContainer