レイヤーが重ね合わって、奥行き感を感じさせるようなデザインがiOS7から主流になるっぽいことを考慮してアイコンやボタンをタッチした時にTableViewが奥に引っ込むようにアニメーションというのをTitanium Mobileで作ってみました。
動作イメージが言葉だけで伝わるかどうかわからないので、図にしてみました
実装のポイント
自分が考える上では以下2つが実装時のポイントかなと思いました
-
「TableViewが奥に引っ込む」状態というのは、元々のサイズを縮小すれば割りとイメージした形になるかと思います。
-
奥に引っ込んだ状態なので、当然そのTableViewにタッチしても何も反応しないような状態を作りだす必要がある
TableViewが奥に引っ込む状態を作るのにTitanium.UI.create2DMatrix()を活用する
元々のサイズを縮小させるには、Titanium.UI.create2DMatrix()のscale()メソッドを活用することで実現出来ます。
ソースコードとしてはこのような感じになるかと思います。（CoffeeScriptで書いてます）
sample.coffee
tableView = Ti.UI.createTableView()
t = Titanium.UI.create2DMatrix().scale(0.6)
animationForTableView = Titanium.UI.createAnimation()
animationForTableView.transform = t
animationForTableView.duration = 250
tableView.animate(animationForTableView)
TableViewに触れても反応しないようにするために
これは、TableViewのtouchEnabled というプロパティを falseにすることで実現出来ます
ソースコードとしてはこのような感じになるかと思います。（CoffeeScriptで書いてます）
sample.coffee
tableView = Ti.UI.createTableView()
memoBtn.addEventListener('click',(e)=>
tableView.touchEnabled = false
)
ソースコード
今作ってるクラフトビールのアプリで上記の奥に引っ込む動作を実装しており、GitHub上にソースコード全部あります
ただ何処を見ていいのかわからないかと思うので、関連しそうな所を抜粋＆一部修正していかにまとめて見ました。
※ アイコン画像は、Ligature Symbolsというフォントを利用して実現しています。そのため Titanium Mobileでカスタムフォントを使用する方法などを参考にして、カスタムフォント利用できるようにする必要あります
app.coffee
app.coffee
tabGroup = Ti.UI.createTabGroup
tabsBackgroundColor:"#f9f9f9"
shadowImage:"ui/image/shadowimage.png"
tabsBackgroundImage:"ui/image/tabbar.png"
activeTabBackgroundImage:"ui/image/activetab.png"
activeTabIconTint:"#fffBD5"
tabGroup.addEventListener('focus',(e) ->
tabGroup._activeTab = e.tab
tabGroup._activeTabIndex = e.index
if tabGroup._activeTabIndex is -1
return
Ti.API._activeTab = tabGroup._activeTab;
Ti.API.info tabGroup._activeTab
return
)
ListWindow = require("favoriteWindow")
listWindow = new ListWindow()
listTab = Titanium.UI.createTab
window:listWindow
icon:"ui/image/light_list.png"
tabGroup.addTab listTab
tabGroup.open()
ウィンドウ生成するfavoriteWindow.coffeeのソースコード
favoriteWindow.coffee
class favoriteWindow
constructor:() ->
keyColor = "#f9f9f9"
@baseColor =
barColor:keyColor
backgroundColor:keyColor
@favoriteWindow = Ti.UI.createWindow
title:"お気に入り"
barColor:@baseColor.barColor
backgroundColor: @baseColor.backgroundColor
tabBarHidden:false
navBarHidden:false
@_createNavbarElement()
@table = Ti.UI.createTableView
backgroundColor: @baseColor.backgroundColor
selectedBackgroundColor:@baseColor.backgroundColor
style: Titanium.UI.iPhone.TableViewStyle.GROUPED
width:'auto'
height:'auto'
top:0
left:0
userID = Ti.App.Properties.getString "currentUserId"
items = [{"state":"北海道","shopFlg":false,"name":"EL MARQUEZ (エルマルケス）","phone_number":"011-280-0988","address":"札幌市中央区南四条西5","latitude":"43.05546","longitude":"141.351044"},{"state":"青森県","shopFlg":false,"name":"FUSION BAR 3","phone_number":"0178-44-0225","address":"八戸市長横町18","latitude":"40.508695","longitude":"141.492509"},{"state":"岩手県","shopFlg":false,"name":"自家焙煎珈琲＆Bar バロック","phone_number":"090-9842-0739","address":"盛岡市中ノ橋通1-10-5 さかしたビル2F","latitude":"39.699572","longitude":"141.156627"},{"state":"秋田県","shopFlg":false,"name":"Herbal Cafe PRANA","phone_number":"018-863-2286","address":"秋田市泉中央4-14-27","latitude":"39.734687","longitude":"140.116251"}]
for item in items
row = @_createShopDataRow(item)
rows.push(row)
@table.setData rows
@favoriteWindow.add @table
# 詳細情報の画面に遷移する
activeTab = Ti.API._activeTab
return activeTab.open(@favoriteWindow)
_createNavbarElement:() ->
backButton = Titanium.UI.createButton
backgroundImage:"ui/image/backButton.png"
width:44
height:44
backButton.addEventListener('click',(e) =>
return @favoriteWindow.close({animated:true})
)
@favoriteWindow.leftNavButton = backButton
favoriteWindowTitle = Ti.UI.createLabel
textAlign: 'center'
color:'#333'
font:
fontSize:18
fontFamily : 'Rounded M+ 1p'
fontWeight:'bold'
text:"お気に入り"
if Ti.Platform.osname is 'iphone'
@favoriteWindow.setTitleControl favoriteWindowTitle
return
_createShopDataRow:(placeData) ->
row = Ti.UI.createTableViewRow
width:'auto'
height:60
borderWidth:0
placeData:placeData
className:'shopData'
backgroundColor:@baseColor.barColor
selectedBackgroundColor:@baseColor.backgroundColor
titleLabel = Ti.UI.createLabel
width:200
height:20
top:10
left:50
color:'#333'
font:
fontSize:16
fontWeight:'bold'
fontFamily : 'Rounded M+ 1p'
text:"#{placeData.shopName}"
row.add titleLabel
moveNextWindowBtn = Ti.UI.createButton
top:10
right:5
width:40
height:40
content:placeData
selected:false
backgroundImage:"NONE"
borderWidth:0
borderRadius:20
color:'#bbb'
font:
fontSize: 24
fontFamily:'LigatureSymbols'
title:String.fromCharCode("0xe112")
moveNextWindowBtn.addEventListener('click',(e) =>
data =
shopName:row.placeData.name
shopAddress:row.placeData.address
phoneNumber:row.placeData.phone_number
latitude:row.placeData.latitude
longitude:row.placeData.longitude
ShopDataDetailWindow = require("ui/shopDataDetailWindow")
new ShopDataDetailWindow(data)
)
row.add moveNextWindowBtn
leftPostion = [50, 75, 100, 125, 150]
for i in [0..placeData.rating]
starIcon = Ti.UI.createButton
top:30
left:leftPostion[i]
width:20
height:20
selected:false
backgroundColor:@baseColor.barColor
backgroundImage:"NONE"
borderWidth:0
borderRadius:5
color:"#FFEE55"
font:
fontSize: 20
fontFamily:'LigatureSymbols'
title:String.fromCharCode("0xe121")
row.add starIcon
if typeof placeData.content is "undefined" or placeData.content is null
content = ""
else
commentView = @_createCommentView(placeData)
@favoriteWindow.add commentView
memoBtn = Ti.UI.createButton
top:5
left:5
width:40
height:40
content:placeData
selected:false
backgroundImage:"NONE"
borderWidth:0
borderRadius:0
color:'#ccc'
backgroundColor:@baseColor.barColor
font:
fontSize:28
fontFamily:'LigatureSymbols'
title:String.fromCharCode("0xe097")
memoBtn.addEventListener('click',(e)=>
# tableViewは奥の方に下がったように見せたいので少しだけアニメーション
# させる
@table.opacity = 0.5
@table.touchEnabled = false
t = Titanium.UI.create2DMatrix().scale(0.6)
animationForTableView = Titanium.UI.createAnimation()
animationForTableView.transform = t
animationForTableView.duration = 250
@table.animate(animationForTableView)
t1 = Titanium.UI.create2DMatrix()
t1 = t1.scale(1.0)
animation = Titanium.UI.createAnimation()
animation.transform = t1
animation.duration = 250
commentView.animate(animation)
)
row.add memoBtn
return row
_createCommentView:(placeData)->
content = placeData.content
t = Titanium.UI.create2DMatrix().scale(0.0)
commentView = Titanium.UI.createScrollView
width:240
height:240
top:20
left:40
zIndex:10
contentWidth:'auto'
contentHeight:'auto'
showVerticalScrollIndicator:true
showHorizontalScrollIndicator:true
transform:t
backgroundColor:@baseColor.barColor
borderRadius:10
borderColor:"#ccc"
closeBtn = Ti.UI.createButton
top:5
right:5
width:40
height:40
content:placeData
selected:false
backgroundColor:@baseColor.barColor
backgroundImage:"NONE"
borderWidth:0
borderRadius:5
color:'#ccc'
font:
fontSize: 32
fontFamily:'LigatureSymbols'
title:String.fromCharCode("0xe10f")
closeBtn.addEventListener('click',(e) =>
# tableViewのレイアウトをもとに戻す
@table.opacity = 1.0
@table.touchEnabled = true
t = Titanium.UI.create2DMatrix().scale(1.0)
animationForTableView = Titanium.UI.createAnimation()
animationForTableView.transform = t
animationForTableView.duration = 250
@table.animate(animationForTableView)
t2 = Titanium.UI.create2DMatrix()
t2 = t2.scale(0.0)
animation = Titanium.UI.createAnimation()
animation.transform = t2
animation.duration = 250
commentView.animate(animation)
)
commentLabel = Ti.UI.createLabel
font:
fontSize:16
fontFamily:'Rounded M+ 1p'
fontWeight:'bold'
text:content
width:'auto'
top:50
left:5
commentView.add commentLabel
commentView.add closeBtn
return commentView
module.exports = favoriteWindow