介绍
BottomSheetDialog就是一个底部弹出框，例如抖音、网易云的评论的效果
使用
添加依赖
implementation 'com.google.android.material:material:1.1.0'
创建一个Dialog布局文件，这里以列表为例：
dialog_bottom_sheet.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="列表" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
完成RecyclerView的相关配置，包括布局和适配器，为了简化内容，只显示数字
rv_item.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="400dp">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
package com.wzl.bottomsheetdialogdemo
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
/**
* Created by wzl
* on 2020/3/30 19:17
*/
class MyAdapter(val context: Context, val list: List<Int>) : RecyclerView.Adapter<MyAdapter.MyViewHolder>() {
class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val textView: TextView = itemView.findViewById(R.id.textView)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
val view = LayoutInflater.from(context).inflate(R.layout.rv_item, parent, false)
return MyViewHolder(view)
}
override fun getItemCount(): Int {
return list.size
}
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
list.get(position).also {
holder.textView.text = it.toString()
}
}
}
MainActivity实现代码：
package com.wzl.bottomsheetdialogdemo
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.google.android.material.bottomsheet.BottomSheetBehavior
import com.google.android.material.bottomsheet.BottomSheetDialog
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val dialogView = LayoutInflater.from(this).inflate(R.layout.dialog_bottom_sheet, null)
val bottomSheetDialog = BottomSheetDialog(this)
bottomSheetDialog.setContentView(dialogView)
val bottomSheetBehavior = BottomSheetBehavior.from(dialogView.parent as View)
// 设置bottomSheet的折叠高度
// 比如设置成屏幕的3/4（不包括状态栏）
bottomSheetBehavior.peekHeight = resources.displayMetrics.heightPixels * 3 / 4
bottomSheetBehavior.addBottomSheetCallback(object :
BottomSheetBehavior.BottomSheetCallback() {
override fun onSlide(bottomSheet: View, slideOffset: Float) {
}
override fun onStateChanged(bottomSheet: View, newState: Int) {
// 隐藏dialog
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
bottomSheetDialog.dismiss()
}
}
})
val recyclerView: RecyclerView = dialogView.findViewById(R.id.recyclerView)
recyclerView.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)
recyclerView.adapter = MyAdapter(this, listOf(1, 2, 3, 4, 5))
button.setOnClickListener {
bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
bottomSheetDialog.show()
}
}
}
效果图：
bottomSheetDialog1.gif
可以看到实现过程还是很简单的，当然还有只使用BottomSheetBehavior、使用BottomSheetDialogFragment两种方式，我就不写了，只是昨天被这几个搞得晕头转向，一直没出来效果，当然最主要还是我自己代码出问题了，接下来就是我说的小问题：
把上面的dialog布局的父布局换成ConstraintLayout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="列表"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
</androidx.constraintlayout.widget.ConstraintLayout>
然后运行：
bottomSheetDialog2.gif
可以看到列表没了，昨天就是这个问题害得我一直以为网上那些文章都是有问题的，真是头疼。。。
如果各位知道是什么原因的欢迎评论区留言！
2020-04-25
解决办法：
使用Constraint为根布局时，需要设置宽高。
ConstraintLayout view = (ConstraintLayout) LayoutInflater.from(MainActivity.this).inflate(R.layout.bottom_sheet, null);
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
getResources().getDisplayMetrics().widthPixels,
getResources().getDisplayMetrics().heightPixels
);
dialog.setContentView(view, params);
2020-04-27
圆角实现：
Java：重点就是最后两行代码
BottomSheetDialog dialog = new BottomSheetDialog(MainActivity.this);
ConstraintLayout view = (ConstraintLayout) LayoutInflater.from(MainActivity.this).inflate(R.layout.bottom_sheet, null);
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
getResources().getDisplayMetrics().widthPixels,
getResources().getDisplayMetrics().heightPixels
);
TextView textView = view.findViewById(R.id.textView);
dialog.setContentView(view, params);
View view1 = dialog.getDelegate().findViewById(com.google.android.material.R.id.design_bottom_sheet);
view1.setBackgroundColor(Color.parseColor("#00000000"));
kotlin：以上方法使用无效。。。
所以要通过修改主题样式的方式实现圆角
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
....
<item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialog</item>
</style>
<style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CustomBottomSheet</item>
</style>
<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
</style>
<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
参考链接：Round corner for BottomSheetDialogFragment-stackoverflow
网友评论