PixateでTitaniumでもUIにドロップシャドー適用出来る

f:id:h5y1m141:20130217093033p:plain

娘の幼稚園入園前のイベントがあって自分はtiTokyo参加してないこともあって、TouchTestとか何か面白い話題が出てみたいですがそんなことを気にせずpixateのことでも書こうかと思います

Pixateとは？

iOSアプリのUI部分をcssで書けるライブラリ。詳しくはnaoyaさんのPixateのエントリが詳しいのでそちらをご覧いただくのがいいいかと思います

Pixateを知った経緯

自分はTitanium中心に情報をチェックしてるのですが、Titanium Mobile開発やってる人にRubyMotionをオススメする理由というエントリを以前書いたように、Ruby Motionの情報も一応追ってます。

そっちの情報見てたら、Ruby Motion開発の開発チーム中の人から

@h5y1m141 リリースノートに近いうちに Ti 用のライブラリを出すようなことが書かれてますね :) cdn.pixate.com/docs/engine/io…
— watson (@watson1978) January 23, 2013

ということを教わり、その後、Titaniumも一応サポートされるようになったのと、個人利用なら無料で利用可能に最近なったので試してみました

導入方法

導入方法とかはTitanium Mobile に Pixate Betaを導入してサンプルを動してみたが参考になると思いますが、上記ブログの方は有償版を利用されているのでLICENSE USERNAMEとかLICENSE KEYは入力しなくてもOKなので

<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
    <modules>
        <module platform="iphone" version="1.0.3">com.pixate.pxengine</module>
    </modules>

という感じで、tiapp.xmlのの所にcom.pixate.pxengineを読み込む記述だけされていればOKです。

サンプル

app.coffee

win = Ti.UI.createWindow
  title:'Tab 1'
  backgroundColor:'#fff'
  navBarHidden: true

win1 = Ti.UI.createWindow
  title:'Tab 2'
  backgroundColor:'#fff'
  navBarHidden: true
    
search = Titanium.UI.createSearchBar(
  showCancel: true
  height: 43
  top: 0
  styleId: "mySearch1"
)



view = Ti.UI.createView
  width: 320
  height: 150
  top: 50
  styleId: "previewView"

tableView = Ti.UI.createTableView
  width: 320
  height: 280
  top: 200
  styleId: "tableView"

win.add search
win.add view
win.add tableView

mainTab = Ti.UI.createTab
  window: win
  icon:"KS_nav_ui.png"  
  
configTab = Ti.UI.createTab
  window: win1
  title:'main'
  icon:"KS_nav_views.png"  

tabGroup = Ti.UI.createTabGroup(
  title:'sub'
  styleId:'tab-bar2'
)

tabGroup.addTab mainTab
tabGroup.addTab configTab

tabGroup.open()

default.css

#mySearch1 {
    background-color    : #6a965a;
    box-shadow      : 0 2px 2px rgba(0,0,0,0.5);
}


#previewView {
    background-color: linear-gradient(#292e31, #3a3f42);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 1px rgba(0,0,0,0.5);
}

#tableView {
    background-color: linear-gradient(#588449, #5f8b50);
    box-shadow: inset 0 2px 3px #000000;
    /* background-color: #f1f1f1; */
    separator-style: solid-line;
}

#myLabel {
    font-size: 14px;
    font-weight: regular;
    color: #c8cbcd
}

#tab-bar1 {
    color:#2f6ba6;
}

#tab-bar2 {
    color:gray;
    selected-color:green;
    background-color: linear-gradient(#3c4145, #585e62);
    border-width: 1px;
    border-color: #212325;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 1px rgba(0,0,0,0.5);
}

#tab-bar2 tab-bar-item{
    color: white;
}