MonoTouch.Dialogを使用してiPhoneのユーザーインターフェイスを使いこなす

モノタッチ ユーザーインターフェイスは、ほとんどすべてのiPhoneアプリケーションを使用する強力なテーブルレンダリングウィジェットであるUITableViewに基づいています。 UITableViewは、ウィジェット自体の構成方法に基づいて、さまざまな方法でデータをレンダリングできる強力なウィジェットです。



すべての種類のUITableViewの例を次に示します。



画像



UITableViewのコンテンツは、データをオンデマンドで提供する開発者が作成したコードを呼び出すことでレンダリングされます。 プロトコルには、「セクションNのセクション数」、「セクションNの行数」、「セクションNのタイトルは何ですか」などのリクエストが含まれます。セルの実際のコンテンツを提供するコールバックの形式。 ウィジェットの全機能にもかかわらず、それを使用してUIを作成することは非常に問題です。 開発者は、アクションの繰り返し、各プレゼンテーションのカスタマイズ、わずかな構成、およびいくつかの設定を磨く必要性に時間を費やしています。 Object-CからC#に多くの例を移植し 、同じプロセスを何度も繰り返すことで正しいオプションを見つけました。



角質が私の指に現れましたが、夜でも完璧ではない解決策を見つけて、より良い選択肢があると思いました。 しかし、当時、私は単純な行ごとの移植を行っていました。これに加えて、新しいAPIを作成する準備ができていませんでした。



最近、iPhoneでお気に入りのTwitterクライアントがUIを暴いたとき、私は自分のTwitterクライアントを書くことにしました。 最初のステップは、Twitterアカウントの設定を作成することでした。 ご理解のとおり、これはUITableViewを介して実装されます。 プレゼンテーションイベント、スイッチ、ifに対応するモデルをセットアップする必要がありました。一般的に、コードを書くことは楽ではありませんでした。 それがMonoTouch.Dialogの誕生です。



リフレクションでクラスをダイアログボックスにバインドできるようにしたかったので、C#クラスを記述してUITableViewにバインドできました。

class TwitterConfig {

[Section ( "Account" )]

[Entry] string Username;

[Password] string Password;



[Section ( "Settings" )]

bool AutoRefresh;

bool AutoLoad;

bool UseTwitterRetweet;

}








リフレクションを使用する代わりに、メモリ内の現在のダイアログの表現を作成しました。 考えは、リフレクションはエンジンコードを使用できるブリッジになるというものでした。



エンジンコードは、各行をウィジェットにできるという原則に基づいて構築されています。 テキスト、スイッチ、テキストフィールド、スライダー、カレンダー、またはユーザーが作成したコントロールを含めることができます。 私はそれを「要素」と呼び、次のものを作成しました。



MonoTouch.Dialogは、 Apple HIG for iPhoneの推奨事項に従っており、些細なことではなく、アプリケーションにできるだけ集中する機会を提供します。



また、UITableViewはMVCに基づいて構築されているため、大規模なデータセットを効果的にスケーリングできます。設定やデータを含むほとんどのページでは、このような複雑さは必要ありません。



別の可能性は、テキストの入力に関するすべての問題を解決することです:テキストの入力、Enterを押すと自動的に次の行に移動する、セクション内のすべての行を揃える、入力の終わりに達したときにキーボードを非表示にします。



動作中のAPIの例:



画像 var root = new RootElement ( "Settings" ) {

new Section (){

new BooleanElement ( "Airplane Mode" , false ),

new RootElement ( "Notifications" , 0, 0) { Notifications }

new Section (){

new RootElement ( "Sound" ), { Sound },

new RootElement ( "Brightness" ){ Brightness },

new RootElement ( "Wallpaper" ){ Wallpaper }

},

new Section () {

new EntryElement ( "Login" , "Your login name" , "miguel" ),

new EntryElement ( "Password" , "Your password" , "password" , true ),

new DateElement ( "Select Date" , DateTime .Now),

new TimeElement ( "Select Time" , DateTime .Now),

}

}






RootElementを作成すると、それをDialogViewControllerに渡して制御できます。

var dv = new DialogViewController (root);

navigation.PushViewController (dv, true );






Reflection API



レプリケーションAPIは、特別な属性がバインドされているフィールドのクラスをチェックします。



クラスとそのレンダリング方法の例:



画像 class AccountInfo {

[Section]

public bool AirplaneMode;



[Section ( "Data Entry" , "Your credentials" )]



[Entry ( "Enter your login name" )]

public string Login;



[Caption ( "Password" ), Password ( "Enter your password" )]

public string passwd;



[Section ( "Travel options" )]

public SeatPreference preference;

}







お気づきのとおり、SeatPreferenceはUINavigationControllerを使用して制御する無線に自動的に変換され、ヘッダーはフィールド名から取得されます。この動作は[Caption]属性を使用して構成できます。



属性を使用して、レンダリング方法、タイトル、画像などを設定できます。



LINQおよびMonoTouch.Dialog



CraigはMix 2010の優れた会議アプリケーションを作成しました。MonoTouch.Dialogのアプリケーションのさまざまな部分にUITableViewを設定するために重複するコードをすべて削除することで、コードの量を減らすのを手伝いました。 会議アプリケーションはデータベースのスケジュールで動作するため、MonoTouch.Dialogを拡張してLINQを改善しました。



LINQ定義が埋め込まれたXMLドキュメントを作成できるSystem.Xml.Linq APIと同様に、MonoTouch.Dialogを使用してUIを作成できます。



Craigのアプリケーション用に、セッションを開始し、セッションのタイトルと場所を表示できるSessionElementを作成しました。



次のコードには、[マイスケジュール]タブのUIが含まれています。 データはオンデマンドでリクエストされます(Appleはすべてのビューで遅延読み込みを推奨しています)

画像 public class FavoritesViewController : DialogViewController {

public FavoritesViewController () : base ( null ) { }



public override void ViewWillAppear ( bool animated)

{

var favs = AppDelegate.UserData.GetFavoriteCodes();

Root = new RootElement ( "Favorites" ) {

from s in AppDelegate.ConferenceData.Sessions

where favs.Contains(s.Code)

group s by s.Start into g

orderby g.Key

select new Section (MakeCaption ( "" , g.Key)) {

from hs in g

select (Element) new SessionElement (hs)

}

};

}

}






好きな2つのモデルのいずれかを使用します:インターフェースとデータをすばやく簡単に操作するためのReflection、またはボイラープレートコードを書くのに半分の時間を費やすことなく、ユーザーインターフェイスのより高度なカスタマイズのためのElement API



このすべてが、皆さんがアプリケーションの改善により多くの時間を費やし、ルーチンコードを書く時間を短縮するのに役立つことを願っています。



MonoTouch.Dialogは完璧ではなく、すべての要望が含まれているわけではありません。 また、追加を歓迎します。 このコードブランチの何にも縛られず、必要と思われる変更を加えてください。



All Articles