修改

Question

如何实施底页规格？ http://www.google.com/design/spec/components/bottom-sheets.html

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

enter image description here

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

由于

Answer 1

修改

BottomSheet现在是android-support-library的一部分。请参阅John Shelleys' answer。

不幸的是，目前没有关于如何做到这一点的“官方”方式（至少没有我知道的）。
幸运的是，有一个名为"BottomSheet" (click)的库，它模仿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

我认为，这与原版非常接近。如果您对颜色不满意，可以自定义颜色 - see this (click)。

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 above仍然是一个有效的选项，但很高兴知道Google也支持这一标准。

Answer 3

您现在可以使用Android支持库23.2中的官方BottomSheetBehavior 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 tutorial以了解相关信息。

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＆＃39; bottomsheet：这是从Android Repo的ResolverActivity中提取的，无需修改启动活动。

Answer 7

如果你想实现这样的底片，请遵循这个设计模式几个简单的步骤

创建 bottom_sheet_layout.xml 布局文件
创建 bottom_sheet_background.xml 个可绘制文件

像这样设置您的 bottom_sheet_background.xml 可绘制文件

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <solid android:color="@color/bottom_sheet_background"/>
        <corners
            android:topRightRadius="20dp"
            android:topLeftRadius="20dp"/>
    
    </shape>

你的bottom_sheet_layout.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        android:id="@+id/bottom_Sheet"
        android:background="@drawable/bottom_sheet_background"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="24dp"
        android:paddingEnd="24dp"
        android:paddingTop="16dp"
        android:paddingBottom="42dp"
        android:orientation="vertical"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
        <ImageView
            android:id="@+id/rectangle_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:background="@drawable/rectangle_39"
            />
    
    
        //add your design code here
    
    </LinearLayout>

还有你的 activity_main.xml 或片段

    <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    
    
       //design your code here
    
    
        //this is your bottom sheet layout included here
        <include
            android:id="@+id/bottom_sheet_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="com.google.android.material.
            bottomsheet.BottomSheetBehavior"
            layout="@layout/bottom_sheet_layout"/>
    
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

最后，在您的 MainActivity 或 Fragment 类中添加代码。在这里，我在您的 onCreate 或 onCreateView

中添加 Kotlin 代码

BottomSheetBehavior.from(binding.bottomSheetLayout.bottomSheet).apply {
    //peek height is default visible height
    peekHeight = 200
    this.state = BottomSheetBehavior.STATE_COLLAPSED
}

就是这样！

Answer 8

Google最近发布了Android Support Library 23.2，正式将Bottom sheets带到Android设计支持库。

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

8 个答案:

修改