Xamarin.Forms 2.3.4 で追加された Bindable Picker を RxPRop で使ってみた (長濱 ねるちゃんはいいぞ)

Xamarin.Forms 2.3.4 で Picker の Item Source が Bindable になりました。

ソース

blog.xamarin.com

しかし、ネットでググっても、 ReactiveProrpety で 利用しているサンプルがなかったため、自分で書いてみました。

ソース

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:local="clr-namespace:BindablePickerTest"
             xmlns:viewmodel="clr-namespace:BindablePickerTest.ViewModel;assembly=BindablePickerTest"
             BindingContext="{Binding Source={x:Static viewmodel:DesignTimeViewModel.MainPageViewModel}}"
             x:Class="BindablePickerTest.MainPage">
    <StackLayout 
        Padding="20,20,20,20">
        <Picker HeightRequest="40"
                Title="欅坂46 で一番かわいいのは？"
                ItemsSource="{Binding KEYAKIMember}"
                ItemDisplayBinding="{Binding Name}"
                SelectedItem="{Binding FavoriteMember.Value, Mode=OneWayToSource}"/>
        <Label Text="{Binding FavoriteMember.Value.Name, StringFormat='{0} かわいいよね( ˘ω˘ )'}" />

    </StackLayout>
</ContentPage>

MainPageViewModel.cs

using Reactive.Bindings;

namespace BindablePickerTest.ViewModel
{
    public class MainPageViewModel
    {
        public ReactiveCollection<MemberInfomation> KEYAKIMember { get; set; } = new ReactiveCollection<MemberInfomation>();

        public ReactiveProperty<MemberInfomation> FavoriteMember { get; set; } = new ReactiveProperty<MemberInfomation>();
        
        public MainPageViewModel()
        {

            KEYAKIMember.Add(new MemberInfomation { Name = "長濱 ねる" });
            KEYAKIMember.Add(new MemberInfomation { Name = "渡邊 りさ" });
            KEYAKIMember.Add(new MemberInfomation { Name = "菅井さま" });
            KEYAKIMember.Add(new MemberInfomation { Name = "今泉 佑唯" });
        }
    }
    public class MemberInfomation
    {
        public string Name { get; set; }
    }
}

動作動画

解説

ソースの通りな感じです。まぁ、 Xaml ファイルでインテリセンスが利くように小細工してるぐらいでしょうか

blog.nuits.jp

ハマったポイント

Reactive Proprety を利用すると、 バインディングするときのパスで、 .Value を追加しなければいけないのに気づけず、ハマっていました。

参考サイト

ticktack.hatenablog.jp

Visual Studio Team Services で Xamarin.iOS をビルドする！

Xamarin.iOS を VSTS でビルドする

VSTS とは

VSTS とは、 Microsoft の提供している開発者が開発を効率的に行えるようにするサービスです。

VSTS に含まれている機能

アジャイル開発とかをしやすくするための機能がたくさん含まれてます。 今回は、VSTS 自体についての記事ではないので詳しくは、ぐぐってください。

• 継続的インテグレーション
• バックログ、タスク管理

やっていく

VSTS で Xamarin.iOS のプロジェクトをビルドするための ビルド構成を作る

VSTS で Xamarin.iOS をビルドするときに、 Xamarin.Android のプロジェクトが混じっているとビルドに失敗します。 ということで、新しく、 Xamarin.iOSをビルド専用のビルド構成 を作ります。

Visual Studio で Xamarin,iOS の含まれているソリューションを開き、構成マネージャーを開いて新規構成を選ぶ

この時に、設定のコピー元は、 Release を選んだ方がいいと思います。

Xamarin.iOS のビルドに必要なプロジェクト以外のチェックを外して、 iOS Release という名前で保存する

自分の場合、こんな感じになりました。

これを、アクティブソリューションプラットフォームを iPhone, iPhone Simulator と２つ切り替えて設定します。

Github との連携設定

今回は、 Github においてある Visual Studio の Xamarin Template で作ったまんまの コードをビルドしていきたいと思います。

Github との連携するために Github による VSTS に対する認証が必要です。

ここで、 上部にあるツールバーの一番右に配置してある歯車のアイコンにマウスをホバーさせると出てくるメニュー の中から Services を選択します。

Services の画面

New Service Endpoint の部分をクリックし、 出てくるドロップダウンボックスから Github を選択します。

すると、Github との連携の設定画面が出てきます。 Authorize をクリックしてください。

出てきた、 Github との連携の設定画面

ID/Pass を入力して、認証してください。 Github との認証が完了した画面

iOS アプリをビルドするために手持ちの Mac マシンに Build Agent をインストールしてく

現在、 VSTS で提供されている ビルドマシンは、以下の3種類あります。
ビルドマシンは、 VSTS でアプリ等をビルドするタスクが発行されたときにビルドをするためのマシンです。

• Hosted (メイン, Windows機)
• Hosted Linux Preview (プレビュー, Linux)
• Hosted VS 2017 (プレビュー, Windows)

名前を見ればどのようなマシンかはわかるかと思います。
まぁ、プレビューなので選択しは実質１つだけですが。

iOS アプリのビルドをするためには、 Mac マシンが必要

iOS アプリをビルドするためには、 Apple の利用規約の関係で Mac マシン上でビルドしなければいけません。
ところが、VSTS でビルドのために使えるマシンは、上で書いてあるように、 Windows (一応、Linux)しかありません。 Mac は使えない感じです。

どうすれば、 iOS アプリをビルドできるでしょうか？

ちゃんと、やり方は用意されています。
手元にある Mac マシンをビルドするために使います。具体的には、 VSTS で iOS アプリのビルドするタスクが呼び出されたら、 VSTS の Build Agent がインストールされたマシンが代わりにビルドを行います。

Build Agent ... 知らない子ですね。

Build Agent とは、

Build Agent とは、 Hosted ビルドマシンでは無理な場合（今回のように Mac が必要なときや、Hosted マシンの１か月の利用時間制限を使い切ってるとき）に設定して使うときに使うソフトウェア？です。

VSTS のサイトから無料で入手することができます。

今回は、このソフトウェアを Mac マシンにインストールしていきます。
(Mac Book Air をビルドマシンにしてるから、Mac mini ほしい...)

www.amazon.co.jp

Build Agent を入手する

Build Agent は上でも書いた通り VSTS のサイトから入手することができます。 具体的には、 設定画面 の Agent Queue の Download Agent のボタンからダウンロードで入手できます。

Build Agent を Mac へ設定している様子を動画で撮影してみました。

Build Agent にした Mac マシンでビルドするための証明書を作る

iOS アプリをビルドするためには、 アプリパッケージを作るための、証明書が必要です。 しかし、証明書を作るためには、 XCode を利用して作られます。つまり、Xamarin Studio や Visual Studio では作成できない。 また、証明書の判別は、 Bundle identifier を利用して行われています。
ということで、

Xcode でダミーのプロジェクトを作成し、 Xamarin.iOS のプロジェクトの Bundle identifier と同じにして証明書を作ってあげる必要があります。 証明書の作成は、 XCode で、 Bundle identifier を同じにした 適当な iOS アプリをシミュレーターで動かすだけでおｋです。

今回の場合は、 Build Agent に設定してあるマシンでも証明書を作らなければいけないので、下準備として、

Build Agent に設定してある Mac マシンの Xcode 上で Xamarin.iOS の Bundle identifier な証明書を作成する必要があります

新しいビルド定義を作成する

VSTS では、ビルド定義に従って、ビルドを行っていきます。まず、ビルド定義を作成していきます。

ダッシュボードにアクセス

ダッシュボードにアクセスするところから始めていきます。

Build && Release タブへ移動

継続的インテグレーションやリリースの管理はこのタブで行います。
すでに、 Android のビルド定義が１つされている感じです。

新しいビルド定義の作成

+New の部分をクリックして、新しいビルド定義を作成します。

新しいビルド定義ができた！

Github にある ビルドしたリポジトリを指定する

VSTS 自体にもコードを管理する機能がついています。しかし、ほかの ツール等への移行をしようとしたときに辛みが出てくるので、今回は、 Github でホスティングしているリポジトリをビルドしていきます。

Github にある リポジトリやブランチの選択

Xamarin Component Restore のタスクを削除

今回ビルドするプロジェクトでは、 Xamarin Component は使ってないため、タスクを削除します。

Xamarin.iOS のビルド設定

たぶん、一番メインのタスクです。

ビルドするソリューションの選択

ビルドするを選択するためにファイルピッカーを開いて設定していきます。

Xamarin Test Cloud のタスクを削除

Xamarin Test Cloud は様々なデバイスでのUIテストを行ってくれるものですが、今回は使用しないので削除します。

設定が完了

これで、ほとんどの設定が完了しました。

それでは、、、

設定を保存してから

ビルドするマシンを先ほど設定した Mac に変更して、

ビルド設定を iOS Release に変更、、、

緊張の...

ビルド...

成功！！

ビルドに成功したよ！ビルドナンバーは、20170405.3だお！
ビルド結果は、succeededだよ！

— kuu | Android app Dev (@Fumiya_Kume) 2017年4月5日

Xamarin.Android を VSTS でビルドしたい場合は、こちらを見てね！

goo.gl

参考情報

https://blogs.msdn.microsoft.com/chomado/xamarin/vsts-xamarin-hockeyapp-bookmarks/

Build Xamarin apps - Azure Pipelines | Microsoft Docs

Xamarin Blog | An open source mobile platform for building Android, iOS, macOS, watchOS, and tvOS apps with .NET.

24 時間自宅で動かせる Mac 開発機がほしい！！！！！！！！！！！！！

www.amazon.co.jp

VSTS でビルドが完了したら Twitter に投稿する Microsoft Flow を作ってみた

VSTS でビルドが完了したら Twitter に投稿する Microsoft Flow を作ってみた

Microsoft Flow とは

サービス連携を簡単に、コーディングしなくても作成できるサービスです。
今回のように、VSTS 、Twitterだけでなく　SlackやOnedriveとも連携できたりします。似たようなサービスはいろいろあるのですが、Microsoft Flow はMicrosoftが提供しているのもあってMicrosoftのサービス、特に Azure との連携が強化されています。

VSTS (Visual Studio Team Services) とは

Microsoftの提供している、チームでアプリケーションを開発するのを助けれくれるツール群の総称です。
継続的インテグレーション、自動テストやバックログ、タスクの管理などなど、さまざまな機能があります 特にアジャイル開発などに特化しています。

やっていく

1. 新しい フロー を登録する

Microsoft Fow では、サービス同士を連携させるための設定単位を フロー という名前で管理しています。

今回は、1からフローを作っていきます。テンプレートを使用することで楽に作れますが。。。

2. フローを編集していく

VSTS との連携を設定していく

フローの起点になるようなサービスを トリガーといいます。 今設定しているのは、トリガーです。

現れた画面のテキストボックスに Visual Studio Team Services と入力してください。

Visual Studio Team Services のアイコンが出てきます。　　　 トリガーと書かれたリストビューにある、 Visual Studio Team Services - Buld Complete をクリックしてください

VSTS との連携設定に画面がでてきます。 どの VSTS アカウントと連携するのか、どのプロジェクトと連携するのか、ビルド結果でフィルターをかけるのか等を設定できます。

以下の場合は、 fumiya-kume というアカウントの、 AutoCalc というプロジェクトの、ビルドが成功したときにトリガーが発動するようになっています。

Twitter との連携を設定していく

Twitterとの連携を設定するために、 新しいステップをクリックしてください

先ほどと同じように出てきた検索ボックスへ Twitter と入力します。

ツイートの投稿の部分をクリックします。 また、Twitterと Microsoft Flow の連携が済んでない場合はここでします。

ツイートするテキストの編集をします。

ただ単に文字をツイートするだけでなく、 VSTS のビルド結果も参照できるので、インタラクティブなツイートをできます。

ちらっと入力してみました。

右上の フローの作成 をクリックして完了です。
名前は付けなくても大丈夫です。よしなにいい名前をMicrosoft Flow がつけてくれます。

わーい！

ビルドするよ！

ビルドに成功したよ！

無事にツイートされたよ！

ビルドに成功したよ！ビルドナンバーは、20170404.1だお！
ビルド結果は、succeededだよ！

— くぅさかな/kuuはお酒飲まない@Androidアプリ開発 (@Fumiya_Kume) 2017年4月4日

Visual Studio Team Services で Xamarin.Android をビルドする！

VSTS こと、 Visual Studio Team Service とは、Microsoftが提供しているチームでの開発を支援するための環境です。

※Visual Studio Team Services 以下、VSTS と記述します。

VSTS を使うメリット

Xamarin.Android と同じ会社が作っている製品ということで、 Xamarin のサポートが強力

たとえば、Xamarin Test Cloud を使う機能が標準で入っていたりします。 また、 Visual Studio 内からも少しごにょれるなど、 Xamarin の開発を行う上で、自然と使えるようになってます。

無料ではじめれる

5人までなら無料で使い始めれる、ビルドをいくつまで並列で行えるかのパイプラインも１本ならは無料で使えます。 お金がない自分にとっては、最適だとおもいました。

やること

1. VSTS のダッシュボード画面を開く

VSTS のアカウントは事前に作成してある前提で話を進めていきます。 また、新規プロジェクトを立ち上げてある状態です。

VSTS のダッシュボード画面

2. Github との連携

今回は、 Github においてある Visual Studio の Xamarin Template で作ったまんまの コードをビルドしていきたいと思います。

Github との連携するために Github による VSTS に対する認証が必要です。

ここで、 上部にあるツールバーの一番右に配置してある歯車のアイコンにマウスをホバーさせると出てくるメニュー の中から Services を選択します。

Services の画面

New Service Endpoint の部分をクリックし、 出てくるドロップダウンボックスから Github を選択します。

すると、Github との連携の設定画面が出てきます。 Authorize をクリックしてください。

出てきた、 Github との連携の設定画面

ID/Pass を入力して、認証してください。 Github との認証が完了した画面

3. ビルドタブへ移動

以下の写真に従い、 ビルド&リリース タブへ移動します。

ダッシュボード画面からビルド&リリース画面への移動

VSTS の ビルド＆リリース画面

4. 新しいビルド定義を作成

ビルド定義とは、VSTS で Xamarin.Android をビルドするときにどのような方法でビルドするのか、どこへデプロイするのか、とかを決めます。基本的には、ここを編集していきます。

以下の写真のように、新しいビルド定義を作成します。 ビルド定義のテンプレートはいくつかありますが、ここでは、 Xamarin.Android の定義を使って作成していきます。

新しいビルド定義を作成する画面

Xamarin.Android のビルド定義を選択している画面

Xamarin.Android のビルド定義を作成し終えた画面

すでに、少しエラーが出てますね(^^;

5. 最低限必要ないプロジェクトを削除する

Xamarin Component Restore のタスクを削除する

とりあえず、 Xamarin Component Restore のタスクは今は必要ないので、削除します。

Xamarin Component Restore を削除している画面

Xamarin Test Cloud のタスクを削除

先ほどと同じように Xamarin Test Cloud のタスクも削除してください。

Xamarin Test Cloud のタスクを削除している画面

必要のないタスクを削除したあとの画面

6. Github からソースを取り込む設定をする

今回は、 Github で作成している Xamarin.Android のプロジェクトをビルドしていくので、

以下のように Get Source をクリックすると、ソースコードを取り込む元を選択できます。ここでは、 Github を選択してください。

7. ビルドするプロジェクトを指定する

Xamarin.Android のテンプレートで作成したビルド定義は、 .Droid と名前のついたプロジェクトを Xamarin.Android のプロジェクトと判断して、よしなにビルドしてくれます。
しかし、最新の Xamarin の作成する Xamarin のプロジェクトの名前は、 hoge.Android という形になっています。 そこで、少し手を加えてあげる必要があります。

Before

After

まだ続きます。

以前私のブログで紹介したバッドノウハウを使わなければいけません。
具体的には、 Xamarin.Android プロジェクトのビルド時にJDK8 を使うように明示的に指定しなければいけないgoo.gl

以下の感じで設定してあげてください。

Before

After

8. ビルドを実行する

ついに、ビルドの時間がやってきました。

右上の Save & Queue をクリックしてください。

Agent Type を Hosted へ変更し、 Queue をクリックすれば、完了です。

View post on imgur.com

i.imgur.com

おまけ

VSTS のビルドが成功したら Twitter に通知したりもできます ﾈｺﾐﾐｰ

ビルドに成功したよ！(^'▽'^)ﾈｺﾐﾐｰ Build ID: 246

— くぅさかな/kuuはお酒飲まない@Androidアプリ開発 (@Fumiya_Kume) 2017年4月2日

VSTS で Xamarin.Android のプロジェクトを ビルドしようとすると、 cannot access java.lang.Object ってエラーが出るから解決してみた

VSTS で Xamarin.Android をビルドしようとしたら、以下のようなエラーが出ました。

C:\Program Files (x86)\MSBuild\Xamarin\Android\Xamarin.Android.Common.targets(1862,3): Error : java\lang\Object.class(java\lang : Object.class)

cannot access java.lang.Object

Process 'msbuild.exe' exited with code '1'.

ぐぐったら以下のような情報にたどり着きました。

That error is telling you that the Java Class version that is being loaded was compiled with Java 8 (52) but Java 7 (51) is trying to load that compiled class. forums.xamarin.com

ふむ、

## JDK 8　でビルドされたクラスに JDK 7 を使用した状態で、アクセスしようとしているのか。

# そもそも、VSTS で現在ビルドしているAgent に JDK 7が入ってないのかなと思って少し調べてみました。

ちなみに、Hosted Agent でビルドしています。

Java Standard Edition Development Kit 1.8

www.visualstudio.com

ふむ、JDK 8 はちゃんと入っている。。。

# 解決方法は、 VSTS の Buld Defined で 明示的に JDK 8 を使用するように指定すれば大丈夫です。

Build Xamarin.Android Project の設定欄にある、 JDK Archtecture の設定項目を JDK 8 に変更すればいい感じです。

# わーい

# 参考ページ www.jamessturtevant.com

Amazon アプリストアへ無料で開発者登録してみた

Amazon のアプリストアへ開発者登録してみました。

Amazon アプリストアとは

Amazon の解説している Android, Webアプリを登録できるアプリストアです。 Google Play とは別物みたいです。

いくらかかるの？

無料で登録することができました。 Google Play の場合、登録料がかかるので、すこしメリットがあるかなと。

やったこと

まずは、 Amazon アプリストアのトップページへアクセス

developer.amazon.com

個人情報を入力

契約書に同意

口座情報の入力

アプリ内課金機能を使う場合は、口座情報を入力するかんじです。 自分は、とりあえずアプリ内課金機能を使わないので、放置しました。

登録完了

感想

自分でもあっけないほど登録が簡単に完了してしました。 さて、アプリの申請をだすかな(*‘▽’)

XamarinMediaManager 0.4.0 を Xamarin.Android のプロジェクトにインストールしようとした

やったこと

XamarinMediaManager 0.4.0 を Xamarin.Android のプロジェクトにインストールしようとした

以下のようなエラーが出た

だれか、解決方法わかる人います？https://t.co/8EUjy0GVtP#JXUG

— くぅ- fumiya Kume (@Fumiya_Kume) 2017年3月27日

環境

• Microsoft Visual Studio Enterprise 2017
• Xamarin 4.3.0.784 (73f58d6)
• Xamarin.Android SDK 7.1.0.41 (9578cdc)
• Xamarin.iOS and Xamarin.Mac SDK 10.4.0.123 (35d1ccd)
• ユニバーサル Windows アプリ用 Visual Studio Tools 15.0.26228.00

解決策

XamarinMediaManager のインストールするバージョンを 0.3.0 まで落とした

解決しました。プラグインのバージョンを1つ落としたらおっけいみたいでしたhttps://t.co/jHN0rFyChP https://t.co/9LMZzU6Ibf

— くぅ- fumiya Kume (@Fumiya_Kume) 2017年3月27日

原因としては、 Ver 0.4 で Andoid のサポートライブラリのバージョンが上がってるのが原因っぽいですね。

github.com

Xamarin.UITest で Switch コントロールをテストする方法

Switch の現在の状態を取得する方法

以下のように、書けばいい感じ。 ポイントは、 Invoke メソッドを使い、 「c.Marked(“/AutomationID/”) メソッドで絞りこんだオブジェクトは、 Switch コントロールだろうなー」
って、想像して、 iSChecked メソッドを呼んでいる点です。

_app.Query (c => c.Marked("/*AutomationID*/").Invoke ("isChecked").Value<bool> ()).First ();

Switch の状態を変更する方法

以下のように、IApp の Tap メソッドを Switch コントロールに対して呼び出してあげればおｋです。

_app.Tap(query => query.Marked(/*AutomationID*/));

参考サイト

forums.xamarin.com

Xamarin.Forms で アイコンボタンを外部フォントを使って作成する

今回作るもの

アイコンがボタンになっているやつを作成します。 画像でボタンを作る場合と比べて、ベクタイメージなので、様々な解像度に対応できる利点があります。 まぁ、以下の画像を見ていただくのが速そうなので。。。

iOS

Android

UWP アプリ

外部フォントとは

iOS, Android, UWP で内蔵されているフォントの種類が違うので、今回は、外部にあるフォントを埋め込んでそれを使うことで、どのプラットフォームでもおなじフォントがつかえるようにします。
今回は、 Windows10 に標準搭載されている Segoe MDL2 Assets を使用していきます。コピーしてどこかに置いておくと扱いやすいかもしれないです。

やりかた

カスタムレンダラー

Xamarin.Forms から各プラットフォーム固有の機能をつかっていかなければいけないので、 カスタムレンダラー ってのを使っていきます。

カスタムレンダラーについては、以下のサイトが詳しいかなと

github.com

Xamarin.Forms プロジェクトでレンダラー用のクラスを作成

まずは、 Xamarin.Forms のプロジェクトで カスタムレンダラーの元となるクラスを作成していきます。
イベントとか、プロパティには特に手を加えないので、こっちは基本シンプルな感じです。
ポイントとしては、 ボタンにカスタムを加えるので、 Button クラスを継承しているところぐらいでしょうか。
自分の場合は、以下のようなクラスになりました。

CustonFontTextView.cs

using Xamarin.Forms;

namespace LTTimer.View
{
    public class CustonFontTextView : Button
    {
    }
}

Xamarin.UWP プロジェクトでレンダラー用クラスを作成

次に、 UWP アプリで実装をしていきます。

View/ 配下にコードを置きました。 また、フォントファイルを　Assets/Fonts/ 配下に置きました。

ビルドアクション

• コンテンツ

出力ディレクトリにコピー

• コピーしない

CustonFontTextViewRenderer.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using LTTimer.UWP.View;
using Xamarin.Forms.Platform.UWP;

// おまじない
// 第一引数に、Xamarin.Forms プロジェクト内においてあるカスタムレンダラー元のクラスを指定
// 第二引数に、Xamarin.UWP プロジェクト内においてあるカスタムレンダラー先のクラスを指定
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button),typeof(CustonFontTextViewRenderer))]

namespace LTTimer.UWP.View
{
    // カスタムレンダラー元が Button クラスを継承したものなので、 ButtonRenderer を継承する
    public class CustonFontTextViewRenderer: ButtonRenderer
    {
        // ネイティブビューを作成してにゃーんする
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);

            // Button のところに設定された FontFamily を取得して、どのフォントを使うのか選択するのに使う
            // もし、設定してなかったら NullReferenceException がでちゃうから、 Null チェックしつつ取得してく
            var fontfamily = e.NewElement?.FontFamily;
            
            // 取得できてなかった時のために
            if (fontfamily != null)
            {
                var element = (Button) Control;
                // UWP は比較的簡単にかける
                element.FontFamily = new FontFamily(e.NewElement.FontFamily);
            }
        }
    }
}

Xamarin.Android プロジェクト で レンダラー用のクラスを作成

コードは View フォルダに配置しました。 Android はフォントファイルを Resource/Fonts に置く

ビルドアクション

• AndroidAsset

出力ディレクトリにコピー

• コピーしない

CustonFontTextViewRenderer.cs

using Android.Graphics;
using Android.Widget;
using LTTimer.Droid.View;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Button = Xamarin.Forms.Button;

// おまじない
// 第一引数に、Xamarin.Forms プロジェクト内においてあるカスタムレンダラー元のクラスを指定
// 第二引数に、Xamarin.UWP プロジェクト内においてあるカスタムレンダラー先のクラスを指定
[assembly:ExportRenderer(typeof(Button),typeof(CustonFontTextViewRenderer))]

namespace LTTimer.Droid.View
{
    // カスタムレンダラー元が Button クラスを継承したものなので、 ButtonRenderer を継承する
    public class CustonFontTextViewRenderer: ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
        {
            base.OnElementChanged(e);

            // Button のところに設定された FontFamily を取得して、どのフォントを使うのか選択するのに使う
            // もし、設定してなかったら NullReferenceException がでちゃうから、 Null チェックしつつ取得してく
            var fontFamily = e.NewElement?.FontFamily?.ToLower();
            
            if (fontFamily != null)
            {
                var label = (TextView)Control;
                // Android でLabelのフォントファミリーを設定するには、 Typeface.CreateFromAsset メソッドを使う
                // フォントサイズは特に変えたくなかったので、第二引数にもともとのフォントサイズを代入しています。
                label.Typeface = Typeface.CreateFromAsset(Context.Assets,e.NewElement.FontFamily);
            }
        }
    }
}

## Xamarin.iOS プロジェクト で レンダラー用のクラスを作成

ios は、 フォントファイルの埋め込みが少し面倒でしたにゃーんした
今回も、 View 配下にコードを配置しました。

CustonFontTextViewRenderer.cs

using LTTimer.iOS.View;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

// おまじない
// 第一引数に、Xamarin.Forms プロジェクト内においてあるカスタムレンダラー元のクラスを指定
// 第二引数に、Xamarin.UWP プロジェクト内においてあるカスタムレンダラー先のクラスを指定
[assembly:ExportRenderer(typeof(Button),typeof(CustonFontTextViewRenderer))]

namespace LTTimer.iOS.View
{
    // カスタムレンダラー元が Button クラスを継承したものなので、 ButtonRenderer を継承する
    public class CustonFontTextViewRenderer: ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            // Button のところに設定された FontFamily を取得して、どのフォントを使うのか選択するのに使う
            // もし、設定してなかったら NullReferenceException がでちゃうから、 Null チェックしつつ取得してく
            var fontFamily = e.NewElement?.FontFamily;
            if (fontFamily != null)
            {
                var element = Control;
                // UIFont のスタティックメソッドである、 **FromName()** を使い作成したインスタンスを 設定していく
                element.TitleLabel.Font = UIFont.FromName(fontFamily,element.TitleLabel.Font.PointSize);
            }
        }
    }
}

iOS のフォントの設定はいろいろ大変

iOS のフォントの設定等はいろいろ大変だったので別セクションにします。

いつもどうり、Xamarin.iOS のプロジェクトにフォントを追加

iOS でも、ほかのプラットフォームと同じように、 Resource/Fonts/ 配下に配置します。

ビルドアクション

• AndroidAsset

出力ディレクトリにコピー

• コピーしない

info.pilot へ設定の追加

Xamarin.iOS のプロジェクトにある、 info.pilot ファイルを開きます。

画面の左下にある以下のようなボタンをクリックします。

テキストボックス的なのがでてくるので、 Font Provided by application と入力します。途中で入力補完がかかるので、 それを選択します。

次に、 String と書かれた部分の右側をダブルクリックして、文字を編集できるようにします。

そこへ、 Fonts/{FontFileName} と入力します。

完成したので アプリに表示させてみる

MainPage.Xaml を開き、追記して表示していきます。 ポイントは、 OnPlatform を使い、iOS,Android,UWP で処理を切り分けているところでしょうか。

Font-Family で設定する値

iOS

フォント名、 Mac の FontBook でフォントを開いたときに、 PostScript名 というところの名前を入力します。

Android

Resource フォルダを起点として、フォントファイルまでのパスを記入します。

UWP アプリ

今回使ったのは、 Windows 10 なら標準に入っているということで、 フォント名だけを入れるだけでおｋです。

MainPage.xaml

<view:CustonFontTextView Text="&#xE713;">
            <view:CustonFontTextView.FontFamily>
                <OnPlatform x:TypeArguments="x:String"
                    iOS="Segoe MDL2 Assets"
                    Android="Fonts/SEGMDL2.TTF"
                    WinPhone="Segoe MDL2 Assets">
                </OnPlatform>
            </view:CustonFontTextView.FontFamily>
        </view:CustonFontTextView>

動かしてみた

iOS

Android

UWP アプリ

つらかったところ

フォントを設定しても表示されない

iOS で Info.Pilot へ設定を追加しないといけないところに気づけなくて、ハマった

パスをチェック

タイポしてると フォントファイルを取得できずに NullReferenceException が発生してアプリが落ちることがたまによくあった

再起動すればOK

最後に悩んだら、再起動すればなんとかなった。

参考記事

blog.yamamoworks.net

www.sirochro.com

https://docs.microsoft.com/ja-jp/windows/uwp/style/segoe-ui-symbol-font#a-namelayering-and-mirroringa重ね合わせとミラーリングdocs.microsoft.com

CouldntCreateInternalSwitch って出てきて、visual studio emulator for android を起動できなかったから解決してみた。

やったこと

最終的には、新しい デバイスを追加しました。

以下のようなエラーメッセージが出て、 visual studio emulator for android を起動できませんでした。

gist.github.com

結果的には、Visual Studio Emulator for Android で新しいデバイスを追加しました

手を尽くしてもどうにもできないっぽかったのであきらめて、Visual Studio Emulator for Android に新しいデバイスを追加で解決しました。また、どうせなら、ということで、 最新の Android のemulatorにしときました。

Visual Studio Emulator for Android への新しいデバイスの追加方法

1. Visual Studio の ツール > Visual Studio Emulator for Android のメニューをクリック

2. Visual Studio Emulator for Android のメイン画面でデバイスを削除したり、新しく追加したり

Visual Studio Emulator for Android のメイン画面的なのが出てきました。ここで、新しくデバイスを追加したり、いろいろできます。 問題は、この画面を開いてると CPU を異常に喰うとこぐらいでしょうか。

新しいデバイスを追加してもうまく表示されてはくれません

以下の画面のように、 Visual Studio Emulator for Android を起動しようとしても、 Preparing virtual machine と出て固まってしまいました。

原因を　Stack over flow でググったら、 Wifi を切れば行けるみたいなことがかいてありました。

I had the same problem. I just solve it by DESACTIVE the Wifi network card.

stackoverflow.com

まぁ、Wifi を切って さらに新しいデバイスを追加したら行けた感じです。

無事に　Visual studio emulator for Android を表示することができました！