2016/5/7(土)に開催された「JXUGC #13 東京 緊急開催 Xamarin のすべて!」でLTしてきました。
今回のJXUGカンファレンスは参加人数がとても多く(約150人の定員に倍以上の応募!)、LT枠を含めた参加者は別室に詰めてました。ストリーミングでセッションを観ながらあーだこーだ言ってるのが思いの外楽かったので、「教師&生徒」スタイルではなく参加者全員でワイワイ進める勉強会をやったら面白そうです。
2016/5/7(土)に開催された「JXUGC #13 東京 緊急開催 Xamarin のすべて!」でLTしてきました。
今回のJXUGカンファレンスは参加人数がとても多く(約150人の定員に倍以上の応募!)、LT枠を含めた参加者は別室に詰めてました。ストリーミングでセッションを観ながらあーだこーだ言ってるのが思いの外楽かったので、「教師&生徒」スタイルではなく参加者全員でワイワイ進める勉強会をやったら面白そうです。
本日公開されたMacストアアプリ「ごちうサーチ」のアイコンを描いてました。
ごちうサーチがストアで公開されました!ソースを公開してくださった @ksasao さん,アイコンを作ってくださった @ticktackmobile さんに大感謝です! https://t.co/Txk9XfLqmg pic.twitter.com/Eagb31okoN
— Tsubasa HIRANO (@ailen0ada) May 6, 2016
Macを使ってる人達は今すぐゲットだ!
いきさつ
【緩募】Gochiusearch.Macのアイコン 1024x1024
— Tsubasa HIRANO (@ailen0ada) 2016年5月1日
「シークバーの現在位置がカップに入った兎」というアイディアが浮かんだので作ってみる
@ailen0ada こんな感じのどうでしょう? pic.twitter.com/7Q6zGCINjz
— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年5月1日
@ticktackmobile !!ありがとうございます!iOS アイコンと違うガイドラインなのでシャドウも使えそうですね!
— Tsubasa HIRANO (@ailen0ada) 2016年5月1日
Macアプリらしいアイコンの作り方を調べながら試行錯誤...
方向性はこんな感じだろうか pic.twitter.com/LubwA8OYxU
— Xamarin.Formsヒトバシラー (@ticktackmobile) May 1, 2016
一晩明け、意匠に「ラテアート」を取り入れることを思いつく
(シークバーは破線状に、全体としては真上から見たコーヒーカップのように)
最終的にアプリアイコンになった物がこちら
@ailen0ada こんなのでどうでしょう? pic.twitter.com/UTxxuleK9e
— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年5月2日
@ticktackmobile すごいです!ありがとうございます!これで申請への道が開けます!!
— Tsubasa HIRANO (@ailen0ada) 2016年5月2日
とまぁ、こんな感じで作られましたとさ。
Evelve 2016で紹介されたXamarin.Forms Themesが(ようやく)NuGetに配信されました。 中身のdllを見る限り、現時点ではiOS、Androidのみ対応しているようですね。
早速試した方がいらっしゃいます!
Xamarinメモ その18 Xamarin.Forms.ThemesをPrism.Unity.Formsと併用する場合の注意 – A certain engineer "COMPLEX"
僭越ながら補足させていただくと...
補足1
App.xamlの追加方法は @omanuke さんの記事を参考にすると良いでしょう。
補足2
「assemblyがロードされない場合」が発生する理由は、XAMLしか参照していないassemblyはリンカが依存関係を検出できないためアプリパッケージにプラットフォーム実装dllが含まれなくなるからです。
よって、コードビハインドでテーマのResourceDictionaryを追加するか、公式ドキュメントのようにダミーコードを入れることで回避できます。単にテーマを使いたいだけならAppクラスのコンストラクタで Resources = new Xamarin.Forms.Themes.DarkThemeResources();
とするのが簡単です。
Themesは2種類のNuGetパッケージで構成されています。
それぞれどいう役割なのか少し覗いてみました。
Baseには色などのリソースは定義されておらず、以下の物を提供します。
まさに Xamarin.Formsの公式ブログ で紹介されていたようなカスタムスタイルですね。
以下のものを内包したカスタムResourceDictionaryを提供します。
個人的にはDataPagesコントロール用のDataTemplateは別のdllにした方が良いように思うんですが...
ThemesとDataPegesを合わせてAndroidのマテリアルデザインのような物を作ろうとしているのでしょうか。
統一感のあるクールなUIを簡単に構築できるのはとても魅力的です。 一方、リソースキーやスタイルクラスの名前を知らないと、使用やカスタマイズできないのが辛いように思えます。(ドキュメントとして公開されるか、ソース解析しないとわからない。)
Xamarin.Formsのリリースから約2年、当初よりもプラットフォームごとのカスタマイズ手段が増えてきたので、ここでちょっと整理してみようと思います。
他に忘れてる物があったら教えてください。
プラットフォーム毎に個別の処理をしたり、値を返すのに使います。 PCL、Shared、XAMLどの場面でも使えて、個別にパラメータを設定するのに活躍します。
DependecyServiceは一種のDIサービスです。 テキスト読み上げのような、プラットフォーム固有APIを呼ぶサービスを実装するのに向いていると思います。
「Bait and Switch」と呼ばれるトリックを利用してクロスプラットフォームなライブラリを作る仕組みです。 実装方法がやや複雑ですがテンプレートが用意されているので大丈夫。(Visual Studio用)
DependecyService同様、プラットフォーム固有APIを呼ぶサービスを実装するのに向いていると思います。 こちらはXamrin.Formsに依存しておらず、Windowsをターゲットに含めることも可能です。
個人的にはDependecyServiceよりも、こちらでNuGetパッケージまで作ってしまうことをお勧めします。 (公開せずにローカルリポジトリで運用してもOK)
当ブログでも取り上げました。
Xamarin.FormsのViewは、抽象化されたビュー、レンダラー、ネイティブコントロールから成り立っており、レンダラーが抽象ビューに対応するネイティブコントロールの生成などを行っています。 この仕組みを使えば独自コントロールの作成から、既存コントロールのカスタマイズまであらゆる局面に対応可能です。(標準のPageやViewもこの仕組みで作られています)
反面、些細なカスタマイズには大げさで面倒だと言えます。
EffectsはXamarin.Forms 2.1から追加された、Viewのカスタマイズに最適な仕組みです。 Viewに添付されたEffectはXamarin.Forms側のコントロール、ネイティブ側のコントロール双方にアクセスすることができます。
生成済みコントロールに後付けする形で使用するため、インスタンス生成時の処理には介入できません。
当ブログでも取り上げました。
Native EmbeddingはXamarin.Forms 2.2から追加された仕組みです。Evolve 2016のキーノートでも紹介されました。 Sharedプロジェクトに限り、Xamarin.Formsレイアウトの中にネイティブコントロールを混ぜ込むことができます。
Shared限定なので再利用性は低く、基本的にそのアプリケーション限定の利用となるでしょう。
当ブログでも取り上げました。
Xamarin.Forms 2.2から Layout.Children
や ContentView.Content
に各プラットフォームのネイティブコントロールを埋め込めるようになり、Evolve 2016のキーノートでも紹介されました。
このフィーチャーを使うとCustomRendererよりもカジュアルにネイティブコントロールを利用できます。
キーノートのブログ
Live from Evolve: Faster and Easier Mobile App Development with Xamarin.Forms | Xamarin Blog
ドキュメント
条件
ネイティブコントロールの埋め込みを行うにはSharedプロジェクト内のコードで、プラットフォーム毎に#ifディレクティブで記述します。PCLプロジェクトでは使用できません。
サンプルコード
次のようなコードをSharedプロジェクトに追加すると、ネイティブコントロールを埋め込む事ができます。
using System; using Xamarin.Forms; #if __IOS__ using Xamarin.Forms.Platform.iOS; using UIKit; #elif __ANDROID__ using Xamarin.Forms.Platform.Android; using Android.Widget; #endif namespace XFApp25 { public class MyPage : ContentPage { public MyPage () { var text = "Embedded Platform-Specific Control in Xamarin.Forms"; var stackLayout = new StackLayout { VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center, }; #if __IOS__ var uiLabel = new UILabel { MinimumFontSize = 14f, Lines = 0, LineBreakMode = UILineBreakMode.WordWrap, Text = text + "(iOS)", }; // StackLayoutにUILabelが追加できる! stackLayout.Children.Add (uiLabel); // これもOK //Content = uiLabel.ToView (); #elif __ANDROID__ var textView = new TextView(Forms.Context) { Text = text + "(Android)", TextSize = 14, }; stackLayout.Children.Add (textView); // これもOK //Content = textView.ToView (); #endif Content = stackLayout; } } }
LayoutExtensionsクラスに定義された2つの拡張メソッドが使用します。
これらの拡張メソッドを使うためには各名前空間の参照が必要です。
ToView拡張メソッドがネイティブコントロールを NaitiveViewWrapper
に変換し、 NaitiveViewWrapperRenderer
が汎用的なViewRendererとして働く、という具合ですね。
込み入ったコントロールのために、サイズ決定時に呼ばれるデリゲートなどを渡すことも出来ます。
この記事はThemesの話のようでありながら、その実Xamarin.Forms版Merged Dictionaryの話です。
Xamarin.Forms Themes はEvolve 2016のキーノートで紹介された新機能の1つ、その目標は「デフォルトで美しいUIを提供すること」です。
Live from Evolve: Faster and Easier Mobile App Development with Xamarin.Forms | Xamarin Blog
すでにドキュメントも完備されてます。
Xamarin.Forms Themes - Xamarin
デフォルトとして提供されるLight/Darkテーマを使うにはNuGetからこれらをダウンロードします。
使い方はこんな感じ
<?xml version="1.0" encoding="utf-8"?> <Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="EvolveApp.App" xmlns:light="clr-namespace:Xamarin.Forms.Themes;assembly=Xamarin.Forms.Theme.Light"> <Application.Resources> <ResourceDictionary MergedWith="light:LightThemeResources" /> </Application.Resources> </Application>
早速試そうとしたところ肝心のNuGetパッケージがまだ配信されていなかったので、代わりのThemesの前提となっている ResourceDictionary.MergedWith
について解説します。
ResourceDictionary.MergedWith
はXamarin.Forms 2.3から追加されるプロパティです。他のResourceDictionaryクラスを指定することでリソースを連結します。おおよそWPFなどのMergedDictionariesに相当する機能ですね。
Windows系は分割・集約、Xamarin.Formsは継承・カスタマイズに向いていると言えるでしょう。
さて、Themesの使い方と照らし合わせるとお気づきでしょうか?
そう、詰まるところXamarin.Forms Themesの正体はよくカスタムされたResourceDictionaryなのであります。 (StyleClass実装も含んでいるはずですが、その辺はThemesが使えるようになった際に改めて見ていきましょう)
Xamarin.Forms 2.3からはResourceDictionaryクラスのseald指定が外れるので自分でもThemeが作れます。
例えばこんな感じ
MyTheme.xaml
<?xml version="1.0" encoding="UTF-8"?> <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XFApp24.MyTheme"> <Style TargetType="Label"> <Setter Property="TextColor" Value="Red"/> </Style> </ResourceDictionary>
MyTheme.xaml.cs
using Xamarin.Forms; namespace XFApp24 { public partial class MyTheme : ResourceDictionary { public MyTheme () { InitializeComponent (); } } }
ContentPageなどのテンプレートから改造するとXAMLでカスタムResourceDictionaryが書けます。(要InitializeComponent)
これを使ってみると
XAMLプレビューにも反映されました。
早くNuGetにThemes配信されないかなー。
Xamarin Evolve 2016のキーノートで遂に来ました!
念願のXAMLプレビューが!Xamarin.Formsに!
呼称は Xamarin.Forms Previewer だそうです。
というわけで早速試してみた様子がこちら
XAML Previewer動いたよん❤️ pic.twitter.com/Qtx9V7CKO1
— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年4月28日
どこまでが必須か分からないけどXAMLプレビュー動くまでにやった事
— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年4月28日
・Xamarin Studio(Mac)をAlphaチャネルでアップデート
・Mac OSを最新にアップデート
・Xcodeを最新にアップデート
・Xcodeを1度起動して、関連ツール(?)アップデート
続く
続き
— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年4月28日
・iOSシミュレータを再起動
・Xamarin.Formsの新規プロジェクト(PCL)を作成
・PCLプロジェクトのNuGetパッケージを一旦削除
・全てのプロジェクトにXamarin.Forms 2.3.0プレビューを追加
・全体ビルドしてiOSでハローワールド確認
続く
続き
— Xamarin.Formsヒトバシラー (@ticktackmobile) 2016年4月28日
・PCLプロジェクトに新規ページ(XAML)を追加
・.xamlファイルを開けばXAMLプレビュー!
AndroidのXAMLプレビューが動かないので別途何かする必要がある模様
後でXamarin Studioを再起動したらAndroidもプレビュー出来るようになりました。(でもImage表示できてない気がする....まぁまだAplha版だし)
必要な環境はXamarin StudioのAlphaチャネル最新版とXamarin.Forms 2.3プレビュー版、そしてその前提環境としてXcodeを最新にしておく必要があるみたい。
※Xamarin.Forms Previewerはまだ正式リリースされた機能ではないので、不安定だったりバギーだったりするかも知れません。その点はご留意ください。(2016/4/29現在)
Xamarin.Forms Previewerの公式情報をXamarinのブログで確認してみましょう。
Live from Evolve: Faster and Easier Mobile App Development with Xamarin.Forms
You can get the Xamarin.Forms Previewer today from the alpha updater channel in Xamarin Studio for Mac. To use the Xamarin.Forms previwer, your project will need to reference Xamarin.Forms 2.3 prerelease NuGet.
ふんふん、必要なのは Alphaチャンネル のMac版Xamarin StudioとXamarin.Forms 2.3のプレビュー版ですね。Visual StudioやUWPはおいおいサポートされるでしょう。
メニューから「Xamarin Studio > Check for Updates」を開いてAlphaチャンネルに切り替えます。
(画像はすでにAlphaチャンネルのものです)
更新データをダウンロード出来たらXamarin Studioを再起動。
Xcodeが古い場合はこちらも最新版に更新しておきます。更新後に一度Xcodeを起動して関連ツールの更新も忘れずに。
Xamarin.Fromsの新規プロジェクト(PCL)を作成します。(Sharedプロジェクトで作ると.xmalファイルを編集出来なくなって詰みました)
ここで一度ビルドしてHello Worldが動くことを確認。(iOSシミュレータを再起動する必要があるかも)
各プロジェクトの「パッケージ」をダブルクリックしてNuGetパッケージマネージャを開きます。 「Show pre-release packages」をチェックして、「xamarin.forms」と検索すると、プレビュー版のXamarin.Formsが見つかるのでこれをAdd Packageします。(PCLプロジェクトでのNuGetパッケージの追加が失敗することがありました。その場合はXamarin.Forms一旦削除してから入れ直します。)
ここでも一度ビルドしてHello Worldが動くことを確認。
PCLプロジェクトに「Forms ContentPage Xaml」を追加。
XAMLファイルの変更がプレビューに反映されない時は、プロジェクトをビルドしたりxamlファイルを開き直すと解消される模様です。