如何添加底部 Sheet
How to Add Bottom Sheet
我正在尝试在底部 sheet 中创建一个带有卡片的 Recycler 视图，用户 "scrolls" 向上显示所有卡片，但我在完成此操作时遇到了问题。我怎样才能让 Recycler View with Cards 位于底部 sheet？任何帮助表示赞赏 - 我已经在这几天了，无法弄清楚。 Android 中照片显示的内容有什么办法吗？附件图片是我试图复制的东西，但似乎找不到任何可以做到这一点的东西：
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
if (supportActionBar != null)
supportActionBar?.hide()
val modelList = readFromAsset()
val adapter = CustomAdapter(modelList, this)
rcv.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false) as RecyclerView.LayoutManager?
rcv.adapter = adapter;
adapter.setOnItemClickListener(object : CustomAdapter.ClickListener {
override fun onClick(pos: Int, aView: View) {
Toast.makeText(this@MainActivity, modelList.get(pos).name, Toast.LENGTH_SHORT).show()
}
})
}
private fun readFromAsset(): List<Model> {
val modeList = mutableListOf<Model>()
val bufferReader = application.assets.open("android_version.json").bufferedReader()
val json_string = bufferReader.use {
it.readText()
}
val jsonArray = JSONArray(json_string);
for (i in 0..jsonArray.length() - 1) {
val jsonObject: JSONObject = jsonArray.getJSONObject(i)
val model = Model(jsonObject.getString("name"), jsonObject.getString("version"))
modeList.add(model)
}
return modeList
}
}
activity_main
<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:id="@+id/rcv"/>
CustomAdapter.kt
class CustomAdapter(val modelList: List<Model>, val context: Context) :
RecyclerView.Adapter<RecyclerView.ViewHolder>() {
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
(holder as ViewHolder).bind(modelList.get(position));
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
val layoutInflater = LayoutInflater.from(parent.context)
return ViewHolder(layoutInflater.inflate(R.layout.row_item, parent, false))
}
override fun getItemCount(): Int {
return modelList.size;
}
lateinit var mClickListener: ClickListener
fun setOnItemClickListener(aClickListener: ClickListener) {
mClickListener = aClickListener
}
interface ClickListener {
fun onClick(pos: Int, aView: View)
}
inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView), View.OnClickListener {
init {
itemView.setOnClickListener(this)
}
override fun onClick(p0: View?) {
mClickListener.onClick(adapterPosition, itemView)
}
fun bind(model: Model): Unit {
itemView.txt.text = model.name
itemView.sub_txt.text = model.version
val id = context.resources.getIdentifier(model.name.toLowerCase(), "drawable", context.packageName)
itemView.img.setBackgroundResource(id)
}
}
}
row_item
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginTop="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="vertical"
card_view:cardCornerRadius="30dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="false"
card_view:contentPadding="5dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:text="Title"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/img"
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_marginStart="25dp"
android:layout_toRightOf="@+id/txt"
android:contentDescription="@string/app_name" />
<TextView
android:id="@+id/sub_txt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="25dp"
android:layout_toRightOf="@+id/img"
android:autoSizeMaxTextSize="8sp"
android:autoSizeMinTextSize="6sp"
android:autoSizeStepGranularity="2sp"
android:autoSizeTextType="uniform"
android:text="Title"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
尝试使用底部 Sheet 对话框或底部 Sheet 显示底部的对话框片段 Sheet 在适配器中 Class
底部Sheet对话框示例
View view =
((FragmentActivity)context).getLayoutInflater().inflate(R.layout.fragment_bottom_sheet, null);
BottomSheetDialog dialog = new BottomSheetDialog(mContext);
dialog.setContentView(view);
dialog.show();
BottomsheetDialogFragment 示例：
对话框 Class
public class BottomsheetDialog extends BottomSheetDialogFragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
View v=inflater.inflate(R.layout.fragment_bottom_sheet,container,false);
return v;
}
}
在您的适配器中调用 BottomsheetDialog Class 像这样
BottomSheetDialogFragment bottomSheetDialogFragment = new BottomsheetDialog();
bottomSheetDialogFragment.show(((FragmentActivity)mContext).getSupportFragmentManager(), bottomSheetDialogFragment.getTag());
首先写一个 class 扩展 BottomSheetDialogFragment class 用你的自定义布局
class BaseBottomSheetDialogTest: BottomSheetDialogFragment(){
companion object {
fun newInstance(position: Int, callback: BaseBottomSheetDialogTestCallBack) = BaseBottomSheetDialogTest(callback).apply {
arguments = Bundle().apply {
putInt("CUSTOM_DATA", position)
}
}
}
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.your_custom_layout, container, false)
return view
}
}
然后这样称呼它
val bottomSheetDialog = BaseBottomSheetDialogTest.newInstance(0,CALL_BACK_INTERFACE_IF YOU_NEED)
bottomSheetDialog!!.show(fragmentManager, "TAG_STRING")
This example is with how to pass data and a callback method.
您需要使用 BottomSheet 来解决这个问题。
你的BottomSheetclass会是这样的。
class CustomBottomSheet : BottomSheetDialogFragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.layout_bottomsheet)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val modelList = readFromAsset()
val adapter = CustomAdapter(modelList, this)
rcv.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false) as RecyclerView.LayoutManager?
rcv.adapter = adapter;
adapter.setOnItemClickListener(object : CustomAdapter.ClickListener {
override fun onClick(pos: Int, aView: View) {
Toast.makeText(context, modelList.get(pos).name, Toast.LENGTH_SHORT).show()
}
})
}
private fun readFromAsset(): List<Model> {
val modeList = mutableListOf<Model>()
val bufferReader = context?.assets?.open("android_version.json").bufferedReader()
val json_string = bufferReader.use {
it.readText()
}
val jsonArray = JSONArray(json_string);
for (i in 0..jsonArray.length() - 1) {
val jsonObject: JSONObject = jsonArray.getJSONObject(i)
val model = Model(jsonObject.getString("name"), jsonObject.getString("version"))
modeList.add(model)
}
return modeList
}
}
layout_bottomsheet
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="10dp"
app:behavior_hideable="true"
app:behavior_peekHeight="100dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rcv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" />
</LinearLayout>
然后您需要显示 activity
的底页
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
if (supportActionBar != null)
supportActionBar?.hide()
// show bottom sheet
val bottomSheetDialogFragment: BottomSheetDialogFragment = CustomBottomSheet()
bottomSheetDialogFragment.show(
supportFragmentManager, bottomSheetDialogFragment.tag
)
}
}
更多内容，您可以阅读this。或者您可以搜索 Bottomsheet。希望对您有所帮助。
我正在尝试在底部 sheet 中创建一个带有卡片的 Recycler 视图，用户 "scrolls" 向上显示所有卡片，但我在完成此操作时遇到了问题。我怎样才能让 Recycler View with Cards 位于底部 sheet？任何帮助表示赞赏 - 我已经在这几天了，无法弄清楚。 Android 中照片显示的内容有什么办法吗？附件图片是我试图复制的东西，但似乎找不到任何可以做到这一点的东西：
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
if (supportActionBar != null)
supportActionBar?.hide()
val modelList = readFromAsset()
val adapter = CustomAdapter(modelList, this)
rcv.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false) as RecyclerView.LayoutManager?
rcv.adapter = adapter;
adapter.setOnItemClickListener(object : CustomAdapter.ClickListener {
override fun onClick(pos: Int, aView: View) {
Toast.makeText(this@MainActivity, modelList.get(pos).name, Toast.LENGTH_SHORT).show()
}
})
}
private fun readFromAsset(): List<Model> {
val modeList = mutableListOf<Model>()
val bufferReader = application.assets.open("android_version.json").bufferedReader()
val json_string = bufferReader.use {
it.readText()
}
val jsonArray = JSONArray(json_string);
for (i in 0..jsonArray.length() - 1) {
val jsonObject: JSONObject = jsonArray.getJSONObject(i)
val model = Model(jsonObject.getString("name"), jsonObject.getString("version"))
modeList.add(model)
}
return modeList
}
}
activity_main
<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:id="@+id/rcv"/>
CustomAdapter.kt
class CustomAdapter(val modelList: List<Model>, val context: Context) :
RecyclerView.Adapter<RecyclerView.ViewHolder>() {
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
(holder as ViewHolder).bind(modelList.get(position));
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
val layoutInflater = LayoutInflater.from(parent.context)
return ViewHolder(layoutInflater.inflate(R.layout.row_item, parent, false))
}
override fun getItemCount(): Int {
return modelList.size;
}
lateinit var mClickListener: ClickListener
fun setOnItemClickListener(aClickListener: ClickListener) {
mClickListener = aClickListener
}
interface ClickListener {
fun onClick(pos: Int, aView: View)
}
inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView), View.OnClickListener {
init {
itemView.setOnClickListener(this)
}
override fun onClick(p0: View?) {
mClickListener.onClick(adapterPosition, itemView)
}
fun bind(model: Model): Unit {
itemView.txt.text = model.name
itemView.sub_txt.text = model.version
val id = context.resources.getIdentifier(model.name.toLowerCase(), "drawable", context.packageName)
itemView.img.setBackgroundResource(id)
}
}
}
row_item
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginTop="10dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="vertical"
card_view:cardCornerRadius="30dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="false"
card_view:contentPadding="5dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:text="Title"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/img"
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_marginStart="25dp"
android:layout_toRightOf="@+id/txt"
android:contentDescription="@string/app_name" />
<TextView
android:id="@+id/sub_txt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="25dp"
android:layout_toRightOf="@+id/img"
android:autoSizeMaxTextSize="8sp"
android:autoSizeMinTextSize="6sp"
android:autoSizeStepGranularity="2sp"
android:autoSizeTextType="uniform"
android:text="Title"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
尝试使用底部 Sheet 对话框或底部 Sheet 显示底部的对话框片段 Sheet 在适配器中 Class
底部Sheet对话框示例
View view =
((FragmentActivity)context).getLayoutInflater().inflate(R.layout.fragment_bottom_sheet, null);
BottomSheetDialog dialog = new BottomSheetDialog(mContext);
dialog.setContentView(view);
dialog.show();
BottomsheetDialogFragment 示例： 对话框 Class
public class BottomsheetDialog extends BottomSheetDialogFragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
View v=inflater.inflate(R.layout.fragment_bottom_sheet,container,false);
return v;
}
}
在您的适配器中调用 BottomsheetDialog Class 像这样
BottomSheetDialogFragment bottomSheetDialogFragment = new BottomsheetDialog();
bottomSheetDialogFragment.show(((FragmentActivity)mContext).getSupportFragmentManager(), bottomSheetDialogFragment.getTag());
首先写一个 class 扩展 BottomSheetDialogFragment class 用你的自定义布局
class BaseBottomSheetDialogTest: BottomSheetDialogFragment(){
companion object {
fun newInstance(position: Int, callback: BaseBottomSheetDialogTestCallBack) = BaseBottomSheetDialogTest(callback).apply {
arguments = Bundle().apply {
putInt("CUSTOM_DATA", position)
}
}
}
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.your_custom_layout, container, false)
return view
}
}
然后这样称呼它
val bottomSheetDialog = BaseBottomSheetDialogTest.newInstance(0,CALL_BACK_INTERFACE_IF YOU_NEED)
bottomSheetDialog!!.show(fragmentManager, "TAG_STRING")
This example is with how to pass data and a callback method.
您需要使用 BottomSheet 来解决这个问题。
你的BottomSheetclass会是这样的。
class CustomBottomSheet : BottomSheetDialogFragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.layout_bottomsheet)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val modelList = readFromAsset()
val adapter = CustomAdapter(modelList, this)
rcv.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false) as RecyclerView.LayoutManager?
rcv.adapter = adapter;
adapter.setOnItemClickListener(object : CustomAdapter.ClickListener {
override fun onClick(pos: Int, aView: View) {
Toast.makeText(context, modelList.get(pos).name, Toast.LENGTH_SHORT).show()
}
})
}
private fun readFromAsset(): List<Model> {
val modeList = mutableListOf<Model>()
val bufferReader = context?.assets?.open("android_version.json").bufferedReader()
val json_string = bufferReader.use {
it.readText()
}
val jsonArray = JSONArray(json_string);
for (i in 0..jsonArray.length() - 1) {
val jsonObject: JSONObject = jsonArray.getJSONObject(i)
val model = Model(jsonObject.getString("name"), jsonObject.getString("version"))
modeList.add(model)
}
return modeList
}
}
layout_bottomsheet
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="10dp"
app:behavior_hideable="true"
app:behavior_peekHeight="100dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rcv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" />
</LinearLayout>
然后您需要显示 activity
的底页class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
if (supportActionBar != null)
supportActionBar?.hide()
// show bottom sheet
val bottomSheetDialogFragment: BottomSheetDialogFragment = CustomBottomSheet()
bottomSheetDialogFragment.show(
supportFragmentManager, bottomSheetDialogFragment.tag
)
}
}
更多内容，您可以阅读this。或者您可以搜索 Bottomsheet。希望对您有所帮助。