Android如何从Material Design文档实现底部工作表

Question

你如何实现底部表格规定？ http://www.google.com/design/spec/components/bottom-sheets.html

Google云端硬盘的新更新通过按下浮动操作按钮显示了这一点 - >

当然,规格从来没有说过任何关于圆角的内容,无论是否可行,只是不确定如何去做.目前使用AppCompat库并将目标设置为21.

谢谢

Answer 1

编辑

这BottomSheet是现在的一部分android-support-library.请参阅John Shelleys的回答.

不幸的是,目前还没有关于如何做到这一点的"官方"方式(至少没有我知道的).
幸运的是,有一个名为"BottomSheet"(点击)的库,模仿了它的外观和感觉,BottomSheet并支持Android 2.1及更高版本.

对于Drive应用程序,以下是此库的代码示例:

    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>

输出如下:

我认为,这与原版非常接近.如果您对颜色不满意,可以自定义它 - 请参阅此(单击).

Answer 2

回答我自己的问题让开发人员知道新的支持库终于提供了这个!所有强大的谷歌都欢呼!

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 上面的答案仍然是一个有效的选择,但很高兴知道谷歌也支持一个标准.

Answer 3

您现在可以使用BottomSheetBehaviorAndroid支持库23.2中的官方API.

以下是示例代码段

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教程以了解它.

Answer 4

关注博客文章: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,因此如果您不设置它,您将无法看到您的视图.

Answer 5

我会按照指南中的直角进行操作.至于实现 - 也许最好使用这个项目的想法:https://github.com/umano/AndroidSlidingUpPanel

我认为您可以按原样使用它,或者采取实施的想法.关于如何实现类似滑动面板的另一篇很棒的文章可以在这里找到:http: //blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/

Answer 6

以下是一些其他选项:

• Flipboard提供了一个,但需要修改嵌入活动才能使底片工作.
• tutti-ch的底片:这是从Android Repo的ResolverActivity中提取的,无需修改启动活动.