みんなー！これからはTableViewじゃなくて、オシャレなShelfViewにしようぜー！というTableViewのデザイン提案

Titanium Mobile UIデザイン Tips

こんばんは。UIを大事に考えすぎるあまり、なかなかコードがおこせない@loopunqoolです。

TableViewってスゴく便利ですよね！
特に大量なデータを一覧にできるので、JSONやRSSなんかをwebから取得して、
Viewerアプリが簡単に作れちゃうTitanium Mobileとは特に親和性が高いと思います。

ところで、TableViewのデザインにはみなさん満足してますか？

文字や画像をTableViewRowにPushしてみたけどパッとしない…
backgroundGradientでTableViewRowを背景にグラデーションかけてみたら、鮮やかだけど物足りない…
画像をbackgroundImageにして棚っぽくみせたいけど、そもそも絵が描けないし、デザイナーの知り合いもいなかった！

みたいなことってありませんか？
…まあ、上記の道をひと通り歩いてきたのが自分なわけですが。

正直、読物語のTableViewってダサいよね！
これじゃ人気出るわけないよ！
どこかにいいデザインないものか。

AppStoreをネサフすること数分。
「あー、さすが某書籍ログ管理アプリ。棚っぽいデザインきれいだなー。」
「ん。でもこの棚風なインターフェイスって…Viewレイアウトだけでできるんじゃないか？」

ということで、やってみました！
完成品がこちらです！

ちょっとおしゃれな感じじゃないですか？
でも、画像を使うでもなく、backgroundGradientとbackgroundcolorでできるなら、
絵が描けないエンジニアにも需要があるのではないですか？

ということで、これを勝手に「ShelfView」と名付けました。
既存の技術だったり、「画像作ったほうが早いよ」という方はそのままタブを閉じてください。

さて、そうでないという方の為に続きを書いていきたいと思います。
TableViewとTableViewRowの作り方はWiki参照していただくとして、
TableViewを棚にする為に次のViewを作っていきます。

まずはdisplayrow(要素を載せるように見せるViewとして)を定義します。

var displayrow = Ti.UI.createView({
	height:16,
	width:320,
        //棚を設置したい高さを指定
	top:64,
	backgroundGradient:{
		type:'linear',
		colors:[
                        //手前明るく奥を暗く。光沢つけるなら手前と奥を明るく中を暗く。
			{position:0.00,color:'#f6f8f9'},
			{position:0.50,color:'#e5ebee'},
			{position:1.00,color:'#f5f7f9'}
		]
	}
});

で、できあがるのがこちら。

これでだいぶ棚っぽくなってきましたが、あとは厚みが欲しいですね。
そこで厚さの部分は単色ではっきりした同系色のViewを用意してあげます。

var displaythick = Ti.UI.createView({
	height:8,
	width:320,
	top:78,
	backgroundColor:'#e5ebee'
});

で、最後にrowにaddして完成。

//厚みの部分を先にadd。zindexで指定してもよいかも？
row.add(displaythick);
row.add(displayrow);

最終的にこんな感じの棚もどきTableViewができます。

ね？簡単でしょう？
ということでもしも気に入っていただける方がいらしたら試してみてください。

@loopunqoolでしたー。