Android - 手风琴小部件

Android - accordion widget

提问by Bostone

I'm looking at best way of creating an Accordion-style widget such as on this page. Is there a way of achieving same effect using standard Android toolkit or do I need to build custom widget? If so - which one would you recommend extending if any?

我正在寻找创建手风琴风格小部件的最佳方式，例如在此页面上。有没有办法使用标准的 Android 工具包实现相同的效果，还是我需要构建自定义小部件？如果是这样-如果有的话，您会建议扩展哪一个？

采纳答案by Maciej ?opaciński

I have pushed android accordion viewproject at github. We use it for our customers, tested on 2.2, 2.3.x, 3.2 and 4.0.3. Works pretty good for us.

我已经在 github 上推送了android 手风琴视图项目。我们为客户使用它，并在 2.2、2.3.x、3.2 和 4.0.3 上进行了测试。对我们来说效果很好。

Going to add animation on fold/unfold in next step.

下一步要在折叠/展开时添加动画。

Here is small screenshot:

这是小截图：

回答by Bostone

And in case you still wonder - this can be pretty much done with pair of button/layout stacked inside of the linear layout. Pseudo code follows

如果您仍然想知道 - 这几乎可以通过堆叠在线性布局内部的一对按钮/布局来完成。伪代码如下

<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>

Another thing to possibly try is stacking ExpandableListView-s on top of each other

另一件可能尝试的事情是将 ExpandableListView-s 堆叠在一起

回答by cutiko

I have to risk myself and say that the @Bostone answer is the most appropriate. I will give you my code below so you can see. Thanks for the GitHub Maciej ?opaciński, but as @SudoPlz said in the comments, there is no documentation at all. I didn't knew where to start. I try to do it with Eclipse and Android Studio and in neither I could run the project to start figuring out how its work. Besides, the last commit in that project was about 1 year ago, wich makes me fear a lot that if something goes wrong I will be stuck in a dead end. So without further delay, here is my solution based in @Bostone:

我不得不冒着风险说@Bostone 的答案是最合适的。我将在下面给您我的代码，以便您可以看到。感谢 GitHub Maciej ?opaciński，但正如@SudoPlz 在评论中所说，根本没有文档。我不知道从哪里开始。我尝试使用 Eclipse 和 Android Studio 来做这件事，但在这两种情况下我都无法运行该项目来开始弄清楚它是如何工作的。此外，该项目的最后一次提交大约是 1 年前，这让我非常担心如果出现问题，我会陷入死胡同。因此，事不宜迟，这是我基于@Bostone 的解决方案：

1.- First you have to create a Button and a Layout nested in a ScrollView:

1.- 首先，您必须创建一个 Button 和一个嵌套在 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.- After that go to your corresponding JAVA, there find the button and set an onClickListener, inside the onClickListener you will find the layout.

2.- 之后转到相应的JAVA，找到按钮并设置一个onClickListener，在onClickListener 中，您将找到布局。

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

            }
        });

3.- So now inside the onClickListener we will find the layout. As you can see in the first step the layout is set by default to GONE, but now we have to set it to visible. The problem is, how can I make it gone again and vice-versa? So we will add a condition for getting the visibility of the layout and based on that it will be hidden or show up:

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);
                }
            }
        });

This can be put over each other as many times you want.

这可以根据需要多次重叠。

So now if you really want to make it look like an accordion you can pimp the button. You could put an arrow on the right of it, using by example:

所以现在如果你真的想让它看起来像手风琴，你可以拉皮条按钮。您可以在其右侧放置一个箭头，例如：

findMagicBtn.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.right_arrow, 0);

You should do that inside the onClickListener and use the condition to change the direction of the arrow, by changing the drawable (if is gone and down arrow, and if is visible an up arrow).

您应该在 onClickListener 中执行此操作，并使用条件通过更改可绘制对象（如果消失和向下箭头，如果可见则向上箭头）来更改箭头的方向。

Also, you can make it look more natural by adding an animation, like this:

此外，您可以通过添加动画使其看起来更自然，如下所示：

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);

You will have to consider that the above animation must be done while the view is visible. Please be aware that setFillAfter(true), will change the size of the container permanently so if you do so, maybe you don't want to use VIEW.GONEanymore. This question has a wonderfull explanation about the Scale Animation

您将不得不考虑必须在视图可见时完成上述动画。请注意，setFillAfter(true), 将永久更改容器的大小，因此如果您这样做，您可能不想再使用VIEW.GONE了。这个问题对比例动画有一个很好的解释

回答by Karthik Sankar

In my app, I used Riya Gayasen's accordion view. It was very easy to get started and worked well. Here is what I did.

在我的应用程序中，我使用了 Riya Gayasen 的手风琴视图。它非常容易上手并且运行良好。这是我所做的。

1. Download the zip of source code from https://github.com/riyagayasen/Android_accordion_view.
2. Unzip and copy 'easyaccordion' folder to your project's root directory (the directory containing the 'app' folder)
3. In your project root settings.gradle file add :easyaccordion. Here is how my file looks like: include ':app',':easyaccordion'
4. In your app/build.gradle file add the following line to the dependencies block. implementation 'com.riyagayasen.android:easyaccordion:1.0.3'
5. And that's it. You can start using the component inside your layout.

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. 就是这样。您可以开始在布局中使用该组件。