【Xamarin】C#でAndroidアプリを作ってみる 5 (見栄えの調整)

概要

前回：C#でAndroidアプリを作ってみる 4 (画面作成2)
今回は、デフォルトのままのコントロールの見栄えを整えます。

Buttonに画像を表示する

SELECT DATEボタンの背景に画像を表示します。
ソリューションエクスプローラーの「Resources\drawable」を選択します。
右クリックでメニューを表示し、追加⇒既存の項目を選択します。

画像ファイルを選択して追加します。以降、ファイル名を仮にbutton.pngとします。

Buttonのtextを、Resources\values\strings.xmlに定義します。
ついでに、app_nameも変更してタイトルを変えます。

strings.xml

<resources>
    <string name="app_name">干支×星座算出アプリ</string>
    <string name="action_settings">Settings</string>
    <string name="date_select_button">誕生日を選択してね！</string>
</resources>

activity_main.xmlのSELECT DATEボタンを以下のように変更します。

activity_main.xml

    <Button
        android:text="@string/date_select_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/date_select_button"
        android:background="@drawable/button"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10px"
        android:gravity="top"/>

「layout_centerHorizontal="true"」で水平方向の真ん中にします。
「layout_marginTop="10px"」で上に余白を作ります。
「gravity="top"」で文字を上に移動します。

実行してみると、下図のようになります。

算出結果のラベルを見やすくする

算出結果の文字を大きくして、真ん中に表示します。
TextViewを以下のように変更します。

activity_main.xml

    <TextView
        android:id="@+id/selected_date_label"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_below="@id/date_select_button"
        android:gravity="center"
        android:textSize="24sp" />

「gravity="center"」で文字を真ん中に移動します。
「textSize="24sp"」で文字サイズを設定します。

実行してみると、下図のようになります。

まとめ

今回は、見栄えを改善するところまでを行いました。
次回は、算出結果を表示する際に、簡単なアニメーションを追加します。
次回分はこちら⇒C#でAndroidアプリを作ってみる 6 (簡単なアニメーション)