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


79

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

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

введите описание изображения здесь

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

благодаря


Ссылка не работает. Новая ссылка material.io/design/components/sheets-bottom.html#usage
Ray Li

Ответы:


66

редактировать

Теперь 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>

Результат выглядит так:

изображение нижнего листа

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


Бум. Это именно то, что я ищу! Я попробую сегодня вечером!
Джон Шелли

1
это здорово, спасибо, что поделились! Что, если вы хотите отобразить все параметры, которые будут отображаться в намерении общего доступа? Они будут динамически генерироваться на основе приложений, установленных на устройстве. Есть мысли о том, как это можно сделать?
Cat

1
@Cat Ну, по сути, вам просто нужно получить список всех приложений, которые могут обрабатывать намерение (см., Например, этот StackO-вопрос ), и добавить их в адаптер, который «подает» BottomSheet. Вы также можете увидеть официальный образец библиотеки, которая делает именно то, что вы запрашиваете. ( Щелкните - Строка 153 - 179 ).
reVerse

это сработало, спасибо @reVerse! В итоге я повторно использовал код в getShareActionsметоде, чтобы получить все возможные варианты обмена. Кстати, также полезно обратиться .limit(R.integer.num_share_actions)к строителю, если вы не хотите, чтобы лист покрыл весь экран
Cat

1
@JohnShelley Все в порядке, абсолютно. Я также рекомендую использовать «официальное решение», хотя в настоящее время оно действительно ограничено, но, по крайней мере, Google, наконец, заложил фундамент. ;)
назад

65

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


Спасибо за публикацию. Думаю, теперь это должен быть «правильный» ответ :)
Vine'th

@androiddeveloper готово. учитывая, что сейчас это особая служба поддержки, я думаю, что пользователям больше повезет в поисках этих примеров. Когда я задал вопрос изначально, его не было в библиотеке поддержки. Если бы вопрос был «Как реализовать представление нижнего листа библиотеки поддержки», я бы тоже дал более подробный ответ :)
Джон Шелли,

@JohnShelley Тебе тоже не нужно использовать XML? Можно ли настроить просмотр / свертывание нижнего листа (или как там он называется, когда он находится внизу), чтобы иметь представление обертывания содержимого, а при его расширении - в полноэкранном режиме?
разработчик Android

4
Я думаю, что многие люди задаются вопросом, как использовать новый API поддержки Google, и у Vipul Shah есть отличная ссылка на YouTube, которая может помочь вам понять, как ее использовать, пожалуйста, обратитесь к ссылке YouTube в stackoverflow.com/a/35731959/1053037
minh Truong

остается вопрос: как реализовать меню нижнего листа. Где пункты меню в примере выше ??????? Вы знаете, пункты меню, которые вы нажимаете ...
ekashking

8

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


Да, xml - это именно то, как выглядел мой фрагмент. У тебя это не работает?
mcorrado

Высота
Зордид

1
Если вы будете использовать AndroidX, помните об изменении имени пакета:com.google.android.material.bottomsheet.BottomSheetBehavior
Ultimo_m

где пункты меню ?????????????????? (весь смысл меню нижнего листа)
ekashking

7

Теперь вы можете использовать официальный BottomSheetBehaviorAPI из библиотеки поддержки 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");

Пожалуйста, обратитесь к руководству YouTube по Android BottomSheet, чтобы понять его.


Привет, Випул, спасибо за ссылку. Но у меня есть один вопрос. Можно ли установить точку привязки для нижнего листа?
koraxis 03

Отличная ссылка на YouTube. Есть ли у вас где-нибудь исходный код в публичном репо?
Джон Шелли

великий, ты спас мне день, я думаю, это должен быть принятый ответ
Фейсал Ахмед

5

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

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


5

Вот еще несколько вариантов:

  • Один из них доступен на Flipboard , однако для работы нижнего листа необходимо изменить действие по внедрению.
  • Нижний лист tutti-ch : он был извлечен из ResolverActivity Android Repo, и активность запуска изменять не нужно.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.