Как воссоздать скользящую панель быстрых настроек Android?

В своем приложении я хочу воссоздать что-то очень похожее на известную всем панель быстрых настроек Lollipop+.

То есть: щелкнув или перетащив заголовок, я хочу, чтобы панель скользила вниз из-под заголовка и сдвигала вниз существующий контент.

Быстрые настройки появляются под основной строкой состояния и смещают уведомления

Применительно к моему приложению заголовок теперь представляет собой панель инструментов, а основное содержимое представляет собой RecyclerView, показывающий список сообщений в блоге. Щелкнув или перетащив панель инструментов, я хочу, чтобы панель отображала некоторые статистические данные о блоге. Вот так:

Темная панель выдвигается из-под AppBar

Я возился с потрясающей (но сложной) библиотекой поддержки дизайна Android. Он имеет отличный функционал для прокрутки и разработки взаимодействия между панелью приложения и основным контентом. Но эффекта трудно добиться.

Я изучил CollapsingToolbarLayout, но не смог использовать таким образом, что содержимое расширяется ниже основного Toolbar. Я также изучил библиотеку SlidingUpPanel, но не смог заставить ее проталкивать содержимое вниз, просто наведите курсор. В целом, я немного не понимаю, как CoordinatorLayout, CollapsingToolbarLayout и прокручивающиеся Behavior должны взаимодействовать вместе...

Кто-нибудь знает, как воссоздать этот эффект «быстрых настроек»? В качестве альтернативы, может быть, кто-то знает, где мне искать код для быстрых настроек в AOSP?

Большое спасибо!




Ответы (3)


Недавно я создал библиотеку под названием панели инструментов, которая работала как панель быстрых настроек. Вы можете настроить панель самостоятельно. Если у вас есть какие-либо вопросы или проблемы, вы можете создать проблему в github или прокомментировать этот ответ.

Это демонстрационное видео:

Демонстрация панели инструментов

person Niko Adrianus Yuwono    schedule 07.12.2015
comment
Спасибо Нико, эта библиотека интересна. Однако он перетаскивает всю панель инструментов, поэтому сама панель инструментов перемещается, а панель появляется над ней. Я пытаюсь сделать так, чтобы панель отображалась под панелью инструментов. Таким образом, несмотря на то, что достигнутый эффект является последовательным сам по себе, на самом деле он не отвечает на мой вопрос: с - person David Ferrand; 08.12.2015
comment
@Dadou Хммм, это тоже интересное дополнение. Постараюсь реализовать в свободное время! - person Niko Adrianus Yuwono; 08.12.2015
comment
Я начинаю думать, что буду сам разрабатывать эффект с помощью пользовательского представления. Я обязательно поделюсь с вами любым интересным результатом и отправлю PR, если это возможно! - person David Ferrand; 08.12.2015
comment
@Дадоу Спасибо! будем ждать :) - person Niko Adrianus Yuwono; 09.12.2015
comment
В конце концов, я не стал изменять ваш код напрямую, потому что выбрал другой подход, используя метод CoordinatorLayout. Но спасибо за вдохновение ;) - person David Ferrand; 09.12.2015

Я наконец-то нашел время, чтобы решить свою проблему, после хороших идей от Нико Ювоно и Хетал Упадхьяй.

Ключ был в том, чтобы полагаться на CoordinatorLayout и описать два пользовательских Behavior: один для скользящей панели, другой для основного контента. На самом деле я создал библиотеку для этой цели, так как это может помочь другим людям в будущем: SubAppBarPanel. Посмотрите, как это работает.

Образец кода:

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

person David Ferrand    schedule 09.12.2015

Вы можете сделать это, поместив свой сворачивающийся код в свою домашнюю активность и сделав его видимым и скрытым в соответствии с событием щелчка на панели инструментов.

для анимации 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>

Внутри вашей деятельности

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

Я только что подготовил демо... вы можете изменить его в соответствии с вашими требованиями.

person H Raval    schedule 07.12.2015
comment
К сожалению, извините, я думал, что это будет очевидно в моем сообщении, но это правда, я не сказал об этом четко: я хочу анимацию и перетаскивание, а не просто появление/исчезновение макета. - person David Ferrand; 08.12.2015
comment
вы можете анимировать его с помощью простой анимации Android при перетаскивании .... проверьте мой отредактированный ответ - person H Raval; 08.12.2015
comment
@Dadou в вопросе, о котором вы только упомянули, нажимая на панель инструментов, когда в игру вступает перетаскивание? - person Kai; 08.12.2015
comment
Это правда, и на самом деле я приму этот ответ, если ни у кого не будет лучшего решения до конца щедрости (спасибо @HetalUpadhyay). Но в идеале я хотел бы добиться полного эффекта быстрых настроек, включая щелчок и перетаскивание. - person David Ferrand; 08.12.2015
comment
Мой собственный ответ является более полным и пригодным для повторного использования, однако я наградил вас наградой, потому что вы поставили меня на правильный путь с анимацией;) - person David Ferrand; 11.12.2015