Android Как реализовать нижний лист из документации по материальному дизайну

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

Новое обновление на Google Диске показывает это с помощью кнопки плавающего действия →

enter image description here

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

Спасибо

Ответ 1

Отвечая на мой собственный вопрос, разработчики знают, что новая библиотека поддержки предоставляет это наконец! Все приветствуют всех мощных 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  
  }  
});

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

Ответ 2

Изменить

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


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

В случае приложения "Драйв" вот как выглядит код с этой библиотекой:

    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

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

Ответ 3

Теперь вы можете использовать официальный 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, чтобы понять его.

Ответ 4

После сообщения в блоге: 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, поэтому, если вы его не установили, вы не сможете увидеть свое представление.

Ответ 5

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

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

Ответ 6

Вот некоторые из других опций:

  • Существует один доступный Flipboard, однако активность вложения должен быть изменен для работы нижней части стола.
  • tutti-ch bottomsheet: это было извлечено из Android Repo ResolverActivity, и действие запуска не нужно изменять.