Android 实战：实现 Material Design 风格的 BottomSheet-JavaScript中文网-JavaScript教程资源分享门户

简介

BottomSheet 是 Material Design 设计规范中的一种交互控件，它可以从屏幕的底部弹出，提供一些操作选项，比如 “分享到社交媒体” 或者 “发送邮件” 等，用户可以选择是否进行相应的操作。

在这篇文章中，我们将会通过谷歌官方提供的 BottomSheetDialogFragment 类，实现一个 Material Design 风格的底部对话框。

实现步骤

第一步：添加依赖库

打开项目的 build.gradle 文件，向其中添加如下依赖库：

implementation 'com.android.support:design:28.0.0'

第二步：创建布局文件

在 res/layout 目录下创建一个新的布局文件，命名为 bottom_sheet_layout.xml，文件内容如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/tv_share"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_share"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:padding="8dp"
        android:text="分享到社交媒体"
        android:textColor="@android:color/black"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_email"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:padding="8dp"
        android:text="发送邮件"
        android:textColor="@android:color/black"
        android:textSize="16sp" />

</LinearLayout>

布局文件中我们创建了一个线性布局，其中包含了两个 TextView，用于模拟 BottomSheet 中的操作选项。

第三步：创建 BottomSheetDialogFragment 类

我们需要创建一个类，继承自 BottomSheetDialogFragment 类，在该类中实现 onCreateView 方法，返回我们创建的底部对话框布局。

public class BottomSheetFragment extends BottomSheetDialogFragment {

    public static BottomSheetFragment newInstance() {
        return new BottomSheetFragment();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.bottom_sheet_layout, container, false);

        TextView tvShare = view.findViewById(R.id.tv_share);
        TextView tvEmail = view.findViewById(R.id.tv_email);

        tvShare.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO: 处理分享逻辑
            }
        });

        tvEmail.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO: 处理发送邮件逻辑
            }
        });

        return view;
    }
}

在 onCreateView 方法中，我们将 LayoutInflater 对象用于加载布局文件 bottom_sheet_layout.xml，然后使用 findViewById 方法获取两个 TextView 控件，并为它们设置点击事件监听器。

第四步：调用 BottomSheetDialogFragment 类

在需要使用底部对话框的位置，使用如下代码即可调用上述的 BottomSheetDialogFragment 类：

BottomSheetFragment bottomSheetFragment = BottomSheetFragment.newInstance();
bottomSheetFragment.show(getSupportFragmentManager(), bottomSheetFragment.getTag());

示例代码

// BottomSheetFragment.java

public class BottomSheetFragment extends BottomSheetDialogFragment {

    public static BottomSheetFragment newInstance() {
        return new BottomSheetFragment();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.bottom_sheet_layout, container, false);

        TextView tvShare = view.findViewById(R.id.tv_share);
        TextView tvEmail = view.findViewById(R.id.tv_email);

        tvShare.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO: 处理分享逻辑
            }
        });

        tvEmail.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO: 处理发送邮件逻辑
            }
        });

        return view;
    }
}

// MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btnOpenBottomSheet = findViewById(R.id.btn_open_bottom_sheet);
        btnOpenBottomSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                BottomSheetFragment bottomSheetFragment = BottomSheetFragment.newInstance();
                bottomSheetFragment.show(getSupportFragmentManager(), bottomSheetFragment.getTag());
            }
        });
    }
}

<!-- bottom_sheet_layout.xml -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/tv_share"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_share"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:padding="8dp"
        android:text="分享到社交媒体"
        android:textColor="@android:color/black"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_email"
        android:drawablePadding="8dp"
        android:gravity="center_vertical"
        android:padding="8dp"
        android:text="发送邮件"
        android:textColor="@android:color/black"
        android:textSize="16sp" />

</LinearLayout>

总结

本文中，我们通过继承 BottomSheetDialogFragment 类，创建了一个 Material Design 风格的底部对话框，并为其添加了两个操作选项。使用这种方式创建底部对话框能够使使用者获得更加良好的用户交互体验，是开发高质量 Android 应用的必备技能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a6182fadd4f0e0ffec1f3d

Android 实战：实现 Material Design 风格的 BottomSheet

简介