この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
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プロジェクトを新規作成します。
テンプレートは「空白」にします。
様子を見る（Visualの指定：なし）
いつもの表示ですね。
Android
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です。
Androidの初期化
MainActivity.csにFormsMaterial.Init(this, savedInstanceState);を追加します。
（using Xamarin.Forms;が必要です）
MainActivity.cs
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
FormsMaterial.Init(this, savedInstanceState);iOSの初期化
AppDelegate.csにFormsMaterial.Init();を追加します。
（using Xamarin.Forms;が必要です）
AppDelegate.cs
global::Xamarin.Forms.Forms.Init();
FormsMaterial.Init();MainPageを修正
MainPage.xamlを修正します。
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
iOS
カスタマイズしてみる（自分で頑張る）
ボタンの背景色を黒以外にしたいと思い、公式ドキュメントに従って試してみました。
共通プロジェクトに型を作る
共通プロジェクトにMyCustomVisual.csを作成します。中身はIVisualを継承しているだけです。
MyCustomVisual.cs
using Xamarin.Forms;
namespace XFVisualSample
{
public class MyCustomVisual : IVisual
{
}
}Androidのカスタムレンダラーを作成する
AndroidプロジェクトにMyCustomButtonRenderer.csを作成します。
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を作成します。
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.xamlのVisualを修正します。
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="MyCustom"
x:Class="XFVisualSample.MainPage">
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Button Text="あいうえお" />
</StackLayout>
</ContentPage>様子を見る（Visualの指定：MyCustom）
こうなりました。
Android
iOS
どうしてこうなった
なんか思ってたんと違う……。
どうやら、自分で頑張る場合は、本当に色々と（カスタムレンダラーで）頑張らないとダメみたいです。
例えば、ボタンを押したときの「もわーん」というエフェクトも有りません（Androidでは、ボタンを押しても無反応……。）
カスタマイズしてみる（楽をする）
MainPageを修正
Visual="Material"でTextColorなどを設定すると、いいカンジになりました。
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"
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
iOS
さいごに
個人的に、iOSでも「ボタンはAndroidと同じようにしたい」と思っていたので、この機能はありがたいです。
まずは手軽に導入したいと思います。
8
