android - スクロールビュー内の ExpandableListView

Question

私のアプリでは、ExpandableListView とその下に CheckBox があるページを作成したいと考えています。

私の問題は、ExpandableListView が大きすぎて、CheckBox がページの外に出てしまうことです。

小さい画面ではまったく表示されません。

ExpandableListView をスクロールビュー内に配置しようとしましたが、機能しません。

私のデザインを作る方法はありますか？

これが私のコードとスクリーンショットです。

XML コード:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/White" >

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fillViewport="true" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_marginTop="15sp"
                android:text="In this page you can save a group of exercise under one routine."
                android:textColor="@color/Black"
                android:textSize="20sp" />

            <ExpandableListView
                android:id="@+id/instructionsExView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView1"
                android:layout_marginTop="15sp" >
            </ExpandableListView>

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/instructionsExView"
                android:layout_marginTop="15sp"
                android:text="If you want to open the instruction again check &apos;need help?&apos;"
                android:textColor="@color/Black"
                android:textSize="20sp" />

            <CheckBox
                android:id="@+id/checkInstructions"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/textView2"
                android:layout_marginTop="16dp"
                android:checked="false"
                android:text="dont show again when opening the page"
                android:textColor="@color/Black" />

        </RelativeLayout>
    </ScrollView>

</RelativeLayout>

スクリーンショット:

ここに画像の説明を入力

編集：

ここに画像の説明を入力

score 19 · Accepted Answer

「onCreate」メソッドで、「expListView.setAdapter(listAdapter)」の後に「setListViewHeight(expListView)」と記述し、展開可能なリストビューの OnGroupClickListener を次のように設定します。

expListView.setOnGroupClickListener(new OnGroupClickListener() {

        @Override
        public boolean onGroupClick(ExpandableListView parent, View v,
                int groupPosition, long id) {
            setListViewHeight(parent, groupPosition);
            return false;
        }
    });

使用された方法:

private void setListViewHeight(ListView listView) {
    ListAdapter listAdapter = listView.getAdapter();
    int totalHeight = 0;
    for (int i = 0; i < listAdapter.getCount(); i++) {
    View listItem = listAdapter.getView(i, null, listView);
    listItem.measure(0, 0);
    totalHeight += listItem.getMeasuredHeight();
    }

    ViewGroup.LayoutParams params = listView.getLayoutParams();
    params.height = totalHeight
    + (listView.getDividerHeight() * (listAdapter.getCount() - 1));
    listView.setLayoutParams(params);
    listView.requestLayout();
    }


    private void setListViewHeight(ExpandableListView listView,
    int group) {
    ExpandableListAdapter listAdapter = (ExpandableListAdapter) listView.getExpandableListAdapter();
    int totalHeight = 0;
    int desiredWidth = MeasureSpec.makeMeasureSpec(listView.getWidth(),
    MeasureSpec.EXACTLY);
    for (int i = 0; i < listAdapter.getGroupCount(); i++) {
    View groupItem = listAdapter.getGroupView(i, false, null, listView);
    groupItem.measure(desiredWidth, MeasureSpec.UNSPECIFIED);

    totalHeight += groupItem.getMeasuredHeight();

    if (((listView.isGroupExpanded(i)) && (i != group))
    || ((!listView.isGroupExpanded(i)) && (i == group))) {
    for (int j = 0; j < listAdapter.getChildrenCount(i); j++) {
    View listItem = listAdapter.getChildView(i, j, false, null,
    listView);
    listItem.measure(desiredWidth, MeasureSpec.UNSPECIFIED);

    totalHeight += listItem.getMeasuredHeight();

    }
    }
    }

    ViewGroup.LayoutParams params = listView.getLayoutParams();
    int height = totalHeight
    + (listView.getDividerHeight() * (listAdapter.getGroupCount() - 1));
    if (height < 10)
    height = 200;
    params.height = height;
    listView.setLayoutParams(params);
    listView.requestLayout();

    }

これで準備完了です。

score 8 · Accepted Answer

@ Dmila Ramの回答に基づいて、私はそれを行うことができました.

私の場合、次のようにメソッドExpandableListViewを初期化して入力します。onCreate

expandableListView = (ExpandableListView) findViewById(R.id.appsMenu);
listAdapter = new ExpandableListAdapter(this, listDataHeader, listDataChild);
expandableListView.setAdapter(listAdapter);
for (int i = 0; i < listAdapter.getGroupCount(); i++)
     expandableListView.expandGroup(i);
setListViewHeight(expandableListView);
expandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
     @Override
     public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
          setListViewHeight(parent, groupPosition);
          return false;
        }
     });

各グループを展開していることに注意してください。その後、私は電話しますsetListViewHeight(expandableListView);

このメソッドはExpandableListView、初めて作成されたときにの高さを計算します。

コードは次のとおりです。

private void setListViewHeight(ExpandableListView listView) {
        ExpandableListAdapter listAdapter = (ExpandableListAdapter) listView.getExpandableListAdapter();
        int totalHeight = 0;
        for (int i = 0; i < listAdapter.getGroupCount(); i++) {
            View groupView = listAdapter.getGroupView(i, true, null, listView);
            groupView.measure(0, View.MeasureSpec.UNSPECIFIED);
            totalHeight += groupView.getMeasuredHeight();

        if (listView.isGroupExpanded(i)){
            for(int j = 0; j < listAdapter.getChildrenCount(i); j++){
                View listItem = listAdapter.getChildView(i, j, false, null, listView);
                listItem.measure(0, View.MeasureSpec.UNSPECIFIED);
                totalHeight += listItem.getMeasuredHeight();
            }
        }
    }

    ViewGroup.LayoutParams params = listView.getLayoutParams();
    params.height = totalHeight
            + (listView.getDividerHeight() * (listAdapter.getGroupCount() - 1));
    listView.setLayoutParams(params);
    listView.requestLayout();
}

グループを展開する必要はありません。代わりに、子アイテムをループして、それらを合計の高さの計算に追加することができます。

これにより、すべてのウィジェットがScrollViewスクロール可能になり、ExpandableListView適切に表示されます。

次に、グループをクリックすると高さも計算されるようにするために、このメソッドも必要です。

private void setListViewHeight(ExpandableListView listView,
                                   int group) {
        ExpandableListAdapter listAdapter = (ExpandableListAdapter) listView.getExpandableListAdapter();
        int totalHeight = 0;
        int desiredWidth = View.MeasureSpec.makeMeasureSpec(listView.getWidth(),
                View.MeasureSpec.EXACTLY);
        for (int i = 0; i < listAdapter.getGroupCount(); i++) {
            View groupItem = listAdapter.getGroupView(i, false, null, listView);
        groupItem.measure(desiredWidth, View.MeasureSpec.UNSPECIFIED);
        totalHeight += groupItem.getMeasuredHeight();

        if (((listView.isGroupExpanded(i)) && (i != group))
                || ((!listView.isGroupExpanded(i)) && (i == group))) {
            for (int j = 0; j < listAdapter.getChildrenCount(i); j++) {
                View listItem = listAdapter.getChildView(i, j, false, null,
                        listView);
                listItem.measure(desiredWidth, View.MeasureSpec.UNSPECIFIED);
                totalHeight += listItem.getMeasuredHeight();
            }
        }
    }

    ViewGroup.LayoutParams params = listView.getLayoutParams();
    int height = totalHeight
            + (listView.getDividerHeight() * (listAdapter.getGroupCount() - 1));
    if (height < 10)
        height = 200;
    params.height = height;
    listView.setLayoutParams(params);
    listView.requestLayout();
}

それだけで問題なく動作しますが、このソリューションはさらに最適化することができます。

score 1 · Accepted Answer

複数の RelativeLayout は必要ありません。expandablelistview は 2 つのアイテムの間にある必要があるため (この場合)、これらの 2 つのアイテムはparentTop とparentBottom を持つ最初のアイテムになり、残りは上/下で再生されます。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/White"
android:orientation="vertical" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="15sp"
    android:text="In this page you can save a group of exercise under one routine."
    android:textColor="@color/Black"
    android:textSize="20sp" />

<CheckBox
    android:id="@+id/checkInstructions"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginTop="16dp"
    android:checked="false"
    android:text="dont show again when opening the page"
    android:textColor="@color/Black" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/checkInstructions"
    android:layout_marginTop="15sp"
    android:text="If you want to open the instruction again check &apos;need help?&apos;"
    android:textColor="@color/Black"
    android:textSize="20sp" />

<ExpandableListView
    android:id="@+id/instructionsExView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/textView2"
    android:layout_below="@id/textView1"
    android:layout_marginTop="15sp" >
</ExpandableListView>

</RelativeLayout>

score 1 · Accepted Answer

スクロールビュー内でリストビューを使用することはできないため、スクロールビューを使用して行をビューとして動的に追加する必要があります。

score 0 · Accepted Answer

以下のコードを使用して、これを実現できます。私はListViewあなたがと交換することができますExpandableListView

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="15sp"
    android:text="In this page you can save a group of exercise under one routine."
    android:textColor="@color/WHITE"
    android:textSize="20sp" />

<ListView
    android:id="@+id/listView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2" >

</ListView>

<TextView
    android:id="@+id/textView2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15sp"
    android:text="If you want to open the instruction again check &apos;need help?&apos;"
    android:textColor="@color/WHITE"
    android:textSize="20sp" />

<CheckBox
    android:id="@+id/checkInstructions"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/textView2"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="16dp"
    android:checked="false"
    android:text="dont show again when opening the page"
    android:textColor="@color/WHITE" />

上記のコードを約 50 の listitem 値でチェックし、非常に小さなディスプレイデバイスでテストしたところ、正常に動作しました。

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginTop="15sp"
    android:text="In this page you can save a group of exercise under one routine."
    android:textColor="@color/WHITE"
    android:textSize="20sp" />

<ExpandableListView
    android:id="@+id/expandableListView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2" >

</ExpandableListView>

<TextView
    android:id="@+id/textView2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15sp"
    android:text="If you want to open the instruction again check &apos;need help?&apos;"
    android:textColor="@color/WHITE"
    android:textSize="20sp" />

<CheckBox
    android:id="@+id/checkInstructions"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/textView2"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="16dp"
    android:checked="false"
    android:text="dont show again when opening the page"
    android:textColor="@color/WHITE" />

で確認しましたがExpandableListView、問題なく動作しています。

android - スクロールビュー内の ExpandableListView

5 に答える 5

Related