Xamarin.Forms Visual の Material デザインを試してみた

Xamarin.Formsのバージョン3.6で Xamarin.Forms Visualが使えるようになりました。

「AndroidとiOSが同じようなUIになる」みたいなので、遅まきながら試してみました。

目次

環境

  • Windows
    • Windows 10 Pro
    • Visual Studio Community 2019: 16.2.1
  • macOS
    • macOS Mojave 10.14.5
    • Visutal Studio Community 2019 for Mac: 8.2.2
    • Xcode: 10.2.1
  • Android
    • Pixel 3a: Android 9
  • iOS Simulator
    • iPhone Xs: iOS 12.2
  • Xamarin
    • Xamarin: 16.2.0.91
    • Xamarin.Android SDK: 9.4.1.0
    • Xamarin.iOS and Xamarin.Mac SDK: 12.14.0.114
  • Library
    • Xamarin.Forms: 4.1.0.673156

Xamarin.Forms プロジェクトの新規作成

Xamarin.Formsプロジェクトを新規作成します。

Xamarin.Formsプロジェクトを新規作成する

テンプレートは「空白」にします。

テンプレートは「空白」を選択する

様子を見る(Visualの指定:なし)

いつもの表示ですね。

Android

いつものボタン(Android)

iOS

いつものボタン(iOS)

Xamarin.FormsのVisualを試す

Androidの要件

Androidの場合は、下記が必要です。

  • FormsAppCompatActivity
  • Android Support Libraries 28.0.0 以上
  • Target Android framework (v9.0 以上)
  • Minimum Android Version 5.0 (API 21) 以上

Xamarin.Forms.Visual.Materialを追加

NuGetでXamarin.Forms.Visual.Materialを検索し、すべてのプロジェクトに追加します。

Xamarin.Formsが古くてインストール出来ない場合は、Xamarin.Formsを最新にすればOKです。

Xamarin.Forms.Visual.Materialをインストールする

Androidの初期化

MainActivity.csFormsMaterial.Init(this, savedInstanceState);を追加します。

using Xamarin.Forms;が必要です)

global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
FormsMaterial.Init(this, savedInstanceState);

iOSの初期化

AppDelegate.csFormsMaterial.Init();を追加します。

using Xamarin.Forms;が必要です)

global::Xamarin.Forms.Forms.Init();
FormsMaterial.Init();

MainPageを修正

MainPage.xamlを修正します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             Visual="Material"
             x:Class="XFVisualSample.MainPage">

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Button Text="あいうえお" />
    </StackLayout>

</ContentPage>

様子を見る(Visualの指定:Material)

それっぽくなりました! AndroidとiOSで同じような見た目です!

Android

Materialボタン(Android)

iOS

Materialボタン(iOS)

カスタマイズしてみる(自分で頑張る)

ボタンの背景色を黒以外にしたいと思い、公式ドキュメントに従って試してみました。

共通プロジェクトに型を作る

共通プロジェクトにMyCustomVisual.csを作成します。中身はIVisualを継承しているだけです。

using Xamarin.Forms;

namespace XFVisualSample
{
    public class MyCustomVisual : IVisual
    {
    }
}

Androidのカスタムレンダラーを作成する

AndroidプロジェクトにMyCustomButtonRenderer.csを作成します。

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using XFVisualSample;
using XFVisualSample.Droid;
using ButtonRenderer = Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer;

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(MyCustomButtonRenderer), new[] { typeof(MyCustomVisual) })]
namespace XFVisualSample.Droid
{
    public class MyCustomButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Control.SetBackgroundColor(Color.LightCoral.ToAndroid());
            }
        }
    }
}

iOSのカスタムレンダラーを作成する

iOSプロジェクトにMyCustomButtonRenderer.csを作成します。

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using XFVisualSample;
using XFVisualSample.iOS;

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(MyCustomButtonRenderer), new[] { typeof(MyCustomVisual) })]
namespace XFVisualSample.iOS
{
    public class MyCustomButtonRenderer : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Control.BackgroundColor = Color.LightCoral.ToUIColor();
            }
        }
    }
}

MainPageを修正

MainPage.xamlVisualを修正します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             Visual="MyCustom"
             x:Class="XFVisualSample.MainPage">

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Button Text="あいうえお" />
    </StackLayout>

</ContentPage>

様子を見る(Visualの指定:MyCustom)

こうなりました。

Android

自分で頑張ったボタン(Android)

iOS

自分で頑張ったボタン(iOS)

どうしてこうなった

なんか思ってたんと違う……。

どうやら、自分で頑張る場合は、本当に色々と(カスタムレンダラーで)頑張らないとダメみたいです。

例えば、ボタンを押したときの「もわーん」というエフェクトも有りません(Androidでは、ボタンを押しても無反応……。)

ボタンを押したときの「もわ〜ん」が無い

カスタマイズしてみる(楽をする)

MainPageを修正

Visual="Material"TextColorなどを設定すると、いいカンジになりました。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XFVisualSample.MainPage">

    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Button Text="あいうえお" />
        <Button Text="かきくけこ" Visual="MyCustom"/>
        <Button Text="さしすせそ" Visual="Material"/>
        <Button Text="たちつてと" Visual="Material" TextColor="Yellow" BackgroundColor="Green"/>
        <Button Text="なにぬねの" Visual="Material" TextColor="White" BackgroundColor="Brown"/>
        <Button Text="はひふへほ" Visual="Material" TextColor="DarkOrange" BackgroundColor="LightSkyBlue"/>
    </StackLayout>

</ContentPage>

様子を見る(Visualの指定:Material & 色指定あり)

いいカンジです。ボタンを押しても「もわーん」が出ます!

Android

Materialで色指定したボタンのもわ〜ん(Android)

iOS

Materialで色指定したボタンのもわ〜ん(iOS)

さいごに

個人的に、iOSでも「ボタンはAndroidと同じようにしたい」と思っていたので、この機能はありがたいです。

まずは手軽に導入したいと思います。

参考