web-dev-qa-db-ja.com

Android-アコーディオンウィジェット

このページのようなアコーディオンスタイルのウィジェット を作成する最良の方法を探しています。標準のAndroidツールキットを使用して同じ効果を達成する方法はありますか、それともカスタムウィジェットを作成する必要がありますか？ある場合、どの拡張を推奨しますか？

androidwidgetaccordion
22
Bostone

Githubで Android accordion view プロジェクトをプッシュしました。 2.2、2.3.x、3.2、4.0.3でテストされたお客様のために使用しています。私たちにはかなりうまくいきます。

次のステップで折りたたみ/展開時にアニメーションを追加します。

ここに小さなスクリーンショットがあります：

enter image description here

22
Maciej Łopaciński

そして、あなたがまだ疑問に思っている場合のために-これは、線形レイアウトの内側に積み重ねられたボタン/レイアウトのペアでほとんど行うことができます。擬似コードが続きます

<LinearLayout Android:orientation="vertical">
    <Button Android:text="Panel 1"/>
    <SomeKindOfLayout Android:id="@+id/panel1">
            <!-- widgets in first panel go here -->
    </SomeKindOfLayout>
    <Button Android:text="Panel 2"/>
    <SomeKindOfLayout Android:id="@+id/panel2" Android:visibility="gone">
            <!-- widgets in second panel go here -->
    </SomeKindOfLayout>
    <Button Android:text="Panel 3"/>
    <SomeKindOfLayout Android:id="@+id/panel3" Android:visibility="gone">
            <!-- widgets in third panel go here -->
    </SomeKindOfLayout>
    <Button Android:text="Panel 4"/>
    <SomeKindOfLayout Android:id="@+id/panel4" Android:visibility="gone">
            <!-- widgets in fourth panel go here -->
    </SomeKindOfLayout></LinearLayout>

可能性のあるもう1つのことは、ExpandableListView-sを積み重ねることです。

28
Bostone

私は自分を危険にさらし、@ Bostoneの答えが最も適切であると言わなければなりません。以下に私のコードを示します。 GitHub MaciejŁopacińskiに感謝しますが、@ SudoPlzがコメントで述べたように、ドキュメントはまったくありません。どこから始めればいいのか分かりませんでした。私はEclipseとAndroid Studioを使用してそれを実行しようとしています。どちらの場合も、プロジェクトを実行してその動作を理解することはできませんでした。さらに、そのプロジェクトの最後のコミットは約1年前、何かがうまくいかないと私が行き止まりになるのではないかと私はとても恐れています。それで、それ以上遅れることなく、@ Bostoneに基づく私の解決策は次のとおりです。

1.-最初に、ScrollViewにネストされたボタンとレイアウトを作成する必要があります。

_    <ScrollView xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:tools="http://schemas.Android.com/tools" Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        tools:context=".TasksListActivity">


            <Button
                Android:id="@+id/magic_btn"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="Magic Btn"/>
            <LinearLayout
                Android:id="@+id/magic_layout"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:orientation="vertical"
                Android:visibility="gone">

        </LinearLayout>
</ScrollView>
_

2.-その後、対応するJavaに移動し、ボタンを見つけて、onClickListenerを設定します。onClickListener内にレイアウトがあります。

_Button findMagicBtn = (Button) findViewById(R.id.magic_btn);
        findMagicBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
_

3.-これで、onClickListener内にレイアウトが見つかります。最初のステップでわかるように、レイアウトはデフォルトでGONEに設定されていますが、ここではそれを可視に設定する必要があります。問題は、どうすればそれをもう一度やり直すことができるか、またはその逆ですか？したがって、レイアウトの可視性を取得するための条件を追加し、それに基づいて非表示または表示します。

_Button findMagicBtn = (Button) findViewById(R.id.magic_btn);
        findMagicBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LinearLayout findMagicLl = (LinearLayout) findViewById(R.id.magic_layout);
                if (findMagicLl.getVisibility() == View.VISIBLE) {
                    findMagicLl.setVisibility(View.GONE);
                } else {
                    findMagicLl.setVisibility(View.VISIBLE);
                }
            }
        });
_

これは何回でも重ねることができます。

それで、本当にアコーディオンのように見せたい場合は、ボタンをポン引きできます。例を使用して、その右側に矢印を置くことができます：

_findMagicBtn.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.right_arrow, 0);
_

OnClickListener内でこれを行い、条件を使用して、ドローアブルを変更することにより（矢印が消えて下矢印で、上矢印が表示されている場合）、矢印の方向を変更する必要があります。

また、次のようにアニメーションを追加して、より自然に見せることもできます。

_ScaleAnimation animation = new ScaleAnimation(1f, 1f, 1f, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
animation.setDuration(180);
animation.setFillAfter(true);
findMagicLl.startAnimation(animation);
_

上記のアニメーションは、ビューが表示されている間に実行する必要があることを考慮する必要があります。 setFillAfter(true)はコンテナのサイズを永続的に変更するため、変更すると_VIEW.GONE_を使用したくない場合があることに注意してください。この質問は Scale Animation について素晴らしい説明があります

4
cutiko

私のアプリでは、Riya Gayasenのアコーディオンビューを使用しました。始めるのはとても簡単で、うまくいきました。これが私がしたことです。

  1. https://github.com/riyagayasen/Android_accordion_view からソースコードのZipをダウンロードします。
  2. 「easyaccordion」フォルダを解凍して、プロジェクトのルートディレクトリ（「app」フォルダを含むディレクトリ）にコピーします。
  3. プロジェクトのルートのsettings.gradleファイルに：easyaccordionを追加します。ファイルは次のようになります：include ':app',':easyaccordion'
  4. App/build.gradleファイルで、依存関係ブロックに次の行を追加します。 implementation 'com.riyagayasen.Android:easyaccordion:1.0.3'
  5. 以上です。レイアウト内でコンポーネントの使用を開始できます。
2
Karthik Sankar