android中控件底部显示,BottomSheet是一个Android组件实现从屏幕底部显示一个 dismissible 视图...

- 日理万妓 2022-10-18 04:56 30阅读 0赞

BottomSheet

![68747470733a2f2f7472617669732d63692e6f72672f466c6970626f6172642f626f74746f6d73686565742e737667][]![68747470733a2f2f6261646765732e6769747465722e696d2f4a6f696e253230436861742e737667][]

BottomSheet is an Android component which presents a dismissible view from the bottom of the screen. BottomSheet can be a useful replacement for dialogs and menus but can hold any view so the use cases are endless. This repository includes the BottomSheet component itself but also includes a set of common view components presented in a bottom sheet. These are located in the commons module.

BottomSheet has been used in production at Flipboard for a while now so it is thoroughly tested. Here is a GIF of it in action inside of Flipboard!

![6befea4ee671b6cbf09fc649508731c4.gif][]

Installation

If all you want is the BottomSheet component and don't need things from commons you can skip that dependency.

repositories \{

jcenter()

\}

dependencies \{

compile 'com.flipboard:bottomsheet-core:1.5.3'

compile 'com.flipboard:bottomsheet-commons:1.5.3' // optional

\}

Getting Started

Get started by wrapping your layout in a BottomSheetLayout. So if you currently have this:

android:id="@+id/root"

android:orientation="vertical"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent">

android:id="@+id/view1"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"/>

You would have to update it to look like this:

android:id="@+id/bottomsheet"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent">

android:id="@+id/root"

android:orientation="vertical"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent">

android:id="@+id/view1"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"/>

Back in your activity or fragment you would get a reference to the BottomSheetLayout like any other view.

BottomSheetLayout bottomSheet = (BottomSheetLayout) findViewById(R.id.bottomsheet);

Now all you need to do is show a view in the bottomSheet:

bottomSheet.showWithSheetView(LayoutInflater.from(context).inflate(R.layout.my\_sheet\_layout, bottomSheet, false));

You could also use one of the sheet views from the commons module.

bottomSheet.showWithSheetView(new IntentPickerSheetView(this, shareIntent, "Share with...", new IntentPickerSheetView.OnIntentPickedListener() \{

@Override

public void onIntentPicked(IntentPickerSheetView.ActivityInfo activityInfo) \{

bottomSheet.dismissSheet();

startActivity(activityInfo.getConcreteIntent(shareIntent));

\}

\}));

That's it for the simplest of use cases. Check out the API documentation to find out how to customize BottomSheet to fit your use cases.

For more examples, also see the Recipes wiki.

Common Components

These are located in the optional bottomsheet-commons dependency and implement common use cases for bottom sheet.

Intent Picker

Menu Sheet

ImagePicker Sheet

![0f5ba9c82905b544b57b00b6fcdd97d7.gif][]

![1325144e17f515e178cd5a700989b72c.gif][]

![59f076459705c7228cd8a082024c2345.gif][]

IntentPickerSheetView

This component presents an intent chooser in the form of a BottomSheet view. Give it an intent such as a share intent and let the user choose what activity they want to share the intent with in a BottomSheet.

Example from the sample app.

IntentPickerSheetView intentPickerSheet = new IntentPickerSheetView(MainActivity.this, shareIntent, "Share with...", new IntentPickerSheetView.OnIntentPickedListener() \{

@Override

public void onIntentPicked(IntentPickerSheetView.ActivityInfo activityInfo) \{

bottomSheet.dismissSheet();

startActivity(activityInfo.getConcreteIntent(shareIntent));

\}

\});

// Filter out built in sharing options such as bluetooth and beam.

intentPickerSheet.setFilter(new IntentPickerSheetView.Filter() \{

@Override

public boolean include(IntentPickerSheetView.ActivityInfo info) \{

return !info.componentName.getPackageName().startsWith("com.android");

\}

\});

// Sort activities in reverse order for no good reason

intentPickerSheet.setSortMethod(new Comparator() \{

@Override

public int compare(IntentPickerSheetView.ActivityInfo lhs, IntentPickerSheetView.ActivityInfo rhs) \{

return rhs.label.compareTo(lhs.label);

\}

\});

bottomSheet.showWithSheetView(intentPickerSheet);

MenuSheetView

This component presents a BottomSheet view that's backed by a menu. It behaves similarly to the new NavigationView in the Design support library, and is intended to mimic the examples in the Material Design spec. It supports list and grid states, with the former adding further support for separators and subheaders.

Example from the sample app.

MenuSheetView menuSheetView =

new MenuSheetView(MenuActivity.this, MenuSheetView.MenuType.LIST, "Create...", new MenuSheetView.OnMenuItemClickListener() \{

@Override

public boolean onMenuItemClick(MenuItem item) \{

Toast.makeText(MenuActivity.this, item.getTitle(), Toast.LENGTH\_SHORT).show();

if (bottomSheetLayout.isSheetShowing()) \{

bottomSheetLayout.dismissSheet();

\}

return true;

\}

\});

menuSheetView.inflateMenu(R.menu.create);

bottomSheetLayout.showWithSheetView(menuSheetView);

Contributing

We welcome pull requests for bug fixes, new features, and improvements to BottomSheet. Contributors to the main BottomSheet repository must accept Flipboard's Apache-style Individual Contributor License Agreement (CLA) before any changes can be merged.

[68747470733a2f2f7472617669732d63692e6f72672f466c6970626f6172642f626f74746f6d73686565742e737667]: https://camo.githubusercontent.com/1ce70b52d12c6aae0110732cda6ed366248c16a9/68747470733a2f2f7472617669732d63692e6f72672f466c6970626f6172642f626f74746f6d73686565742e737667
[68747470733a2f2f6261646765732e6769747465722e696d2f4a6f696e253230436861742e737667]: /images/20221014/56c983895053465abdca1c0f4186e974.png
[6befea4ee671b6cbf09fc649508731c4.gif]: /images/20221014/5218204686854744b08551581b374c0d.png
[0f5ba9c82905b544b57b00b6fcdd97d7.gif]: /images/20221014/d9202eef108a4fe381d141a9bee8b2fe.png
[1325144e17f515e178cd5a700989b72c.gif]: /images/20221014/c1a511ba18524a23ba183ff870ca871a.png
[59f076459705c7228cd8a082024c2345.gif]: /images/20221014/f7d21ca7485f422fb5460fa831cc1355.png

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 时间显示控件 TextClock

Android 时间显示控件 TextClock TextClock可用作显示时间，API>=17，用来替代DigitalClock。系统设置以24小时格式的时候使用

约定不等于承诺〃/ 2023年10月17日 13:29/ 0 赞/ 109 阅读

相关 Android BottomSheet：底部弹出Fragment面板（4）

Android BottomSheet：底部弹出Fragment面板（4） BottomSheet不仅可以弹出轻量级的定制好的面板（见附录文章5,6,7），还可

古城微笑少年丶/ 2023年10月17日 05:28/ 0 赞/ 31 阅读

相关 Android控件居中显示

1. 简单描述： Android的Layout有很多属性，今天，我们就来了解一下layout\_centerInParent，layout\_centerVertical，l

野性酷女/ 2023年10月16日 20:49/ 0 赞/ 147 阅读

相关 Android控件显示和隐藏

Android控件显示和隐藏 1、可见： xml代码： android:visibility="visible"; Java代码：view.setVisibility(

拼搏现实的明天。/ 2023年07月11日 05:54/ 0 赞/ 24 阅读

相关 android中控件底部显示,BottomSheet是一个Android组件实现从屏幕底部显示一个 dismissible 视图...

BottomSheet ![68747470733a2f2f7472617669732d63692e6f72672f466c6970626f6172642f626f74746

- 日理万妓/ 2022年10月18日 04:56/ 0 赞/ 31 阅读

相关 Android打造一个高性能无限层级显示的树形控件（Android树形控件）

Android使用ListView实现一个高性能无限层级显示的树形控件：最近公司的Android项目里有一个地方需要选择某公司的所有部门，因为手机屏幕有限所以并不能像网页那

小灰灰/ 2022年07月18日 21:29/ 0 赞/ 1509 阅读

相关 Android 显示全文折叠控件

转载请注明来源！一般列表里文字太多的一个折叠效果的空间，效果图如下。 -------------------- ![这里写图片描述][20161103104940144

绝地灬酷狼/ 2022年07月15日 05:08/ 0 赞/ 205 阅读

相关 Android控件的透明显示

1.子控件相对于父布局的透明显示。例如： <LinearLayout android:layout_width="match_parent"

你的名字/ 2022年06月07日 13:16/ 0 赞/ 237 阅读

相关 Android 实现QQ聊天底部+号显示底部菜单简易版

前一篇，[Android 实现QQ聊天底部+号显示底部菜单][Android _QQ]有的童鞋说穿插的东西有点多，一时间理解不了，今天我在那一篇文章的基础上进行剥离。只实现简单

客官°小女子只卖身不卖艺/ 2021年09月16日 06:48/ 0 赞/ 443 阅读

相关 Android 实现QQ聊天底部+号显示底部菜单

今天项目需要加一个类似QQ聊天界面，点击+号弹出底部菜单选项。我以为网上有例子，百度了下，不尽人意。所以我就自己实现了一下，这里作为记录，方便以后查看，也给需要的童鞋一个例子。

妖狐艹你老母/ 2021年09月16日 06:20/ 0 赞/ 637 阅读