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

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

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:

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

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.

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.

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.

Poszedłbym z prostymi narożnikami, tak jak jest to w wytycznych. Co do realizacji - może najlepiej skorzystać z pomysłu z tego projektu: https://github.com/umano/AndroidSlidingUpPanel

Myślę, że można by było to wykorzystać tak jak jest lub wziąć pomysł na realizację. Kolejny świetny artykuł o tym, jak wdrożyć podobny panel przesuwny, można znaleźć tutaj: http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/

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.

Niedawno firma Google wydała bibliotekę obsługi Androida 23.2, która oficjalnie wprowadza dolne arkusze do biblioteki wsparcia projektowania Androida.