Android Jak zaimplementować arkusz dolny z dokumentacji Material Design

79

Jak wdraża się specyfikację dolnego arkusza? http://www.google.com/design/spec/components/bottom-sheets.html

Nowa aktualizacja Dysku Google pokazuje to po naciśnięciu pływającego przycisku akcji ->

wprowadź opis obrazu tutaj

Przyznane specyfikacje nigdy nie mówią nic o zaokrąglonych rogach, niezależnie od tego, co jest możliwe, po prostu nie jestem pewien, jak się do tego zabrać. Obecnie używasz biblioteki AppCompat i zestawu docelowego na 21.

Dzięki

John Shelley
źródło
Link jest uszkodzony. Nowy link material.io/design/components/sheets-bottom.html#usage
Ray Li

Odpowiedzi:

66

Edytować

BottomSheetJest teraz częścią android-support-library. Zobacz odpowiedź Johna Shelleysa .


Niestety obecnie nie ma „oficjalnego” sposobu, jak to zrobić (a przynajmniej takiego, o którym wiem).
Na szczęście istnieje biblioteka o nazwie „BottomSheet” (kliknij), która naśladuje wygląd i działanie BottomSheetoraz obsługuje system Android 2.1 i nowsze .

W przypadku aplikacji Drive tak wyglądałby kod z tą biblioteką:

    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 (w zasadzie standardowy zasób /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>

Wynik wygląda następująco:

zdjęcie dolnego arkusza

Co, jak sądzę, jest bardzo zbliżone do oryginału. Jeśli nie jesteś zadowolony z kolorów, możesz go dostosować - zobacz to (kliknij) .

odwrócić
źródło
Bum. Właśnie tego szukam! Spróbuję dziś wieczorem!
John Shelley
1
to świetnie, dzięki za udostępnienie! A co jeśli chcesz wyświetlić wszystkie opcje, które pojawiłyby się w zamianie udziału? Będą generowane dynamicznie na podstawie aplikacji zainstalowanych na urządzeniu. Jakieś przemyślenia, jak można to osiągnąć?
Cat,
1
@Cat Cóż, po prostu musisz pobrać listę wszystkich aplikacji, które mogą obsłużyć ten cel (zobacz na przykład to pytanie StackO ) i dodać je do adaptera, który „zasila” arkusz dolny. Możesz również zobaczyć oficjalną próbkę biblioteki, która robi dokładnie to, o co prosisz. ( Kliknij - Linia 153-179 ).
Odwróć
zadziałało, dzięki @reVerse! Skończyło się na tym, że ponownie wykorzystałem kod w getShareActionsmetodzie, aby uzyskać wszystkie możliwe opcje udostępniania. Przy okazji, przydatne jest również wezwanie .limit(R.integer.num_share_actions)konstruktora, chyba że chcesz, aby arkusz pokrywał cały ekran
Cat
1
@JohnShelley Absolutnie w porządku. Poleciłbym również wybrać „oficjalne rozwiązanie”, choć w tej chwili jest ono naprawdę ograniczone, ale przynajmniej Google w końcu położył podwaliny. ;)
reVerse
65

Odpowiadając na moje własne pytanie, aby programiści wiedzieli, że nowa biblioteka wsparcia wreszcie to zapewnia! Witajcie wszechmocnego Google!

Przykład z bloga programisty Androida :

// 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  
  }  
});

Odpowiedź @ reVerse powyżej jest nadal poprawną opcją, ale miło jest wiedzieć, że istnieje standard, który obsługuje również Google.

John Shelley
źródło
Dzięki za wysłanie wiadomości. Myślę, że to powinna być teraz "poprawna" odpowiedź :)
vin'th,
@androiddeveloper gotowe. biorąc pod uwagę, że jest to teraz specyficzne dla wsparcia, czuję, że użytkownicy będą mieli więcej szczęścia, szukając tych przykładów. Kiedy zadałem to pytanie, nie było go w bibliotece pomocy technicznej. Gdyby pytanie brzmiało „Jak wdrożyć widok dolnego arkusza Support Library”, udzieliłbym również bardziej szczegółowej odpowiedzi :)
John Shelley
@JohnShelley Nie musisz też używać XML? Czy możliwe jest ustawienie wglądu / zwinięcia dolnego arkusza (lub jak to się nazywa, gdy znajduje się na dole), aby miał widok zawijanej zawartości, a po rozwinięciu na pełny ekran?
programista Androida
4
Myślę, że wiele osób zastanawia się, jak korzystać z nowego interfejsu API wsparcia Google, a Vipul Shah ma świetny link do YouTube, który może pomóc Ci zrozumieć, jak go używać, zapoznaj się z linkiem YouTube na stackoverflow.com/a/35731959/1053037
minh truong
pozostaje pytanie: jak wdrożyć menu dolnego arkusza. Gdzie znajdują się pozycje menu w powyższym przykładzie ??????? Wiesz, pozycje menu, które klikasz ...
ekashking
8

Po wpisie na blogu: http://android-developers.blogspot.com/2016/02/android-support-library-232.html

Mój plik XML wyglądał tak:

<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>

I w moim onCreateView mojego fragmentu:

    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
        }
    });

Wartość domyślna setPeekHeight to 0, więc jeśli jej nie ustawisz, nie będziesz w stanie zobaczyć swojego widoku.

mcorrado
źródło
Tak, plik XML jest dokładnie taki, jak wyglądał mój fragment. Czy to nie działa dla Ciebie?
mcorrado
Domyślna wysokość
podglądu
1
Jeśli będziesz używać AndroidX, pamiętaj o zmianie nazwy pakietu:com.google.android.material.bottomsheet.BottomSheetBehavior
Ultimo_m
gdzie są pozycje menu ????????????????? (cały punkt menu dolnego arkusza)
ekashking
7

Możesz teraz używać oficjalnego BottomSheetBehaviorinterfejsu API z biblioteki wsparcia Androida 23.2.

Poniżej znajduje się przykładowy fragment kodu

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");

Zapoznaj się z samouczkiem Android BottomSheet na youtube, aby uzyskać zrozumienie.

Vipul
źródło
Cześć Vipul, dzięki za link. Mam jednak jedno pytanie. Czy można ustawić punkt zakotwiczenia dla dolnego arkusza?
koraxis
Niesamowity link do youtube. Czy masz gdzieś kod źródłowy w publicznym repozytorium?
John Shelley,
świetny, uratowałeś mi dzień, myślę, że ta odpowiedź powinna zostać zaakceptowana
FaisalAhmed
5

Oto kilka innych opcji:

  • Jest dostępny w Flipboard , jednak czynność osadzania musi zostać zmodyfikowana, aby arkusz dolny działał.
  • Arkusz dolny tutti-ch : został wyodrębniony z ResolverActivity systemu Android Repo i nie trzeba modyfikować działania uruchamiającego.
winorośl
źródło