Xamarinマルチプラットフォーム(C#) ~ListView編
はじめに
Xamariプロジェクトで、C#を用いたListViewのサンプルの実装までを以下に示します。
※XAML編は、下記
コーディング
TestListViewXamlソリューションのMainPageCtrl.csにて、
コレクション(ObservableCollection)で、リストアイテムを作成し、Custom Cellsを用いて実装してみました。
解説
簡単になりますが、大体使用したAPIは、以下の通りです。
Custom Cells
※Custom Cellsは、APIではありません。ViewCellを派生させ作るクラス名のことです。
基本は、下記を参考にさせて頂きました!!
Gist
MainPageから、MainPageCtrlを呼び出すだけのソースコードなので、今回はGistでアップロード
感想
Xamarinマルチプラットフォーム(XAML) ~ListView編
はじめに
Xamariプロジェクトで、XAMLを用いたListViewのサンプルの実装までを以下に示します。
今回、Xamari APIのListViewを使おうかと思ったのですが、使わずに、そもそもXamarinプロジェクトであれば、XAMLに記述さえすれば、iOSとAndroidに対応できるの?という疑問が自分の中で出てしまったので、ほぼXAML記述での実装となります。
ListViewで、アイテム追加して表示させるだけなので、中身のデータバインディングはしてません。
ListViewの画像アイコンは、ぴよさん作成のものです。
コーディング
TestListViewXamlソリューションのMainPage.xamlおよびMainPage.xaml.csにて、
コレクション(ObservableCollection)で、リストアイテムを作成し、データバインドのみで実装してみました。
ソース全体は、以下の通りです。
解説
簡単になりますが、大体使用したAPIは、以下の通りです。
[XAML]
[csファイル]
ObservableCollection
筆者的には、WPF(Windows Presentation Foundation)に慣れていたので、ListViewのアイテムを作成するに本APIでコレクションを作成しました。
ObservableCollection(T) クラス (System.Collections.ObjectModel)
GitHub
全ソースコードは、以下のGitHubにアップロードしました。
今度は、Xamarin APIで実装してみたいと思います。
Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)作成 ~実装編
はじめに
Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)の実装までを以下に示します。
コーディング
TestReadWriteソリューションのViewController.csにて、btnRead関数、btnWrite関数のAction操作を実装し、それぞれ「読み込み」と「書き込み」を実現しています。
ソース全体は、以下の通りです。
解説
簡単になりますが、大体使用したAPIは、以下の通りです。
ファイル拡張子チェック
テキストファイルに限定するため、".txt"以外の拡張子は対象外とする。
そのため、パス入力チェック後、GetExtensionよりファイル拡張子を確認します。
var extension = Path.GetExtension(textReadValue.StringValue);
ファイル読み込み
ファイル読み込みは、ReadAllTextより、指定パスのファイルを読み込みます。
var readdata = File.ReadAllText(textReadValue.StringValue);
ディレクトリチェック
ファイル書き込み時は、FileExistsで指定パスが存在するかを確認します。
bool bRet = NSFileManager.DefaultManager.FileExists(filepath);
ファイル書き込み
ファイル書き込みは、WriteAllTextより、指定パスへファイルを書き込みます。
File.WriteAllText(textWriteValue.StringValue, textviewWriteValue.Value);
GitHub
全ソースコードは、以下のGitHubにアップロードしました。
注意事項
今回、テキストファイル(.txt)限定としています。
Mac OS X or macOS Xのプリインストールエディタといえば、テキストエディットなのですが、デフォルト設定保存は、リッチテキスト(.rtf)形式での保存になります。
リッチテキストの場合、ファイル属性やら付与されるため、今回使用したAPI群だけで対応するのは難しいです。
リッチテキスト用のAPIを使用することになりますが、今回は簡単なテキストファイルで実装しました!!
Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)作成 ~UI作成編
はじめに
Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)のUI作成までを以下に示します。
概要
TestReadWriteソリューションのMain.storyboard.csを開き、GUIを作成していきます。
UI作成
TestReadWriteソリューションのMain.storyboard.csを開くことで、XcodeのInterface BuilderエディタおよびXcodeのソリューションが起動します。
Visual Studioでは、UI開発は行えないため、UI依存コードはXcode側で作成する必要があります。
※数年後、XcodeなしでVisual Studioのみで作成できることを切に願いましょう(笑)
Xcodeを今まで扱ったことがない人は、躊躇してしまうかもしれませんね。
今回は、以下のUIを作成しました。
※画面作成過程は、省略。。。
① Label
- ファイル読み込みパス
- ファイル書き込みパス
- 内容(画面左)
- 内容(画面右)
② Text Field
- ファイル読み込みパス入力用
- ファイル書き込みパス入力用
③ Push Button
- Read(Text Fieldの読み込みパスからファイル読み込み)
- Write(Text Fieldの書き込みパスにファイル書き込み)
④ Text View
- 読み込みしたファイルデータ出力用
- 書き込みするファイルデータ入力用
Interface BuilderエディタでUIを決めたら、Xcodeのソリューションのから「ViewController.h」を開き、先ほど作成したUIとアクションおよびアウトレットの接続を行います。
※UIのオブジェクトから、ViewController.hに向かって接続(Ctrlキー押しながら、引っ張って接続)することで自動でヘッダ側に書き込まれます。
接続のヘッダは、以下の通りです。
UIのオブジェクトとViewController.hの接続が完了したら、Xcodeのプロジェクトを保存します。
その後、Visual Studio Community 2017 for MacのTestReadWriteソリューションへ戻って以下のファイルを確認します。
- ViewController.cs
上記ファイルは、UI作成を行う前は、partial class ViewControllerの中身は空なのですが、Xcode側でUI作成およびアクション、アウトレットの接続を行ったことで、下記のように、インタフェース記述がなされます。
UI作成は、ここまで!!
次回は、実際にプログラミングしてみようかと思います。
注意事項
Text Viewの接続は、NSScrollViewオブジェクトの中に、NSTextViewが紐づいているため、これをViewController.hに向かって接続する必要があります。
読み込み・書き込みデータは、NSScrollViewではなく、NSTextViewに入出力する必要がある
Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)作成 ~プロジェクト作成編
はじめに
Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)の新規プロジェクト作成までを以下に示します。
概要
Macアプリケーション(Cocoa App)で、テキストファイルの読み込み(Read)・書き込み(Write)を行い、結果を表示する単純なアプリケーションを作成します。
今回は、Macアプリケーション(Cocoa App)の新規プロジェクトの作成編でお届けします。
環境構成
- Visual Studio Community 2017 for Mac
- XCode 8.3
Visual Studio Community 2017 for Macは、下記よりダウンロードしインストール。
プロジェクト作成
Visual Studioを起動すると以下のUIが表示されます。
「New Project」を押下し新しいプロジェクトを作成して行きます。
今回は、表題の通り、Macアプリケーション(Cocoa App)の新規プロジェクト作成が目的のため、下記に示すテンプレート「Cocoa App」を選択し「次へ」を押下します。
Macアプリの構成は、下記のように、App Name「TestReadWrite」としてプロジェクトを作成します。
App Nameを入力後、「次へ」を押下します。
※その他の項目は、今回はデフォルト値のまま!!
…
…
…
ここまで記述し、筆者は、App Name間違えました(笑)
テキストファイルの読み込み・書き込みと謳って措きながら何故か、「TestReadWrite」となっていますね。
この際、「TextReadWrite」ではなく、「TestReadWrite」で突っ走ります。。。
必要なファイルは、自動で作成され、プロジェクト作成が完了します。
ファイル構成
TestReadWriteプロジェクトのファイル構成は、以下の通りです。
- AppDelegate.cs
- Entitlements.plist
- Info.plist
- Main.cs
- Main.storyboard
- ViewController.cs
筆者の場合は、Cocoaアプリケーションでは、Objective-Cに慣れていますが、
C#感覚で実装出来そうなところが、面白いですね(笑)。
[AppDelegate.cs]
アプリケーションのイベントハンドリング処理
[Entitlements.plist]
App Sandbox、iCloud、キーチェーンなどの設定情報ファイル
[Info.plist]
アプリケーションのバージョン番号や著作権表示などの設定情報ファイル
[Main.cs]
Macアプリケーションメイン処理
[Main.storyboard]
GUI(画面遷移作成)ファイル
※定番のXCodeの表現で言えば、.xibファイルですね。。
画面のレイアウトからアプリ全体の遷移を作成できる
[ViewController.cs]
画面遷移の制御処理
これで、Macアプリケーション(Cocoa App)のプロジェクト作成編は終了です。
次回は、実際に実装解説していく予定です。
Visual Studio 2017を用いたマルチプラットフォーム開発(Xamarin)~ デバッグ編
はじめに
前回作成した、新規プロジェクトをデバッグ実行するまでを下記に示します。
UWPデバッグ実行
UWPアプリケーションのデバッグは、以下の構成でデバッグ実行します。
「►ローカルコンピューター」を押下し、デバッグを実行します。
実行後、以下の画面のように、UWPのアプリケーションが起動します。
※空プロジェクトでは、画面表示に「Welcome to Xamarin Forms!」と表示される。
Androidデバッグ実行
Androidアプリケーションのデバッグは、以下の構成でデバッグ実行します。
Androidエミュレータが起動するため、かなりスペックが必要となります。
※筆者のビルド環境は、以下の通りですが、起動に時間が掛かってしまいます。
Core i7&16GB以上の環境で行った方が、ストレスはないと思います。
- CPU:Core i5(7th)
- メモリ:8GB
なお、Androidのデバッグの場合は、ソリューション(Xamarin.Android)から、「配置」を行わないとデバッグ実行できないかもしれません。
実行後、以下の画面のように、Androidのアプリケーションがエミュレータ上で起動します。
iOSデバッグ実行
iOSのアプリケーションのデバッグは、以下の構成でデバッグ実行します。
ここでのiOSのデバッグ実行は、Simulatorを使用しますが、デバッグ実行するには、Mac側の実機が起動していることが前提条件となります。
また、Mac側に予め下記に示す設定が必要となります。
環境設定から、共有フォルダの設定画面を表示します。
共有フォルダの設定にて、「リモートログイン」を有効にします。
リモートログインのアクセス権限として、Macのログインユーザーを設定します。
「►Simulator」※を押下し、デバッグを実行します。
接続可能な、Macの機器が表示されます。同一LAN内であれば表示されると思います。
※表示されない場合は、Macの追加にて、「IPアドレス」で追加します。
Macのリモートログインの「ユーザー名」「パスワード」を入力し、「ログイン」を押下します。
実行後、以下の画面のように、iOSのアプリケーションがエミュレータ上で起動します。
注意事項
UWPでのビルドおよびデバッグは、Windowsの設定で、以下のように「開発者モード」にチェックを入れておく必要があります。
Androidでのビルドおよびデバッグは、Visual StudioのAndroidプロパティ設定で、以下のように「Fast Deploymentの使用(デバッグモードのみ)」のチェックを外す必要があります。
※デフォルト設定は、チェックオンになっています。
※これを外さないとエミュレータの場合、アプリケーションが起動しません。
実際に、これでハマりましたので、気を付けてください。。。
デフォルトはオフ設定にしてVisual Studioをリリースして欲しいものです。(笑)
iOSでのビルドおよびデバッグは、Visual Studio 2017 Version 15.2 の場合、下記エラーメッセージが表示されます。
Xamarinの障害(バグ)かと思います。
Can not resolve reference: C:/WINDOWS/Microsoft.NET/Framework/v4.0.30319/ja/mscorlib.resources.dll
対処方法は、以下の通りです。
Visual Studioのインストールフォルダより、ターゲットファイルを編集する必要があります。
C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\MSBuild\Xamarin
上記のファイルを開き、PropertyGroupに下記を追加します。
<FrameworkPathOverride>$(TargetFrameworkRootPath)$(TargetFrameworkIdentifier)\$(TargetFrameworkVersion)</FrameworkPathOverride>
例)
<PropertyGroup>
<XamarinAppleSdkTargetsImported>true</XamarinAppleSdkTargetsImported>
<FrameworkPathOverride>$(TargetFrameworkRootPath)$(TargetFrameworkIdentifier)\$(TargetFrameworkVersion)</FrameworkPathOverride>
</PropertyGroup>
また、今回、Xamarinというプロジェクトを作成したのですが、Xamarin.iOSの場合、アセンブリ名が被るらしく、下記のビルド時エラーが発生します。
Application name 'Xamarin.iOS.exe' conflicts with an SDK or product assembly(.dll)name.
そのため、Xamarin.iOSのプロパティから、アセンブリ名「Xamarin2.iOS」、限定の名前空間「Xamarin2.iOS」に名前を変更しました。
※「Xamarin」という製品名の名前をプロジェクトに付けたのが迂闊でした(笑)
Visual Studio 2017を用いたマルチプラットフォーム開発(Xamarin)~ ビルド編
はじめに
Visual Studio 2017から新規プロジェクトを作成し、ビルドまでを下記に示します。
新規プロジェクト作成
Visual Studioのツールバーより、[ファイル]⇒[新規作成]⇒[プロジェクト]より、新しいプロジェクトを作成します。
プロジェクトは、「クロスプラットフォームアプリ(Xamarin.Formsまたはネイティブ)Visual C#」を選択し「OK」を押下します。
なお、名前(プロジェクト名)は、「Xamarin」としました。
※場所は任意とします。
続いて、「空のアプリ」を選択し、「OK」を押下します。
続いて、ターゲットを選択し、「OK」を押下します。
※ここでは、以下の設定にしています。動作させたい環境任意となります。
上記が完了すると、以下のプロジェクト(ソリューション)が作成されます。
ソリューション構成は、以下のように自動で作成されます。
自動作成されたソリューションは、主に以下の目的で記述します。
- Xamarinは、主に共通ソースとして記述する
- Xamarin.Androidは、Android独自のUI(ユーザインターフェース)を記述する
- Xamarin.iOSは、iOS独自のUIを記述する
- Xamarin.UWPは、Windows独自のUIを記述する
以上で、プロジェクト作成完了です。
ビルド
空プロジェクトのため、特に実行しても画面表示だけとなりますが、とりあえずビルドしてみます。
ビルド構成は、以下の通りです。
Visual Studioのツールバーより、[ビルド]⇒[ソリューションのビルド]を実行して、ビルドすることで、各プラットフォームの実行ファイルが作成されます。
※iOSのプラットフォームだけは、警告が出ますね.....
これだけで、3種のプラットフォームに対応出来るのは結構楽ですよね。
次回
Visual Studio 2017を用いたマルチプラットフォーム開発(Xamarin)~ デバッグ編
としてお届けします。