Android как реализовать нижний лист из документов Material Design


Как вы реализуете спецификацию нижнего листа? http://www.google.com/design/spec/components/bottom-sheets.html

новое обновление для Google Диска показывает это с плавающей Кнопкой действия нажмите ->

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

спасибо

7 73

7 ответов:

Edit

The BottomSheet является частью android-support-library. Смотрите ответ Джона Шелли.


к сожалению, в настоящее время нет" официального " способа сделать это (по крайней мере, я не знаю).
К счастью, есть библиотека под названием "BottomSheet" (клик), который имитирует внешний вид BottomSheet и поддерживает Android 2.1 и выше.

в случае приложения Drive, вот как код будет выглядеть, как с этим библиотека:

    new BottomSheet.Builder(this, R.style.BottomSheet_Dialog)
            .title("New")
            .grid() // <-- important part
            .sheet(R.menu.menu_bottom_sheet)
            .listener(new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            // TODO
        }
    }).show();

menu_bottom_sheet (в основном стандартный/res / menu/*.xml-ресурс)

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/folder"
        android:title="Folder"
        android:icon="@drawable/ic_action_folder" />
    <item
        android:id="@+id/upload"
        android:title="Upload"
        android:icon="@drawable/ic_action_file_upload" />
    <item
        android:id="@+id/scan"
        android:title="Scan"
        android:icon="@drawable/ic_action_camera_alt" />
</menu>

вывод выглядит так:

picture of the bottom sheet

что, я думаю, довольно близко к оригиналу. Если вы не довольны цветами, вы можете настроить его -посмотреть этот (клик).

отвечая на мой собственный вопрос, чтобы разработчики знали, что новая библиотека поддержки предоставляет это, наконец! Да здравствует всемогущий Google!

пример блог разработчика Android:

// The View with the BottomSheetBehavior
View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);  
BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);  
behavior.setBottomSheetCallback(new BottomSheetCallback() {  
   @Override  
   public void onStateChanged(@NonNull View bottomSheet, int newState) {  
     // React to state change  
   }  

  @Override  
  public void onSlide(@NonNull View bottomSheet, float slideOffset) {  
     // React to dragging events  
  }  
});

@реверсе -ответ выше по-прежнему является допустимым вариантом, но его приятно знать, что есть стандарт, который поддерживает Google тоже.

теперь вы можете использовать Official BottomSheetBehavior API из библиотеки поддержки android 23.2.

Ниже приведен пример фрагмента кода

bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottomSheet));

case R.id.expandBottomSheetButton:
 bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
 break;
case R.id.collapseBottomSheetButton:
 bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
 break;
case R.id.hideBottomSheetButton:
 bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
 break;
case R.id.showBottomSheetDialogButton:
 new MyBottomSheetDialogFragment().show(getSupportFragmentManager(), "sample");

пожалуйста, обратитесь к Android BottomSheet youtube tutorial чтобы получить понимание о нем.

после сообщения в блоге: http://android-developers.blogspot.com/2016/02/android-support-library-232.html

мой xml в конечном итоге выглядит так:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/coordinator_layout"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
        <ImageView
            android:src="@android:drawable/ic_input_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

и в моем onCreateView моего фрагмента:

    coordinatorLayout = (CoordinatorLayout)v.findViewById(R.id.coordinator_layout);
    View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
    BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
    behavior.setPeekHeight(100);
    behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            // React to state change
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            // React to dragging events
        }
    });

значение по умолчанию setPeekHeight равно 0, поэтому, если вы не установите его, вы не сможете увидеть свое представление.

Я бы пошел с прямыми углами, как это в руководящих принципах. Что касается реализации-возможно, лучше всего использовать идею из этого проекта:https://github.com/umano/AndroidSlidingUpPanel

Я думаю, что вы можете использовать его как есть или взять идею для реализации. Еще одну замечательную статью о том, как реализовать подобную раздвижную панель можно найти здесь: http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/

вот некоторые из других вариантов:

  • есть один доступный от Flipboard, однако встраивание деятельности необходимо изменить для работы нижнего листа.
  • Тутти-ч-х bottomsheet: Это было извлечено из ResolverActivity Android РЕПО и запуск активности не должны быть изменены.

недавно Google выпустила Библиотека Поддержки Android 23.2, который официально приносит нижние листы в библиотеку поддержки дизайна Android.