下面是详细讲解 “Android控件BottomSheet实现底边弹出选择列表”的完整攻略。
什么是BottomSheet
BottomSheet是安卓提供的一个UI控件,可以实现在屏幕底部弹出窗口,通常用于展示一些与主要内容相关的操作选项或者附属功能。BottomSheet有两种类型:持续BottomSheet和模态BottomSheet。持续BottomSheet是可以在主UI上同时滚动的,而模态BottomSheet会覆盖主UI的一部分,只有在底部背景上滑动才能关闭。
实现步骤
- 在XML布局中定义BottomSheet,设置其样式和高度等属性:
<LinearLayout
android:id="@+id/bottom_sheet"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:behavior_hideable="true"
app:behavior_peekHeight=“@dimen/bottom_sheet_peek_height”
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<!-- 在这里添加Bottom Sheet显示的内容 -->
</LinearLayout>
其中app:behavior_hideable
是用来控制BottomSheet是否可以隐藏,app:behavior_peekHeight
是设置BottomSheet初始高度,app:layout_behavior
是BottomSheet在使用时应该绑定的行为。
- 创建BottomSheetBehavior,绑定BottomSheet:
LinearLayout bottomSheet = findViewById(R.id.bottom_sheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
- 设置BottomSheetBehavior的相关属性:
bottomSheetBehavior.setPeekHeight(getResources().getDimensionPixelSize(R.dimen.bottom_sheet_peek_height));
bottomSheetBehavior.setHideable(true);
bottomSheetBehavior.setSkipCollapsed(true);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
其中,setPeekHeight()
设置卡片最初状态的高度,setHideable()
设置是否可以通过手势收缩BottomSheet, setSkipCollapsed()
控制当BottomSheet状态为STATE_DRAGGING时,是否跳过折叠状态, 直接变成有设置的peek高度状态。
- 监听BottomSheet的状态改变,对BottomSheet进行相应操作:
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
// BottomSheet已隐藏,执行一些操作
} else if (newState == BottomSheetBehavior.STATE_EXPANDED) {
// BottomSheet在完全扩展时执行操作
} else if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
// BottomSheet在折叠状态下执行操作
} else if (newState == BottomSheetBehavior.STATE_DRAGGING) {
// BottomSheet在拖拽状态下执行操作
} else if (newState == BottomSheetBehavior.STATE_SETTLING) {
// BottomSheet在拖拽后自动设置状态时执行操作
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
// 对拖动中的BottomSheet进行操作
}
});
我们可以在Callback中监听到BottomSheet的各种状态,并相应进行相应操作。
示例
示例1:BottomSheet实现底部菜单
在BottomSheet中定义菜单项,并为其设置点击事件:
<LinearLayout
android:id="@+id/bottom_sheet"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:behavior_hideable="true"
app:behavior_peekHeight=“@dimen/bottom_sheet_peek_height”
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<TextView
android:id="@+id/menu_item1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/menu_item1"
android:padding="16dp"
android:gravity="center"
android:background="?android:attr/selectableItemBackground"/>
<TextView
android:id="@+id/menu_item2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/menu_item2"
android:padding="16dp"
android:gravity="center"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
然后在代码中为其设置点击事件,并在BottomSheetCallback中监听其状态:
LinearLayout bottomSheet = findViewById(R.id.bottom_sheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
TextView menuItem1 = findViewById(R.id.menu_item1);
menuItem1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 在此处实现点击事件
}
});
TextView menuItem2 = findViewById(R.id.menu_item2);
menuItem2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 在此处实现点击事件
}
});
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
// 当BottomSheet隐藏后执行此处代码
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
// 当BottomSheet在拖拽中时执行此处代码
}
});
示例2:BottomSheet实现底部分享选择
在BottomSheet中添加分享渠道,分别定义:
<LinearLayout
android:id="@+id/bottom_sheet"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:behavior_hideable="true"
app:behavior_peekHeight=“@dimen/bottom_sheet_peek_height”
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<TextView
android:id="@+id/share_wechat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/share_wechat"
android:drawableLeft="@drawable/ic_wechat"
android:padding="16dp"
android:gravity="center"
android:background="?android:attr/selectableItemBackground"/>
<TextView
android:id="@+id/share_qq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/share_qq"
android:drawableLeft="@drawable/ic_qq"
android:padding="16dp"
android:gravity="center"
android:background="?android:attr/selectableItemBackground"/>
<TextView
android:id="@+id/share_weibo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/share_weibo"
android:drawableLeft="@drawable/ic_weibo"
android:padding="16dp"
android:gravity="center"
android:background="?android:attr/selectableItemBackground"/>
<TextView
android:id="@+id/cancel_share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cancel_share"
android:textColor="@color/colorPrimary"
android:padding="16dp"
android:gravity="center"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
然后在代码中为其设置点击事件,并在BottomSheetCallback中监听其状态:
LinearLayout bottomSheet = findViewById(R.id.bottom_sheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
TextView shareWechat = findViewById(R.id.share_wechat);
shareWechat.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 在此处实现分享到微信代码
}
});
TextView shareQQ = findViewById(R.id.share_qq);
shareQQ.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 在此处实现分享到QQ代码
}
});
TextView shareWeibo = findViewById(R.id.share_weibo);
shareWeibo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 在此处实现分享到微博代码
}
});
TextView cancelShare = findViewById(R.id.cancel_share);
cancelShare.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}
});
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
// 当BottomSheet隐藏后执行此处代码
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
// 当BottomSheet在拖拽中时执行此处代码
}
});
当我们点击分享按钮后,BottomSheet被展开,当取消分享时,可以通过设置BottomSheet为隐藏状态来关闭BottomSheet。 同时使用setPeekHeight()通过改变BottomSheet的高度,控制BottomSheet的展示状态。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Android控件BottomSheet实现底边弹出选择列表 - Python技术站