Выезжающая панель на Android

Вчера мне понадобилось сделать панель наподобие стандартной верхней панели Android, той самой которую вы ежедневно вытаскиваете пальцем из-за верхнего края экрана. Поскольку опыта для написания собственного View подобного рода у меня нет, я начал поиск готовых решений. Оказалось, что сформулировать запрос довольно сложно, но в итоге поиски натолкнули меня на AndroidSlidingUpPanel.

Вообще, я редко пишу и что-то делаю на Андройде, но иногда приходится. Кстати, советую так же почитать про Push уведомления на Android.

Установка

Если вы все еще используете Eclipse, то придется скачать библиотеку и подключить папку library в свой проект (все должно заработать, но я не проверял). Я использую Android Studio и тут все гораздо проще, добавляем зависимость в наш build.gradle и синхронизируем проект:

compile 'com.sothree.slidinguppanel:library:+'

Как использовать?

Нужно модифицировать наш layout в соответствии с этим:

<!-- Основной элемент. Не обязан быть корневым, но обычно так и происходит -->
<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_layout"
    <!-- И ширина и высота должны быть match_parent -->
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    <!-- Местоположение нашей панели. top - сверху, bottom - снизу -->
    android:gravity="top"
    <!-- Высота части панели, которая будет "выглядывать" -->
    sothree:panelHeight="68dp"
    <!-- Если нужно, можно задать тень -->
    sothree:shadowHeight="4dp">
     
    <!-- Первый дочений элемент - основной контент шаблона.
    Может быть чем угодно, но должен быть match_parent и в ширину и в высоту. -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Основной контент"
        android:textSize="16sp" />

    <!-- Шаблон всплывающей панели.
    Тоже может быть чем угодно. Высота не может быть wrap_content, т.е. либо match_parent, либо фиксированное число. -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|top"
        android:text="Наша всплывающая панель"
        android:textSize="16sp" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

Параметры задаются у элемента SlidingUpPanelLayout:

• Можно задать параметр dragView, в котором указать id элемента внутри панели за который панель будет таскаться. Иначе можно будет тянуть за всю панель.
• Параметр paralaxOffset задает смещение для создания эффекта параллакса.
• Чтобы сделать панель полу-прозрачной нужно, помимо фона, задать атрибут overlay в true.
• Цвет перекрытия фона при разворачивании панели задается параметром fadeColor.
• Помимо этого можно найти еще кучу всего интересного в описании репозитория.

Использование фрагментов в качестве основного контента

Нельзя просто взять и поставить фрагмент в основной контент. Например, этот фокус не прокатит с GoogleMaps (как в моем случае). Чтобы использовать фрагмент в качестве основного контента нужно обернуть его в RelativeLayout с пустым View в конце. Например у меня получилось так:

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    android:id="@+id/sliding_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="top"
    sothree:dragView="@+id/search_panel_dragger"
    sothree:panelHeight="20dp"
    sothree:shadowHeight="0dp"
    tools:context=".MapActivity">

    <RelativeLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <!-- Transparent View -->
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="285dp"
        android:orientation="vertical"
        android:background="@drawable/select_panel_popup_background">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            ........
        </LinearLayout>

        <RelativeLayout
            android:id="@+id/search_panel_dragger"
            android:layout_width="match_parent"
            android:layout_height="25dp"
            android:background="#bbeeeeee">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@android:drawable/radiobutton_off_background"/>
        </RelativeLayout>
    </LinearLayout>

</com.sothree.slidinguppanel.SlidingUpPanelLayout>