Google Material设计android中的扩展面板

时间:2016-06-02 14:37:13

标签: android material-design

我只是在寻找android(材料设计)中扩展面板的示例。

https://www.google.com/design/spec/components/expansion-panels.html

我知道我们有可扩展的列表视图。但是,我需要在扩展每个面板时显示一些额外的布局视图,类似于Accordian视图。我们怎样才能在android中实现这个目标?

1 个答案:

答案 0 :(得分:6)

尝试展开式布局 here。它可以与Accordian

具有相同的行为

使用compile 'com.github.aakira:expandable-layout:1.5.1@aar'将其包含在您的Gradle中 示例

<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/accordian_header"
    android:clickable="true">
    <TextView
        android:id="@+id/accordian_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:textColor="#333"
        android:textStyle="bold"
        android:text="Title" />

    <ImageButton
        android:id="@+id/down_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_margin="8dp"
        android:src="@android:drawable/arrow_down_float" />
</RelativeLayout>
<com.github.aakira.expandablelayout.ExpandableLinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="14dp"
        android:paddingRight="14dp"
        android:paddingBottom="14dp"
        android:orientation="vertical"
        android:id="@+id/content"
        app:ael_expanded="false"
        app:ael_duration="500"
        app:ael_orientation="vertical">
<!--add your content here -->
  </com.github.aakira.expandablelayout.ExpandableLinearLayout>

</LinearLayout>

然后在 java代码

ExpandableLinearLayout content=(ExpandableLinearLayout) itemView.findViewById(R.id.content);
RelativeLayout header=(RelativeLayout) itemView.findViewById(R.id.accordian_header);

//to toggle content
header.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                content.toggle();
            }
        });

希望这很有用。