TableViewコントロール

テーブル表示だけでなく、昔はやったHTMLでTABLEを使ってレイアウトを整えたようにいろいろな用途に使えます。

http://docs.appcelerator.com/titanium/2.0/index.html#!/guide/TableViews

基本操作

編集モード開始・終了(iOS)

//編集モード開始
tableView.editing = true;
//編集モード終了
tableView.editing = false;

移動モード開始・終了(iOS)

//移動モード開始
tableView.moving = true;
//移動モード終了
tableView.moving = false;

行の削除

2.1.1

TableViewSectionのremoveでも行を削除できますが、一番したの行以外を削除するとレイアウトが壊れます。

ドキュメントにあるようにTableViewのメソッドdeleteRowを使うべきなのですが、問題は指定がTableViewRowではなく、 indexであるため、削除したい行のindexをなんらかの方法で取得する必要が有ります。

個人的に一覧楽な方法はrowにnameというパラメータを設定しておきTableViewのgetIndexByNameメソッドを使う方法です。

このメソッドはドキュメントに書いてありませんが2.1.1では動きます。ドキュメントにないことはよくあることです。

tableView.deleteRow(tableView.getIndexByName("row1"));

TableViewのheightをTi.UI.SIZEに設定していてもrowを削除した場合にサイズが自動調整はされません。

UI

行アイコン

行の右端につくアイコンです。下記プロパティを指定することで使用できますが、一部環境依存があります。

プロパティAndroidiOSHTML5用途(推奨)
hasChildOKOK?子要素がある場合に使用
hasDetailNGOK?子要素がある場合に使用
hasCheckOKOK?ON,OFFの切り替えが可能,trueでチェック有、falseでなし

グルーピング

1つのテーブルの中をいくつかのグループに分けて表示することができます。 Androidではグループのヘッダ行が入る程度ですが、iOSでは明確にテーブル表示を分けることもできます。

  • 方法1: headerプロパティを使う
    • コーディングが短い
    • 行をクリックされた場合にどのグループに所属しているのか簡単にはわからない(方法はある)
  • 方法2: TableViewSectionを使う
    • コーディングが少し長い
    • 行をクリックされた場合にどのグループに所属している行なのかわかる

どちらを使っても同じ見た目にはなります。iOSのグループを分けての表示も両方できます。

方法1: headerプロパティ*

headerをつけた行の時点でグループヘッダが表示される。

注意:headerプロパティはTableViewについて説明されたドキュメントには乗っているにもかかわらず、 なぜかAPI一覧の箇所には記載がない。同じ質問をしている方がいましたが回答はありません。

TableViewRow.header is undocumentated

    var rows = [
      {title:'Twitterアカウント', header: 'アカウント設定'},
      {title:'Facebookアカウント'},
      {title:'BGM', header: 'サウンド設定'},
      {title:'ボリューム'}
    ];

方法2: TableViewSection

  • TableViewSectionにはTableViewRow以外にも追加可能のような記述があるが、他のviewをaddするとアプリが起動しなくなる(明確なエラーが出ない。エラーがわかりずらいなー)
var vs = Ti.UI.createTableViewSection({
        headerTitle: 'アカウント設定'
    });
var row1 = Ti.UI.createTableViewRow({
       title: 'アカウント'
    });
vs.add(row1);

iOSにおけるグループ表示

styleにTitanium.UI.iPhone.TableViewStyle.GROUPEDを設定する。 TableViewStyleは他にはPLAIN(ディフォルト)のみとなります。

    var tv= Ti.UI.createTableView({
       className: 'table',
       style:Titanium.UI.iPhone.TableViewStyle.GROUPED
    });

Androidでは以下のエラーが起きますが、JSSがうまく動かないのでソース上で分岐させるしかないですね。。。もしくは無視か

WARNING : Use of unsupported constant Ti.UI.iPhone.TableViewStyle.GROUPED !!!
 if(Ti.Platform.osname=="iphone")
        tableView.style = Titanium.UI.iPhone.TableViewStyle.GROUPED;

スクロールの停止

iOSでは1画面(縦260ピクセル程度)に収まるとわかっていてもTableViewはスクロール動作(ドラッグして移動)ができてしまうので、 レイアウトにTableViewを使う場合などにはscrollableをfalseにしておくとスクロールができなくなります。

    tableView = Ti.UI.createTableView({
       top: 0,
       width: '100%',
       scrollable:false
    });

行を選択不可にする(iOS)

TableViewのプロパティallowsSelectionをfalseにする。

Androidは元々必要ない。

ただし、Rowに割り当てられたラベルをクリックするイベントなども起きなくなる。(ボタンは未確認)

行にチェックをつける

ver 2.1.0

右端にチェックマークをつけることができます。選択行をまとめて削除する場合などに使うことができます。 Titleで行の文字列指定し、センタリングした場合にはチェックがつくと文字列の位置が左にずれます。

行クリックでチェックの切り替えを行うサンプル

var row = Ti.UI.createTableViewRow({	
  	height: Ti.UI.SIZ
 });
row.addEventListener('click',function(e){
	e.row.hasCheck = !e.row.hasCheck;
});

TableViewSectionからチェックのついた行の取得サンプル

for (var rowNum in section.rows) {
   var row = section.rows[rowNum];
   if(row.hasCheck==true){
	//チェック有り
    }
}

操作

行の作成

  • Androidでは他のビューが追加された場合には、元のTableViewRow.titleは無視されますが、iOSでは重なって表示されます。消しておきましょう。

行の追加

  • tableView.dataにTableViewRowの配列を割り当てる
  • tableView.appendRowでTableViewRowを1行追加する

どこかの本家の記事でdataに割り当てがパフォーマンスのために推奨されていました。(当然といえば当然ですが)

注意:Androidはdataで割り当てた後にappendRowで追加できますがiOSではdataで割り当てた行がなくなりますが、 Androidは追加になります。(グルーピングの関係かな)

Tips

TableViewのheaderTitleの文字列折り返し箇所がおかしい(iPad)

ver 2.1.0

ipadでもiPhooneの幅で折り返してしまいます。

TableViewSectionのheaderTitleの場合は問題ありませんでした。

ちなみにiPhoneでは折り返し位置の2文字ぐらいが見えなくなります。ようするにTableViewのheaderTitleは使わない方がいいです。

tableView.headerTitle ='JVN iPediaの脆弱性情報を検索することができます。';

タブへの背景画像や背景色の設定が効かない(Android)

ver 2.1.0

TabのbackgroundFocusedImageやbackgroundFocusedColorの設定が効きません、TableGroupにも同じようにタブの背景を設定できる プロパティがありますが、効かない上にドキュメント上はMobile Webのみになっています。 (Tabの方はAndroidは対応,2.0のドキュメントではTabGroupもAndroid対応が書いてあった)

GitHubを見ると修正したようなことがかかれていたので次のバージョンで確認が必要です。

iOSはモジュールでハックできます。

TableViewRowのclickイベントは挙動が怪しい(Android)

ver 2.1.0

怪しい挙動

  • TableViewRowの中のUIオブジェクト(Label,buttonなど)以外の場所をクリックするとclickイベントは起きるがx,yのパラメータがundefined
  • TextFieldをTableViewRowにいれるとTextFieldをクリックするとclickはfireされるが、それ以外の場所をクリックしてもイベントがfireされない。
    • TextFieldのtouchEnabled,editableの値は関係なく、TextFieldが行に入っていることが原因らしい
    • 関連するフォーラムはいくつか見つかったがどれもfixされているので、新たに生まれた挙動なのかもしれない
      • このままでは行をクリックして詳細画面に遷移する操作などを行えないので、ダミーのビューを行いっぱいに広げるか必要な時のみラベルをテキストフィールドに変えるか

singletapイベントも挙動は変わりませんでした。

iOSの方は問題は特になさそうでした。

一度height=0にしたオブジェクトのTi.UI.SIZEは常に0

ver 2.1.0

固定値をいれるしかなくなります。

テキスト編集中の最後の行を削除するとエラー[iOS]

ver 2.1.0

条件がいくつかつきますが下記の状態でiOSのテーブル編集機能(editing=true)を使って行を削除するとエラーになります。 いろいろ試しましたが回避不能です。

  • 行の中にテキストフィールドがあり、テキストフィールドにフォーカスがあたっている
  • テーブルの行が最後の1行である
  • セクションを使っている

ネイティブで同じ動きになるか後で確かめる。

TableViewSelection.getRowCount()はエラー[iOS]

プロパティrowCountは大丈夫ですが調子に乗ってゲッタを使うとアプリがクラッシュします。(エラーなし)

TableViewRowにはclassNameを設定してはいけない[Android]

java.lang.ArrayIndexOutOfBoundsExceptionでアプリがクラッシュします。

これは必ずというわけではないですが、何らかの条件で必ずおこるようになります。

30回ぐらい設定して1回あたりました。原因が特定しにくいのでTableViewRowにはclassNameを設定しない方がいいと思われます。

(ですが、classNameを設定することでパフォーマンス向上ができるとの記述も有り意味がわかりませんが)

scrollToIndexは追加直後には使えない[iOS]

テーブルの最後に行を追加し、追加した行までテーブルをスクロールした場合がよくありますが、 追加した直後(同じメソッド内)にはスクロールすることができません。

tableView.scrollToIndex(section.rowCount-1);

[Android]rightImage=nullでクラッシュ!

iOSは大丈夫ですがandroidはクラッシュ。

rightImage=““としましょう。

titanium/ui_controls/table_view.txt · 最終更新: 2012/08/07 21:22 (外部編集)
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0