wake-up-neo.net

Android So implementieren Sie das Bottom Sheet aus den Material Design-Dokumenten

Wie implementieren Sie die Spezifikation des unteren Blattes? http://www.google.com/design/spec/components/bottom-sheets.html

Das neue Update für Google Drive zeigt dies durch Drücken der Floating-Aktionstaste ->

enter image description here

Zugegeben, die Angaben sagen niemals etwas über abgerundete Ecken aus, egal, wie es möglich ist, nur unsicher, wie sie vorgehen sollen. Derzeit werden die AppCompat-Bibliothek und das Ziel auf 21 gesetzt.

Vielen Dank

androidandroid-5.0-lollipopmaterial-designfloating-action-button
74
John Shelley

Antworten auf meine eigene Frage, damit Entwickler wissen, dass die neue Support-Bibliothek dies endlich bietet! Alle begrüßen das mächtige Google!

Ein Beispiel aus dem Android Developer's Blog :

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

@ reVerses answer oben ist immer noch eine gültige Option, aber es ist schön zu wissen, dass es einen Standard gibt, den auch Google unterstützt.

61
John Shelley

Bearbeiten

Die BottomSheet ist jetzt Teil des Android-support-library. Siehe John Shelleys 'Antwort .

Leider gibt es derzeit keine "offizielle" Möglichkeit, dies zu tun (zumindest keine, die mir bekannt ist).
Glücklicherweise gibt es eine Bibliothek namens "BottomSheet" (click) , die das Aussehen und Verhalten der BottomSheet nachahmt und Android 2.1 und höher unterstützt.

Im Falle der Drive-App würde der Code mit dieser Bibliothek folgendermaßen aussehen:

    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 (grundsätzlich eine Standardressource /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>

Die Ausgabe sieht folgendermaßen aus:

picture of the bottom sheet

Ich glaube, das kommt dem Original ziemlich nahe. Wenn Sie mit den Farben nicht zufrieden sind, können Sie sie anpassen - sehen Sie dies (klicken) .

63
reVerse

Nach dem Blogeintrag: http://Android-developers.blogspot.com/2016/02/Android-support-library-232.html

Meine XML sah am Ende so aus: 

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

Und in meiner onCreateView meines Fragments:

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

Der Standardwert für setPeekHeight ist 0. Wenn Sie dies nicht festlegen, können Sie Ihre Ansicht nicht sehen.

7
mcorrado

Sie können nun die offizielle BottomSheetBehavior-API aus der Android-Support-Bibliothek 23.2 verwenden.

Nachfolgend finden Sie ein Beispielcode-Snippet 

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

Weitere Informationen finden Sie unter Android BottomSheet-Youtube-Tutorial .

7
Vipul Shah

Hier sind einige der anderen Optionen:

  • Es gibt eine von Flipboard , allerdings muss die Einbindungsaktivität Geändert werden, damit das Bottom Sheet funktioniert. 
  • tutti-ch's bottomsheet : Dies wurde aus ResolverActivity von Android Repo extrahiert, und die Startaktivität muss nicht geändert werden.
5
vine'th

Ich würde mit geraden Ecken gehen, wie es in den Richtlinien ist. In Bezug auf die Implementierung - vielleicht ist es am besten, die Idee aus diesem Projekt zu verwenden: https://github.com/umano/AndroidSlidingUpPanel

Ich denke, Sie könnten es so verwenden, wie es ist, oder die Idee für die Implementierung übernehmen .. Ein weiterer großartiger Artikel zur Implementierung ähnlicher Schiebefelder finden Sie hier: http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-freund/

5
Zh. Atanasov

Kürzlich veröffentlichte Google Android Support Library 23.2 , die offiziell Bottom Sheets zur Android Design Support Library bringt.

0
Mehlyfication