Android開發&可摺疊的佈局——CollapseLayout

collapselayout


一款可摺疊的、簡單的佈局；繼承LinearLayout，由兩個子TextView組成；可用於一般ViewGroup、ListView、RecyclerView中


在Android開發時，經常會設計“使用說明”、“消息”或者“幫助”等頁面，通常來說裏面只是一些單純的文本（包含富文本）；
之前爲偷懶都是直接使用Bootstrap的collapse插件，不過因爲內置網頁，動畫效果不是很好，因此設計collapselayout庫。

CollapseLayout繼承自LinearLayout，有兩個子View，分別顯示標題以及內容。同時對ListView和RecyclerLayout做了適配。

附上Github地址：collapselayout

具體運行效果：

準備步驟

在項目build.gradle中添加依賴：

compile 'com.knowledge.mnlin:collapselayout:0.0.1'{
    exclude module: "support-annotations"
}

如果提示找不到依賴文件，可能時jcenter未及時通過，可以依賴私人倉庫

//Project的build.gradle文件
allprojects {
    repositories {

        ... 

        maven { url "https://dl.bintray.com/lovingning/maven"}
    }
}

簡單使用

在ViewGroup（如LinearLayout）中添加CollapseLayout佈局；
爲CollapseLayout添加CollapseLayout_parent屬性（父佈局id），就可以自動展開與摺疊；

<LinearLayout
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.knowledge.mnlin.frame.view.CollapseLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:CollapseLayout_parent="@id/parent"/>

    <com.knowledge.mnlin.frame.view.CollapseLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:CollapseLayout_parent="@id/parent"/>

    <com.knowledge.mnlin.frame.view.CollapseLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:CollapseLayout_parent="@id/parent"/>
</LinearLayout>

控制多個展開與縮放的“組”

第一組爲LinearLayout；第二組爲ListView；第三組爲RecyclerView；
設置LinearLayout組中CollapseLayout_parent爲“根”父佈局；

<LinearLayout
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/layout_top_bar"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="LinearLayout"/>

    <LinearLayout
        android:id="@+id/parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.knowledge.mnlin.frame.view.CollapseLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:CollapseLayout_parent="@id/root"/>

        <com.knowledge.mnlin.frame.view.CollapseLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:CollapseLayout_parent="@id/root"/>

        <com.knowledge.mnlin.frame.view.CollapseLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:CollapseLayout_parent="@id/root"/>
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="ListView"/>

    <ListView
        android:id="@+id/lv_help"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:divider="?colorAccent"
        android:dividerHeight="1px"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="RecyclerView"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_help"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:divider="?colorAccent"
        android:dividerHeight="1px"/>
</LinearLayout>

在ListView和RecyclerView的Adapter適配器中，新建CollapseLayout佈局;
構造方法中可以傳入分組的方式，直接傳入parent，表示父佈局爲ListView或RecyclerView；

public class Adapter extends BaseAdapter {

    ...

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            CollapseLayout item = new CollapseLayout(parent, context);
            convertView = item;
        }

        ...

        return convertView;
    }
}

public class RecAdapter extends RecyclerView.Adapter<RecAdapter.ViewHolder> {

    ...

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(new CollapseLayout(parent, context));
    }

    ...

}

此時第二組與第三組摺疊展開互不影響；第一組摺疊時則會影響第二第三組數據。

填充數據與設置顯示效果

在創建CollapseLayout對象時：
1. 可以控制展開與摺疊動畫同時進行或者是分開執行。
1. 可以更改設定“父”佈局
1. 可以設置動畫時間（展開與摺疊）
1. 可以更改標題與內容

new CollapseLayout(context)
        .setAnimatorTogether(false)
        .setCollapseParent(parent)
        .setContent("content")
        .setTitle("title")
        .setTitleAndContent("title","content")
        .setDuration(EXPAND_TIME,COLLAPSE_TIME);

注意：由於ListView與RecyclerView的子View複用，因此展開內容在滑動到不可見區域後會自動摺疊。