如何实现点击三点图标触发横向展示操作按钮的Android选项菜单

实现步骤 #

1. 调整XML布局结构 #

你需要在现有布局的基础上新增三点入口按钮，同时将你已经写好的功能按钮布局默认设置为隐藏状态，完整XML示例如下：

<!-- 外层父布局，根据你的实际页面结构选择即可，这里用ConstraintLayout举例 -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- 三点菜单入口按钮 -->
    <ImageView
        android:id="@+id/iv_menu_more"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@android:drawable/ic_menu_more" <!-- 系统自带的三点图标，也可以自己替换自定义图标 -->
        android:padding="12dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- 你已经实现的横向功能按钮布局，新增id和默认隐藏属性 -->
    <LinearLayout
        android:id="@+id/ll_function_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_linear"
        android:orientation="horizontal"
        android:visibility="gone" <!-- 默认隐藏 -->
        app:layout_constraintTop_toTopOf="@id/iv_menu_more"
        app:layout_constraintBottom_toBottomOf="@id/iv_menu_more"
        app:layout_constraintEnd_toStartOf="@id/iv_menu_more" <!-- 放在三点按钮左侧，点击后向左展开，符合常见交互 -->
        >

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:elevation="5dp"
            android:src="@mipmap/fav_ic_round"
            android:layout_margin="15dp"
            android:background="@drawable/circular_shape"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
            />

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:elevation="5dp"
            android:src="@mipmap/check_ic_round"
            android:layout_margin="15dp"
            android:background="@drawable/circular_shape"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
            />

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:elevation="5dp"
            android:src="@mipmap/add_ic_round"
            android:layout_margin="15dp"
            android:background="@drawable/circular_shape"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
            />

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:elevation="5dp"
            android:src="@mipmap/edit_ic_round"
            android:layout_margin="15dp"
            android:background="@drawable/circular_shape"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
            />

        <com.google.android.material.imageview.ShapeableImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:elevation="5dp"
            android:src="@mipmap/share_ic_round"
            android:background="@drawable/circular_shape"
            android:layout_margin="15dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
            />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

注意：如果你不需要动画效果，直接在代码里切换ll_function_menu的visibility为VISIBLE/GONE即可实现基础的显示隐藏效果。

2. 添加展开收起动画（可选，优化交互体验） #

在res目录下新建anim文件夹，新增两个动画文件：

右往左滑入动画（res/anim/slide_in_right.xml）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0"
        android:duration="200" />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="200" />
</set>

左往右滑出动画（res/anim/slide_out_right.xml）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="100%"
        android:duration="200" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="200" />
</set>

3. 编写点击交互逻辑 #

在对应的Activity/Fragment中添加点击监听逻辑即可：

Kotlin示例

// 先声明控件
val ivMore = findViewById<ImageView>(R.id.iv_menu_more)
val functionMenu = findViewById<LinearLayout>(R.id.ll_function_menu)
// 加载动画
val slideIn = AnimationUtils.loadAnimation(this, R.anim.slide_in_right)
val slideOut = AnimationUtils.loadAnimation(this, R.anim.slide_out_right)

ivMore.setOnClickListener {
    if (functionMenu.visibility == View.VISIBLE) {
        // 收起菜单
        functionMenu.startAnimation(slideOut)
        functionMenu.visibility = View.GONE
    } else {
        // 展开菜单
        functionMenu.startAnimation(slideIn)
        functionMenu.visibility = View.VISIBLE
    }
}

Java示例

// 声明控件
ImageView ivMore = findViewById(R.id.iv_menu_more);
LinearLayout functionMenu = findViewById(R.id.ll_function_menu);
// 加载动画
Animation slideIn = AnimationUtils.loadAnimation(this, R.anim.slide_in_right);
Animation slideOut = AnimationUtils.loadAnimation(this, R.anim.slide_out_right);

ivMore.setOnClickListener(v -> {
    if (functionMenu.getVisibility() == View.VISIBLE) {
        // 收起菜单
        functionMenu.startAnimation(slideOut);
        functionMenu.setVisibility(View.GONE);
    } else {
        // 展开菜单
        functionMenu.startAnimation(slideIn);
        functionMenu.setVisibility(View.VISIBLE);
    }
});

内容的提问来源于stack exchange，提问作者ayaz khan