2012年8月15日水曜日

PaperFold for iOSのTitanium Mobileモジュールを作ったよー


※pullFactorを摩擦係数と表記してましたが、摩擦係数とは違っているようなので訂正します。ただの係数と表記を変えました。(この係数がどういう役割を果たすのか解析します --;

そろそろモジュールを書きたいなと思ってたところに、PaperFold for iOS というiOSのライブラリをTitanium Mobileのモジュールにしてくれない?っていう依頼があって、これがまたとてもおもしろいライブラリなのでやってみました。

PaperFold for iOSって?

1) 画面の左右に2つのビューが仕込んであります。
2) 真ん中のビューを左右にドラッグすると、左右の隠れていたビューが折り畳まれた紙を広げるように表れます。
3) 広げたビューは逆方向にドラッグすると今度は紙を折り畳むように隠れてゆきます。

実際に動いてるのを見た方が早いですね。


Copyright 2012, Semantic Press, Inc.

モジュールの使い方

ソースコードは、 https://github.com/atsusy/TiPaperFold 。ビルドの仕方は割愛しますが、Xcode 4.4以降じゃないとビルドできません。(元ライブラリがsynthesizeを省略しているので)

ビルドが成功するとjp.msmc.tipaperfold-iphone-0.1.zipというファイルが出来上がります。

1) jp.msmc.tipaperfold-iphone-0.1.zipをTitanium Mobileのプロジェクトディレクトリにコピー
2) tiapp.xmlのタグ内に
<module platform="iphone" version="0.1">jp.msmc.tipaperfold</module>
3) プロジェクトをリビルド


以上でモジュールをあなたのプロジェクトに組み込む事が出来ます。

(最近のTitanium Studioだとtiapp.xmlの設定画面から組み込む事が出来るようですが、あまり使ってないのでやり方がよく分かってません ^^;)

で、基本的な使い方ですが、3つのビュー(左、真ん中、右)を用意し、それをモジュールのcreatePaperFoldVIewに渡してあげると、PaperFoldViewのインスタンスを得る事が出来ますので、後はそれをwindowに乗せてあげるだけです。

右側のビューは、折りたたみの数(foldCount)と、係数(pullFactor)を指定できます。

以下、サンプルコード。

 var module = require('jp.msmc.tipaperfold');
 var window = Ti.UI.createWindow();
 
 var leftView = Ti.UI.createView({
  width:100,
  backgroundColor:'red'
 });
 
 var centerView = Ti.UI.createView({
  backgroundColor:'yellow'
 });
 
 var rightView = Ti.UI.createView({
  width:300,
  backgroundColor:'green'
 })
 
 var paperfoldView = module.createPaperFoldView({
  left:0,
  top:0,
  leftView:leftView,
  centerView:centerView,
  rightView:{
   view:rightView,
   foldCount:3,
   pullFactor:0.9
  }
 });
 
 window.add(paperfoldView);
 window.open();