Android - 手风琴小部件

Question

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

Answer 1

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

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

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

Answer 2

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

将在下一步中添加折叠/展开动画。

这是小屏幕截图：

Answer 3

我必须冒着风险说@Bostone 的答案是最合适的。 我将在下面给你我的代码，以便你可以看到。 感谢 GitHub Maciej Łopaciński，但正如 @SudoPlz 在评论中所说，根本没有文档。 我不知道从哪里开始。 我尝试使用 Eclipse 和 Android Studio 来完成此操作，但我都无法运行该项目来开始弄清楚它是如何工作的。 此外，该项目的最后一次提交是大约一年前，这让我很担心如果出现问题我会陷入死胡同。 因此，不再拖延，这是我基于 @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。 这个问题对缩放动画有一个精彩的解释

Answer 4

在我的应用程序中，我使用了 Riya Gayasen 的手风琴视图。 上手非常容易并且效果很好。 这就是我所做的。

1. 从以下位置下载源代码 zip
   https://github.com/riyagayasen/Android_accordion_view。
2. 解压缩并将“easyaccordion”文件夹复制到项目的根目录
   目录（包含“app”文件夹的目录）
3. 在项目根 settings.gradle 文件中添加 :easyaccordion。 这里
   我的文件是这样的：
include ':app',':easyaccordion'
4. 在您的 app/build.gradle 文件中将以下行添加到
   依赖块。 <代码>
   实现 'com.riyagayasen.android:easyaccordion:1.0.3'
5. 就是这样。 您可以开始使用您的内部组件
   布局。