Android Як реалізувати нижній аркуш із документації Material Design


79

Як реалізувати характеристики нижнього аркуша? http://www.google.com/design/spec/components/bottom-sheets.html

Нове оновлення Google Drive показує це за допомогою плаваючої кнопки дії ->

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

Звичайно, технічні характеристики ніколи не говорять про закруглені кути, незалежно від того, що це можливо зробити, просто не впевнені, як це робити. В даний час використовується бібліотека 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
це чудово, дякую за обмін! Що робити, якщо ви хочете відобразити всі параметри, які відображатимуться у намірі спільного доступу? Вони будуть динамічно генеруватися на основі додатків, встановлених на пристрої. Будь-які думки про те, як цього можна досягти?
Кіт

1
@Cat Ну в основному вам просто потрібно отримати Список усіх програм, які можуть впоратися з наміром (див., Наприклад, це запитання щодо StackO ) і додати їх до адаптера, який "подає" BottomSheet. Ви також можете побачити офіційний зразок lib, який робить саме те, що ви вимагаєте. ( Клацніть - Рядок 153 - 179 ).
Reverse

це спрацювало, дякую @reVerse! У підсумку я повторно використав код у getShareActionsметоді, щоб отримати всі можливі варіанти спільного використання. До речі, також корисно зателефонувати .limit(R.integer.num_share_actions)будівельнику, якщо ви не хочете, щоб аркуш охоплював весь екран
Cat

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

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

де пункти меню ?????????????????? (вся суть меню нижнього аркуша)
еккашкінг

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, щоб отримати розуміння щодо нього.


Привіт Vipul, дякую за посилання. У мене є одне питання. Чи можна встановити опорну точку для нижнього аркуша?
koraxis 03.03.16

Чудове посилання на 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.