如何重新创建 Android 快速设置滑动面板？

Question

在我的应用程序中，我想重新创建一些与众所周知的 Lollipop+ 快速设置面板非常相似的东西。

即：通过点击或拖动header，我想要一个面板从header下方滑下并向下推现有内容 .

现在应用于我的应用程序，header 是一个工具栏，主要内容是一个显示博客文章列表的 RecyclerView。通过单击或拖动工具栏，我希望出现一个面板来显示有关博客的一些统计信息。像这样：

我一直在摆弄很棒的（但很复杂）Android 设计支持库。它在滚动和设计应用栏与主要内容之间的交互方面具有强大的功能。但是效果很难达到。

我研究了 CollapsingToolbarLayout but couldn't use it in a way that the content is expanded below the main Toolbar. I have also studied the SlidingUpPanel 库，但无法做到 将内容向下推 ，只需将鼠标悬停即可。总的来说，对于 CoordinatorLayout、CollapsingToolbarLayout 和滚动 Behavior 应该如何相互作用，我有点迷茫...

有谁知道如何重新创建此 "quick settings" 效果？或者，也许有人知道我应该在哪里寻找 AOSP 中的快速设置代码？

非常感谢！

Answer 1

最近我创建了一个名为 Toolbar Panel 的库，它像快速设置抽屉一样工作。您可以自己自定义面板。如果您有任何疑问或问题，可以在 github 中创建问题或在此答案中发表评论。

这是演示视频：

Answer 2

您可以通过将折叠代码放在您的主页中来做到这一点 activity 并根据工具栏点击事件使其可见和隐藏。

用于动画 slid_down.xml :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
    android:duration="1000"
    android:fromYDelta="0"
    android:toYDelta="100%" />
</set>

slid_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
    android:duration="1000"
    android:fromYDelta="100%"
    android:toYDelta="0" />
</set>

你的布局

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/lay"
            android:visibility="gone">
            <TextView android:text="Collapse Ne" android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/content_layout">
        <TextView android:text="Hello World!" android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
</LinearLayout>

在你的activity

里面

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
            final LinearLayout lay = (LinearLayout) findViewById(R.id.lay);
            final LinearLayout content_layout = (LinearLayout) findViewById(R.id.content_layout);

            toolbar.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(i%2==0){
                        lay.setVisibility(View.VISIBLE);
       content_layout.startAnimation(AnimationUtils.loadAnimation(context,
            R.anim.slid_down));
}
                    else{
                        lay.setVisibility(View.GONE);
content_layout.startAnimation(AnimationUtils.loadAnimation(context,
            R.anim.slid_up));
}
                    i++;
                }
            });

我刚刚准备了一个demo...你可以根据自己的需要修改。

Answer 3

在 and 的深刻见解之后，我终于花时间解决了自己的问题。

关键是依靠 CoordinatorLayout 并描述两个自定义 Behavior：一个用于滑动面板，另一个用于主要内容。我实际上为此目的创建了一个库，因为这可能会在将来帮助其他人：SubAppBarPanel. See it in action.

示例代码：

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:clickable="true"
            android:foreground="?selectableItemBackground" />

    </android.support.design.widget.AppBarLayout>

    <com.davidferrand.subappbarpanel.SubAppBarPanel
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:panel_expanded="false"
        app:panel_offset="10dp"
        app:panel_slidingQuantity="85%">

        <!-- Content of the sliding panel -->

    </com.davidferrand.subappbarpanel.SubAppBarPanel>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.davidferrand.subappbarpanel.SubAppBarPanel$ScrollingViewBehavior">

        <!-- Main content -->

    </FrameLayout>

</android.support.design.widget.CoordinatorLayout>

注意：拖动行为仍然是一个 TODO。

如何重新创建 Android 快速设置滑动面板？

How to recreate Android quick settings sliding panel?

android

android-toolbar

android-design-library

android-collapsingtoolbarlayout

android-appbarlayout