How to recreate Android quick settings sliding panel?

问题

In my app I want to recreate something that is very similar to the Lollipop+ quick settings panel that everyone knows.

That is: by clicking or dragging the header, I want a panel to slide down from below the header and push down the existing content.

Applied to my app now, the header is a Toolbar and the main content is a RecyclerView showing a list of blog posts. By clicking or dragging the Toolbar, I'd like a panel to appear to show some stats about the blog. Like so:

I have been messing around with the awesome (but complex) Android Design Support Library. It has great functionality for scrolling and designing the interaction between the app bar and the main content. But the effect is hard to achieve.

I have studied the CollapsingToolbarLayout but couldn't use it in a way that the content is expanded below the main Toolbar. I have also studied the SlidingUpPanel library but couldn't make it push the content down, simply hover. Overall, I'm a bit lost as to how CoordinatorLayout, CollapsingToolbarLayout and scrolling Behaviors should interact together...

Does anyone know to recreate this "quick settings" effect? Alternatively, maybe someone knows where I should look to find the code for the Quick Settings in AOSP?

Thanks a lot!

回答1:

Recently I created a library called Toolbar Panel that worked like quick settings drawer. You can customize the Panel by yourself. If you have any question or issue you can create issue in the github or comment in this answer.

This is the demo video :

回答2:

I have finally taken the time to solve my own problem, after good insights from Niko Yuwono and Hetal Upadhyay.

The key was to rely on the CoordinatorLayout and to describe two custom Behaviors: one for the sliding panel, another one for the main content. I have actually created a library for this purpose as this may help other people in the future: SubAppBarPanel. See it in action.

Sample code:

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

Note: dragging behavior is still a TODO.

回答3:

You can do this by putting your collapsing code inside your home activity and make it visible and hide as per toolbar click event.

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

Your Layout

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

Inside your 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++;
                }
            });

I have just prepared a demo...you can change it as per your requirement.

来源：https://stackoverflow.com/questions/34095471/how-to-recreate-android-quick-settings-sliding-panel