Android如何从Material Design docs实现底表


79

您如何实现底层规格? http://www.google.com/design/spec/components/bottom-sheets.html

Google云端硬盘的新更新通过按浮动操作按钮->

在此处输入图片说明

理所当然的规格永远不会说圆角,无论是否有可能,只是不确定如何去做。当前使用AppCompat库,目标设置为21。

谢谢


Answers:


66

编辑

现在BottomSheet是的一部分android-support-library。请参阅约翰·雪莱的回答


不幸的是,目前还没有“官方”方式来做到这一点(至少我没有意识到)。
幸运的是,有一个名为“ 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>

输出看起来像这样:

底部图片

我认为这与原始版本非常接近。如果您对颜色不满意,可以自定义颜色-参见(单击)


繁荣。这正是我要的!今晚我会尝试一下!
John Shelley 2014年

1
太好了,谢谢分享!如果要显示所有显示在共享意图中的选项怎么办?它们将根据设备上安装的应用程序动态生成。关于如何实现的任何想法?
2015年

1
@Cat基本上,您只需要获取可以处理此意图的所有应用程序的列表(例如,请参见此StackO-Question),并将它们添加到“馈送” BottomSheet的适配器中。您还可以看到lib的官方示例,该示例完全满足您的要求。(单击-第153-179行)。
reVerse

起作用了,谢谢@reVerse!我最终重用了该getShareActions方法中的代码以获取所有可能的共享选项。顺便说一句,也可以用于调用.limit(R.integer.num_share_actions)生成器,除非您希望工作表覆盖整个屏幕
2015年

1
@JohnShelley绝对可以。我也建议您使用“官方解决方案”,尽管目前它确实很有限,但至少Google最终奠定了基础。;)
reVerse

65

回答我自己的问题,以便开发人员知道新的支持库终于可以提供此功能!所有人欢呼所有功能强大的Google!

Android开发者博客中的示例:

// 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也支持一个标准。


感谢您的发布。我认为这应该是现在的“正确”答案:)
vine'th

@androiddeveloper完成了。考虑到它现在是特定于支持的事情,我认为用户在寻找这些示例时会更好。当我最初问这个问题时,它没有在支持库中提供。如果问题是“如何实现支持库底部工作表视图”,那么我也将提供更深入的答案:)
John Shelley

@JohnShelley您是否也不需要使用一些XML东西?是否可以将底页窥视/折叠(或在底端折叠时所称的名称)设置为具有包装内容视图,并在展开时设置为全屏显示?
Android开发者

4
我想有很多人想知道如何使用Google新的支持API,Vipul Shah的YouTube链接很好,可以帮助您了解如何使用它,请参阅stackoverflow.com/a/35731959/1053037中
minh truong 2016-3-25

问题仍然存在:如何实现底部工作表菜单。上例中的菜单项在哪里?您知道,您单击的菜单项...
ekashking '20

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,因此,如果未设置,则将无法查看视图。


是的,xml正是我的片段的外观。它对您不起作用吗?
mcorrado

默认的窥视高度是-1(AUTO!),而不是
0。– Zordid

1
如果要使用AndroidX,请记住软件包名称更改:com.google.android.material.bottomsheet.BottomSheetBehavior
Ultimo_m

菜单项在哪里?????????????????? (最底层菜单的整个要点)
ekashking '20

7

您现在可以BottomSheetBehavior从android支持库23.2使用Official 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教程,以获取有关它的理解。


您好Vipul,感谢您的链接。我有一个问题。是否可以为底页设置锚点?
koraxis

真棒的YouTube链接。您是否在某个地方的公共仓库中拥有源代码?
John Shelley

太棒了,您保存了我的一天,我认为应该接受这一答案
FaisalAhmed


5

以下是一些其他选项:

  • Flipboard提供了一种可用的工具,但是需要修改嵌入活动才能使底页工作。
  • tutti-ch的底部表单:此内容是从Android Repo的ResolverActivity中提取的,不需要修改启动活动。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.