PG.Lib

アプリ開発関連とかガジェット関連とか

Xamarin Forms 起動時の画像やアイコンを変更してみる-UWP編

Xamarin.Formsでプロジェクトを作ると、Xamarinマークのアイコンなどがデフォルトでセットされています。

いつまでもこのままではモチベーションも上がらないので、アプリアイコンや起動時の画像(スプラッシュスクリーン)を変えてみます。

今回はUWPの場合です。

画像を用意する

やり方次第ですが、今回は Visual Studio 2017 を使った一番シンプルそうな方法を紹介します。

400 × 400 px 程度の画像を用意します。PNGとかで透過画像だとそれっぽい感じがでるんじゃないでしょうか。

Expression Design を使ってこんな感じのやつを作りました。

f:id:fxxk_authority:20170501164720p:plain

※ 透過して全く見えないと思いますが、白文字+透過画像ですw

画像を生成する

Visual Studio 2017からの新機能だと思いますが、各種サイズを生成できるようになりました。

UWPプロジェクト内にある、Package.appxmanifest をダブルクリックで開きます。

その中にある、ビジュアル資産のタブを開きます。

資産ジェネレーターにある、ソースに生成した画像を選択し、生成ボタンを押すと宛先フォルダに自動で生成されます。

f:id:fxxk_authority:20170501165012p:plain

ただ、自動生成なのでサイズ感とか気に食わないケースが多々出てきそうなので、その場合は都度画像を用意して設定していきましょう。

面倒くさいかもしれませんが、都度用意したほうが良い感じに仕上がりますし、出来上がりに違いが出てきます。

ビルドして実行

あとは実行すれば設定した内容で表示が変わるので、自分のアプリって感じが出てくると思います♪

f:id:fxxk_authority:20170501165748p:plain

たかがアイコンですがされどアイコン。やっぱりカッコいいアイコンのアプリって憧れますよねー

ストアに並んだアイコンで第一印象が決まるので、ささっと設定したものよりはこだわりたいところです。


ちなみに Expression Design はMicrosoftが遥か昔にリリースしていたデザイン用ツール。

当初有料でしたが、今は無料化されています。が、更新も止まってます。

イラレとかフォトショないけど、アイコンを作るって時には便利だと思います。

また、フォトショのデータを読み込むことも出来るので、アイコンサイトから購入したものとかも使えます。

Download Microsoft Expression Design 4 (Free Version) from Official Microsoft Download Center

Details の中の Japanese のリンクから日本語版がダウンロードできます。