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
Odpowiedzi:
Edytować
BottomSheet
Jest 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
BottomSheet
oraz 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) .
źródło
getShareActions
metodzie, 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 ekranOdpowiadają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 :
Odpowiedź @ reVerse powyżej jest nadal poprawną opcją, ale miło jest wiedzieć, że istnieje standard, który obsługuje również Google.
źródło
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.
źródło
com.google.android.material.bottomsheet.BottomSheetBehavior
Możesz teraz używać oficjalnego
BottomSheetBehavior
interfejsu 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.
źródło
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/
źródło
Oto kilka innych opcji:
źródło
Niedawno firma Google wydała bibliotekę obsługi Androida 23.2, która oficjalnie wprowadza dolne arkusze do biblioteki wsparcia projektowania Androida.
źródło