40歳からのキャリアチェンジ

20代はエンジニア・PM、30代はWeb系エンジニア向けのキャリアアドバイザー。40代の今はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連あたり

画像を使わずに吹き出しUIを実現する方法

最近のアプリのUIでは、このように↓ 画像の下に吹き出しのボックスを配置してそこにコメントや説明文が標示されるものをみかけると思います

f:id:h5y1m141:20130406185125j:plain

最初、これ実現するのに、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を準備。以下のキャプチャだと緑色の部分になります

f:id:h5y1m141:20130406185403p:plain

実際の画面キャプチャとソースコード

キャプチャ

f:id:h5y1m141:20130406185810p:plain

該当しそうなソースコードのみ抜粋

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