みなさま、iOS7 対応いかがでしょうか? ぼくはいま作っている趣味アプリを iOS7 風な見た目にするべくがんばっている最中です。

さて、今回は TiDKLiveBlur のご紹介です。

TiDKLiveView

DKLiveBlur という、スクロールできるビューの背景画像へ、スクロールさせると動的に曇ったような、スリガラス効果を加えてくれるライブラリを Titanium でも利用できるようにしたモジュールです。 これで iOS7 風なビューを作ることができますね!

それでは簡単な使い方をご説明します。 このモジュールはソースコード内で require する必要はありません。 tiapp.xml の <module> に記述するだけで Ti.UI.TableView と Ti.UI.ListView にスリガラス効果を提供します。

<modules>
    <module platform="iphone">be.k0suke.tidkliveblur</module>
</modules>

Ti.UI.TableView を例にしてみましょう。

var tableView = Ti.UI.createTableView({
	backgroundBlurImage: '/background.png',
	glassColor: '#fff', // optional, default #fff
	data: [
		{ title: 'row0' },
		{ title: 'row1' },
		{ title: 'row2' },
		{ title: 'row3' },
		{ title: 'row4' },
		{ title: 'row5' },
		{ title: 'row6' },
		{ title: 'row7' },
		{ title: 'row8' },
		{ title: 'row9' }
	]
});

Ti.UI.TableView(Ti.UI.ListView)に backgroundBlurImage と glassColor というプロパティが指定できるようになります。 backgroundBlurImage にはスリガラス効果を加えたい背景画像を指定してください(backgroundImage と同じように、リモートの画像を指定することはできません)。 glassColor は色を指定できます。 デフォルトは白ですが、Titanium で指定できるカラーコードならなんでも指定することができますので、色々お試しください。

一点注意が必要で、ある程度のデータ数がないとスクロールできる縦幅が発生しないので、データ数が少ない場合スリガラス効果が発生しないでスクロールが終了してしまう可能性があります。 Ti.UI.TableView であれば、setContentInsets メソッドで top のマージンをある程度確保してあげれば、良い感じに効果が発生するかと思います(現時点での最新版 SDK3.1.2.GA で Ti.UI.ListView の setContentInsets は残念ながら未実装です)。

tableView.setContentInsets({
	top: 400,
	right: 0,
	bottom: 0,
	left: 0
});

というわけで、DKLiveBlur を Titanium で使えるようにするモジュールのご紹介でした。