[ Titanium Mobile ] 透過 PNG のボタン画像を使う方法 #titaniumjp

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

Titanium Mobile で、透過 PNG のボタン画像 ( イメージボタン ) を使うサンプルです。

▲ ボタンを押した時の画像も準備します。

サンプルコード

コードは次のような感じです。

var win = Ti.UI.createWindow({ title:'ボタンテスト', backgroundColor:'#f00'
});
var TestButton = Ti.UI.createButton({ backgroundImage:'btn_test.png', backgroundSelectedImage:'btn_test_o.png', top:10, left:10, height:60, width:300
});
win.add(TestButton);
win.open();

配置した画像は、次の二点です。

▲ ボタンを押す前。

▲ ボタンを押した時。

分かった事

• [ backgroundSelectedImage ] を指定しなくても押すと薄暗くなる処理が入った。

• Retina ディスプレイ対応は、長さが倍の画像を作ってサイズ指定で半分にする。

参考にさせてもらったページ

• Button – titanium-mobile-doc-ja – UIカタログ(コントロール) – Button – Appcelerator Titanium Mobileに関するドキュメントを日本語でまとめていくプロジェクト – Google Project Hosting

• Titaniumのボタン画像で透過PNGを使う方法。 – 葛城の日記

ありがとうございます！

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。