80

ボトムシートの仕様をどのように実装しますか? http://www.google.com/design/spec/components/bottom-sheets.html

Google ドライブの新しいアップデートでは、フローティング アクション ボタンを押すとこれが表示されます ->

ここに画像の説明を入力

確かに、丸みを帯びた角について仕様が何も言っていないことは確かです。現在 AppCompat ライブラリを使用しており、ターゲットは 21 に設定されています。

ありがとう

4

9 に答える 9

66

編集

はのBottomSheet一部になりましたandroid-support-libraryJohn Shelleys の回答を参照してください。


残念ながら、これを行うための「公式」の方法は現在のところありません (少なくとも私が知っている方法はありません)。
幸いなことに、のルック アンド フィールを模倣し、Android 2.1 以降をサポートする「BottomSheet」(クリック)というライブラリがあります。BottomSheet

ドライブ アプリの場合、このライブラリのコードは次のようになります。

    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>

出力は次のようになります。

下のシートの写真

これは、オリジナルにかなり近づいていると思います。色に満足できない場合は、カスタマイズできます -こちら (クリック) を参照してください

于 2014-11-03T21:37:08.520 に答える
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 であるため、設定しないとビューを表示できません。

于 2016-03-24T00:14:37.307 に答える
7

Android サポート ライブラリ 23.2 から公式BottomSheetBehaviorAPI を使用できるようになりました。

以下はサンプルコードスニペットです

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

理解するには、 Android BottomSheet youtube チュートリアルを参照してください。

于 2016-03-01T19:40:27.017 に答える
5

ガイドラインにあるように、まっすぐなコーナーで行きます。実装に関しては、このプロジェクトのアイデアを使用するのが最善かもしれません: https://github.com/umano/AndroidSlidingUpPanel

そのまま使ってもいいし、アイデアを取り入れて実装してもいいと思います。同様のスライド パネルの実装方法に関する別の優れた記事は、http: //blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/にあります。

于 2014-11-03T20:35:45.820 に答える
5

その他のオプションの一部を次に示します。

  • Flipboardから入手できるものがありますが、ボトムシートが機能するように埋め込みアクティビティを変更する必要があります。
  • tutti-ch のボトムシート: これは Android Repo の ResolverActivity から抽出されたものであり、起動アクティビティを変更する必要はありません。
于 2015-09-04T12:44:57.833 に答える
0

Google は最近、 Bottom シートを Android Design Support Library に正式に導入するAndroid Support Library 23.2をリリースしました。

于 2016-02-25T13:20:59.840 に答える