web-dev-qa-db-ja.com

Android Material Designのドキュメントからボトムシートを実装する方法

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

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

enter image description here

仕様では、角の丸みについては何も言わないが、それができるかどうかに関係なく、どうすればいいかわからない。現在21に設定されたAppCompatライブラリとターゲットを使用しています。

ありがとう

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

開発者が新しいサポートライブラリが最終的にこれを提供することを開発者に知らせるために、私自身の質問に答えます！すべてが強力なGoogleを称賛します！

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

@reVerseの 上記の回答 は依然として有効なオプションですが、Googleがサポートしている標準もあることを知ってうれしいです。

62
John Shelley

編集

BottomSheetはAndroid-support-libraryの一部になりました。 John Shelleys 'answer を参照してください。

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

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

    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>

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

picture of the bottom sheet

これは、オリジナルにかなり近いと思います。色に満足できない場合は、カスタマイズできます- こちら（クリック）を参照 。

63
reVerse

ブログの投稿に続く： 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であるため、設定しないと、ビューを表示できません。

7
mcorrado

Androidサポートライブラリ23.2の公式BottomSheetBehavior AP​​Iを使用できるようになりました。

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

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 tutorial を参照して、理解してください。

7
Vipul Shah

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

  • Flipboard から利用できるものがありますが、ボトムシートが機能するには埋め込みアクティビティを変更する必要があります。
  • tutti-chの bottomsheet ：これはAndroid RepoのResolverActivityから抽出されており、起動アクティビティを変更する必要はありません。
5
vine'th

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

そのまま使用するか、実装のアイデアを取ることができると思います。同様のスライディングパネルの実装方法に関する別の優れた記事は、ここにあります。 http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/

5
Zh. Atanasov

Googleは最近リリースしました Android Support Library 23.2 これは公式に ボトムシート をAndroid Design Support Libraryにもたらします。

0
Mehlyfication