Hatena::ブログ(Diary)

Kazzzの日記 このページをアンテナに追加 RSSフィード

2013-09-08

[][]UIコントロールの対照性


AndroidiOS一般的には似たような画面を持ったアプリケーションを開発していると思われがちだが※、実際には両プラットホームでの画面を構成する部品にはかなりの違いがある。

その違いは画面を構成するUIコントロール(View)において顕著であり、一通り汎用的なUI部品を提供するAndroidに対して、iOSは一貫した画面の見栄えや操作性を実現するために提供されており、互いに同じ用途のUIコントロールを使えるとは限らない。

そこで互いの移植においては悩まないために両プラットホームのUIの対照表を作ってみたのが下の表。ただし、全ての用途を対象にすると凄く多くなるので、アプリケーションでなにか情報入力、選択するために使用するUIコントールに限っている。

UIコントロール対照一覧

UIコントロールAndroidiOS(UIKit)
ベルandroid.widget.TextViewUILabel
ボタンandroid.widget.ButtonUIButton
テキストボックスandroid.widget.EditTextUITextField
チェックボックスandroid.widget.CheckBoxUISwitch
ラジオボタンandroid.widget.RadioButtonUISegmentedControl
ピナ(コンボボックス)android.widget.SpinnerUIPickerView
メニュー(メニューバー)android.app.ActionBarUIActionSheet
ダイアログandroid.app.Dialog派生クラスUIAlertDialog派生クラス?

このほかにもパネル等のコンテナビュー上に上記のUIコントロールを複数載せて、特定の情報を入力させるコンポジットコントロール(TableView中の編集行の実装もこれにあたる)もあるが、複合的なものは省いている。

大方、対照となるUIコントロールが提供されているように見えるのだが、AndroidとiOS、特にAndroid→iOSへのポーティングは注意する点がある。

チェックボックス

コンベンショナルなCheckBoxに対してUISwitchはデザインの自由度は少ない。

ラジオボタン

UISegmentedControlはラジオボタンというよりは、トグルボタンの集合のため、やはりデザインの自由度は少ない。特に縦に並べることはできない。

スピナ

この用途でのUIPickerViewはかなり用途が限定される。予め提供されていない型(年月日や時間以外)を扱う場合は別途開発するか、カスタムコントロールの利用を考慮する必要がある。

メニュー

UIActionSheetは基本的には縦にボタンを並べただけなので、通常のメニューとは情報の表現に制限がある。例えば、メニューでは普通に実装できる階層構造を表現するのは難しい。

ダイアログ

AndroidのDialogはActivity同様にレイアウトを流し込むので自由度が高いが、iOSのUIAlertDialogは自身でレイアウトするのが困難なため、下手に継承クラスをこね回す位ならば、他のモーダルビューの利用を検討すべきだろう。

その他

今回は入力コントロールということで対象とはしなかったが、逆にiOSのUINavigationControllerとUINavigationBarを使った戻るボタン込みの画面遷移の実装はAndroidにポーティングするのはかなり困難であり、すべきではない。

ゆめゆめ互いの画面デザインを同じにしよう等とは思わないことだ。