it-swarm.com.ru

Android Как реализовать Bottom Sheet из материалов Material Design

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

Новое обновление для Google Drive показывает это с помощью кнопки «Плавающее действие» ->

enter image description here

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

Спасибо

74
John Shelley

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

61
John Shelley

Правка

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

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

63
reVerse

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

7
mcorrado

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

7
Vipul Shah

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

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

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

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

5
Zh. Atanasov

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

0
Mehlyfication