Android 中的模态底页及示例

在本文中，我们将了解如何在我们的应用程序中添加模态底页。我们已经在 Google Drive、Maps 或 Music Player App 等日常应用程序中看到了这个 UI 组件。模态底部工作表始终从屏幕底部显示，如果用户单击外部内容，则将其关闭。它可以垂直拖动，也可以通过向下滑动来解除。

方法：

1. 在build.gradle文件中添加支持库，并在依赖项部分添加依赖项。在这个库的帮助下，我们可以继承BottomSheetDialogFragment ，它可以帮助我们实现 Bottom Sheet 组件。

   dependencies {         
         implementation 'com.google.android.material:material:1.2.0-alpha02'     
   }         
   

2. 现在创建一个bottom_sheet_layout.xml文件并添加以下代码。在这里，我们设计了模态底部表的布局。它有一个文本视图和两个按钮。
   
   
   
   
   
   
3. 现在创建BottomSheetDialog。 Java并添加以下代码。此文件扩展了BottomSheetFragment ，这就是它充当片段的原因。当用户单击模态表的任何底部时，将调用onClickListener() 。
   

   底页对话框。Java

   package org.geeksforgeeks.gfgmodalsheet;
     
   import android.os.Bundle;
   import android.view.LayoutInflater;
   import android.view.View;
   import android.view.ViewGroup;
   import android.widget.Button;
   import android.widget.Toast;
     
   import androidx.annotation.Nullable;
   import com.google.android.material.bottomsheet.BottomSheetDialogFragment;
     
   public class BottomSheetDialog extends BottomSheetDialogFragment {
     
       @Override
       public View onCreateView(LayoutInflater inflater, @Nullable
                                                         ViewGroup container, @Nullable Bundle savedInstanceState)
       {
           View v = inflater.inflate(R.layout.bottom_sheet_layout,
                                     container, false);
     
           Button algo_button = v.findViewById(R.id.algo_button);
           Button course_button = v.findViewById(R.id.course_button);
     
           algo_button.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v)
               {
                   Toast.makeText(getActivity(),
                                  "Algorithm Shared", Toast.LENGTH_SHORT)
                       .show();
                   dismiss();
               }
           });
     
           course_button.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v)
               {
                   Toast.makeText(getActivity(),
                                  "Course Shared", Toast.LENGTH_SHORT)
                       .show();
                   dismiss();
               }
           });
           return v;
       }
   }
   

4. 在activity_main.xml文件中添加以下代码。在这里，我们在 activity_main 布局上添加一个按钮。
   
5. 在MainActivity 中添加以下代码。 Java文件。这里的按钮附加了一个onClickListener 。如果用户点击它，它会被调用并且底部的工作表对话框会显示给用户。
   

   主要活动。Java

   package org.geeksforgeeks.gfgmodalsheet;
     
   import androidx.appcompat.app.AppCompatActivity;
   import android.os.Bundle;
   import android.view.View;
   import android.widget.Button;
     
   public class MainActivity extends AppCompatActivity {
     
       @Override
       protected void onCreate(Bundle savedInstanceState)
       {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
     
           Button OpenBottomSheet = findViewById(R.id.open_bottom_sheet);
     
           OpenBottomSheet.setOnClickListener(
               new View.OnClickListener() {
                   @Override
                   public void onClick(View v)
                   {
                       BottomSheetDialog bottomSheet = new BottomSheetDialog();
                       bottomSheet.show(getSupportFragmentManager(),
                                        "ModalBottomSheet");
                   }
               });
       }
   }
   

输出：