FC2ブログ
    08 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.» 10

    ハルシオンシステムの気ままBlog

    株式会社ハルシオンシステムのメンバーが送る、UnityやらJavaやらの技術的話題から、自社開発のアプリの宣伝とかとかのブログです。ほんと気ままにいきたいと思います。更新日は毎週 月 木でっす!

     

    【Java】ツリー構造のListViewみたいなものを作成してみた 

    はい。こんにちは。大坂です。

    微妙なタイトルの記事ですが、お付き合いください。

    皆さんはアプリを作成していてこんなもの(↓)をほしくなったりしませんかね?

    グループ1、グループ2をタップ
    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

    こんな感じの大項目をタップすると小項目が閉じるやつです!(ほしくないですか!?)

    ちょっと調べてみると、「ExpandableListView」というのがありますね!ktkr!・・・ほうほう、よくわからん!(ぇ

    ということでなんちゃってで作ってみました。
    まずはレイアウトからですね。
      <ScrollView
    android:id="@+id/foldScroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fadingEdge="none">
    <LinearLayout
    android:id="@+id/foldLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    </LinearLayout>
    </ScrollView>

    「ScrollView」に「LinearLayout」を入れてるだけですね。
    あとはプログラムでどうにかします。
    長いし、よくわからないプログラムかもしれませんが・・・。
    public class HogeActivity extends Activity {
    // 小項目の表示非表示フラグ
    boolean showFlg = false;

    /****** onCreateとかいろいろ省略 ******/

    // ツリー構造を作成するのを呼び出すサンプル。onCreateから呼び出していることにします。
    // (本来はデータ準備してループでやるんですかね?)
    public void hogehoge() {
    String[] group = {"グループ1","グループ2","グループ3"};
    String[] groupChild_1 = {"グループ1_こども1","グループ1_こども2",
    "グループ1_こども3","グループ1_こども4","グループ1_こども5"}
    String[] groupChild_2 = {"グループ2_こども1"}
    String[] groupChild_3 = {"グループ3_こども1","グループ3_こども2",
    "グループ3_こども3"}

    setGropuView(group[0], groupChild_1);
    setGropuView(group[1], groupChild_2);
    setGropuView(group[2], groupChild_3);
    }

    public void setGropuView(String group, String[] groupChild) {
    // 大項目のグループ作成
    TextView groupText = new TextView(this);
    groupText.setText(group + "(" + groupChild.length + ")");
    groupText.setTextSize(24); // テキストサイズ
    groupText.setTextColor(Color.WHITE); // テキスト色
    groupText.setGravity(Gravity.CENTER_VERTICAL); // レイアウト位置(縦真ん中に設定)
    groupText.setLayoutParams(new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.WRAP_CONTENT)); // レイアウトのサイズを設定

    // 子供の表示非表示を制御するレイアウトの作成
    final LinearLayout showLayout = new LinearLayout(this);
    showLayout.setLayoutParams(new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.WRAP_CONTENT)); // レイアウトのサイズを設定
    showLayout.setOrientation(LinearLayout.VERTICAL); // LinearLayoutで縦設定

    // 大項目をクリックしたときの設定
    groupText.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
    // クリックしたとき表示されている場合
    if(showFlg) {
    // 子供の表示非表示を制御するレイアウトを非表示にする
    showLayout.setVisibility(View.GONE);
    // フラグをfalseに設定
    showFlg = false;
    } else {
    // 子供の表示非表示を制御するレイアウトを表示する
    showLayout.setVisibility(View.VISIBLE);
    // フラグをtrueに設定
    showFlg = true;
    }
    }
    });

    // グループのこどもを作成
    // String配列を順番に取り出して処理する
    for(String tmpChild : groupChild) {
    // 今回はチェックボックスも付けているのでさらに「LinearLayout」を作成
    LinearLayout childLayout = new LinearLayout(this);
    childLayout.setLayoutParams(new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.WRAP_CONTENT)); // レイアウトのサイズを設定
    childLayout.setOrientation(LinearLayout.HORIZONTAL); // LinearLayoutで横設定

    // こどものテキストを作成
    TextView childText = new TextView(this);
    childText.setText(" " + tmpChild); // テキストに文字を設定
    childText.setTextSize(20); // 文字サイズの設定
    childText.setTextColor(Color.WHITE); // 文字色の設定
    childText.setGravity(Gravity.CENTER_VERTICAL); // レイアウト位置(縦真ん中に設定)
    // レイアウトのサイズを設定「LinearLayout」の中での比率も指定
    childText.setLayoutParams(new LinearLayout.LayoutParams(
    0, LinearLayout.LayoutParams.MATCH_PARENT, 9));
    // チェックボックスの作成
    final CheckBox childCheck = new CheckBox(this);
    // // レイアウト位置(縦真ん中、右寄せに設定)
    childCheck.setGravity(Gravity.CENTER_VERTICAL|Gravity.RIGHT);
    // レイアウトのサイズを設定「LinearLayout」の中での比率も指定
    childCheck.setLayoutParams(new LinearLayout.LayoutParams(
    0, LinearLayout.LayoutParams.MATCH_PARENT, 1));

    // おまけ。
    //テキストをクリックしても対応するチェックボックスにチェックが入るように設定
    childText.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
    // チェックが入っているとき
    if(childCheck.isChecked()) {
    // チェックを外す
    childCheck.setChecked(false);
    // チェックが外れているとき
    } else {
    // チェックを入れる
    childCheck.setChecked(true);
    }
    }
    });

    // 横並びのLinearLayoutにテキストとチェックボックスを追加
    childLayout.addView(childText);
    childLayout.addView(childCheck);
    // 子供の表示非表示を制御するLinearLayoutに横並びのLinearLayoutを追加
    showLayout.addView(childLayout);
    }
    // レイアウトファイルに設定しているLinearLayoutに大項目のテキストを設定
    foldLayout.addView(groupText);

    // 親Viewを取得してremoveView実行(エラー対策)
    ViewGroup parent = (ViewGroup)showLayout.getParent();
    if ( parent != null ) {
    parent.removeView(showLayout);
    }
    // レイアウトファイルに設定しているLinearLayoutに
    // 子供の表示非表示を制御するLinearLayoutを追加
    foldLayout.addView(showLayout);
    }
    }

    こんな感じでやってみました。一応これで張り付けた画面のようなものができます!
    本当はバックグラウンドや間の線も指定していますが、省略しています。
    チェックボックス付でもっといいやり方ご存知の方!是非是非、教えてください!

    あとはチェックボックスの値を取っていろいろやれば完成ですね・・・。
    ではで・・・え?チェックボックスの処理はないのかって??
    えぇ!まだ作ってません!ごめんなさいorz

    来週の記事で書けるようにするので許してくださいm(_ _)m

    ではでは、また来週(´・ω・)ノシ

    Category: 開発日記(Java)

    Thread: 日記

    Janre: 日記

    tb 0 : cm 0   

    コメント

    コメントの投稿

    Secret

    トラックバック

    トラックバックURL
    →http://halcyonsystemblog.jp/tb.php/21-d81b6352
    この記事にトラックバックする(FC2ブログユーザー)