[ 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を使う方法。 – 葛城の日記

ありがとうございます！

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

だるかぶ

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

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