底部动作条
底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。
使用环境
底部动作条(Bottom Sheets)特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作,或者需要详加描述的,可以考虑使用菜单(Menu)或者对话框替代。
底部动作条(Bottom Sheets)可以是列表样式的也可以是宫格样式的。宫格布局可以增加视觉的清晰度。
你可以使用底部动作条(Bottom Sheets)展示和其 app 相关的操作,比如做为进入其他 app 的入口(通过 app 的 icon 进入)。
我们来看看官方展示的效果:显示底部动作条的时候,动画应该从屏幕底部边缘向上展开。根据上一步的内容,向用户展示用户上一步的操作之后能够继续操作的内容,并提供模态[1]的选择。点击其他区域会使得底部动作条伴随下滑的动画关闭掉。如果这个窗口包含的操作超出了默认的显示区域,这个窗口需要可以滑动。滑动操作应当向上拉起这个动作条的内容,甚至可以覆盖整个屏幕。当窗口覆盖整个屏幕的时候,需要在上部的标题栏左侧增加一个收起按钮。
添加依赖:
compile 'com.android.support:design:24.2.0'BottomSheet使用例子:
页面代码:
public class MainActivity extends AppCompatActivity {
private BottomSheetBehavior bottomSheet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
init();
}
private void init() {
bottomSheet.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
//newState 有四个状态 :
//展开 BottomSheetBehavior.STATE_EXPANDED
//收起 BottomSheetBehavior.STATE_COLLAPSED
//拖动 BottomSheetBehavior.STATE_DRAGGING
//下滑 BottomSheetBehavior.STATE_SETTLING
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
//这里是拖拽中的回调,slideOffset为0-1 完全收起为0 完全展开为1
}
});
}
}
当然
BottomSheet这种效果是高度可扩展的,你可以在布局中实现你想要的任何效果。
BottomSheetDialog
BottomSheetDialog的使用也很简单,直接上代码:
public class BottomSheetDialogActivity extends AppCompatActivity{
private List mList;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bottomsheet);
initData();
}
private void initData() {
mList = new ArrayList();
for(int i=0; i
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?
立即登录/注册


微信扫码登录