ぴよぴよエンジニアの日記

クラウドベンダーに勤める見習いSEの日記です。発言は私自身の見解であり、必ずしも所属組織の立場、戦略、意見を代表するものではありません。

Xamarin.Forms の Button.Image を active / inactive で切り替える

Xamarin.FormsのButtonにImageを付けて、タップ時に画像を切り替える試みです.

今回の検証はAndroidのみになります.



実装方法

f:id:Santea:20160605162518p:plain

まず、リソースを上記のように配置します.


f:id:Santea:20160605162643p:plain

こちらがinactive用の画像.

f:id:Santea:20160605162622p:plain

こちらがactive用の画像.



<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/droid_active"
      android:state_pressed="true" />
  <item android:drawable="@drawable/droid_active"
      android:state_selected="true" />
  <item android:drawable="@drawable/droid_inactive" />
</selector>

そして画像切り替え用の.xmlになります.



<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DrawableSample.MainPage">
  
  <StackLayout Orientation="Vertical"> 
    <Button Image="droid" />
  </StackLayout>
</ContentPage>

.Forms側のXamlはいたってシンプルに、ButtonのImageプロパティにファイル名を指定するだけです.



描画結果

f:id:Santea:20160605171951g:plain

こちらが描画結果になります.

タップと連動して画像が切り替わります.


以上です.