Android 自定义组件卫星菜单的实现

请听我讲解「Android 自定义组件卫星菜单的实现」的完整攻略。

简介

卫星菜单是一种圆形的菜单，在主菜单的周围分布着若干个子菜单图标，点击主菜单，子菜单就会从圆形菜单中弹出显示，用户可以点击子菜单图标进行操作。本攻略旨在教你如何使用 Android 自定义组件实现一个卫星菜单。

实现步骤

1. 创建项目和布局文件

首先创建一个 Android 项目，然后进入 activity_main.xml 文件，设计出卫星菜单要显示的样式。一般情况下，我们可以使用 ImageView 作为主菜单，然后围绕这个 ImageView 添加多个 ImageButton 作为子菜单。该布局文件的示例如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_image">

    <ImageView
        android:id="@+id/main_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/main_icon" />

    <ImageButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/main_imageview"
        android:layout_marginLeft="30dp"
        android:src="@drawable/icon1" />

    <ImageButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/main_imageview"
        android:layout_marginTop="30dp"
        android:src="@drawable/icon2" />

    <ImageButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/main_imageview"
        android:layout_marginRight="30dp"
        android:src="@drawable/icon3" />

    <ImageButton
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/main_imageview"
        android:layout_marginBottom="30dp"
        android:src="@drawable/icon4" />

</RelativeLayout>

其中，main_icon 和 icon1 ~ icon4 是放在 drawable 目录下的图片资源。

2. 创建自定义控件和样式

创建自定义控件 SatelliteMenu，继承自 Android 的 RelativeLayout。在构造函数中，初始化所有子控件，确定每个子菜单的位置和样式。示例代码如下：

public class SatelliteMenu extends RelativeLayout {

    private ImageView mMainView; // 主菜单按钮
    private ImageButton mButtonOne; // 子菜单按钮1
    private ImageButton mButtonTwo; // 子菜单按钮2
    private ImageButton mButtonThree; // 子菜单按钮3
    private ImageButton mButtonFour; // 子菜单按钮4

    private boolean mExpanded; // 菜单是否展开

    public SatelliteMenu(Context context) {
        super(context);
        init(context);
    }

    public SatelliteMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public SatelliteMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        // 初始化子菜单按钮
        mButtonOne = new ImageButton(context);
        mButtonTwo = new ImageButton(context);
        mButtonThree = new ImageButton(context);
        mButtonFour = new ImageButton(context);

        mButtonOne.setImageResource(R.drawable.icon1);
        mButtonTwo.setImageResource(R.drawable.icon2);
        mButtonThree.setImageResource(R.drawable.icon3);
        mButtonFour.setImageResource(R.drawable.icon4);

        // 将每个子菜单按钮添加到布局中
        addView(mButtonOne, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        addView(mButtonTwo, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        addView(mButtonThree, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        addView(mButtonFour, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

        // 初始化主菜单按钮
        mMainView = new ImageView(context);
        mMainView.setImageResource(R.drawable.main_icon);

        // 处理主菜单按钮的点击事件
        mMainView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (!mExpanded) {
                    expand();
                } else {
                    collapse();
                }
            }
        });

        // 将主菜单按钮添加到布局中
        addView(mMainView, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    }

    /**
     * 展开子菜单
     */
    private void expand() {
        mExpanded = true;

        // 子菜单出现的半径
        int radius = 300;

        // 计算每个子菜单的角度
        float angle1 = 135f;
        float angle2 = 225f;
        float angle3 = 315f;
        float angle4 = 45f;

        // 计算每个子菜单的偏移量
        int offsetX1 = (int) (radius * Math.cos(Math.toRadians(angle1)));
        int offsetY1 = (int) (radius * Math.sin(Math.toRadians(angle1)));
        int offsetX2 = (int) (radius * Math.cos(Math.toRadians(angle2)));
        int offsetY2 = (int) (radius * Math.sin(Math.toRadians(angle2)));
        int offsetX3 = (int) (radius * Math.cos(Math.toRadians(angle3)));
        int offsetY3 = (int) (radius * Math.sin(Math.toRadians(angle3)));
        int offsetX4 = (int) (radius * Math.cos(Math.toRadians(angle4)));
        int offsetY4 = (int) (radius * Math.sin(Math.toRadians(angle4)));

        // 显示子菜单
        mButtonOne.setVisibility(View.VISIBLE);
        mButtonTwo.setVisibility(View.VISIBLE);
        mButtonThree.setVisibility(View.VISIBLE);
        mButtonFour.setVisibility(View.VISIBLE);

        // 设置子菜单的位置
        mButtonOne.setTranslationX(offsetX1);
        mButtonOne.setTranslationY(-offsetY1);
        mButtonTwo.setTranslationX(-offsetX2);
        mButtonTwo.setTranslationY(-offsetY2);
        mButtonThree.setTranslationX(-offsetX3);
        mButtonThree.setTranslationY(offsetY3);
        mButtonFour.setTranslationX(offsetX4);
        mButtonFour.setTranslationY(offsetY4);

        // 动画效果
        ObjectAnimator.ofFloat(mButtonOne, "translationX", mButtonOne.getTranslationX(), 0f).start();
        ObjectAnimator.ofFloat(mButtonOne, "translationY", mButtonOne.getTranslationY(), 0f).start();
        ObjectAnimator.ofFloat(mButtonTwo, "translationX", mButtonTwo.getTranslationX(), 0f).start();
        ObjectAnimator.ofFloat(mButtonTwo, "translationY", mButtonTwo.getTranslationY(), 0f).start();
        ObjectAnimator.ofFloat(mButtonThree, "translationX", mButtonThree.getTranslationX(), 0f).start();
        ObjectAnimator.ofFloat(mButtonThree, "translationY", mButtonThree.getTranslationY(), 0f).start();
        ObjectAnimator.ofFloat(mButtonFour, "translationX", mButtonFour.getTranslationX(), 0f).start();
        ObjectAnimator.ofFloat(mButtonFour, "translationY", mButtonFour.getTranslationY(), 0f).start();

        // 旋转主菜单按钮
        ObjectAnimator.ofFloat(mMainView, "rotation", 0f, 45f).start();
    }

    /**
     * 收起子菜单
     */
    private void collapse() {
        mExpanded = false;

        // 隐藏子菜单
        mButtonOne.setVisibility(View.INVISIBLE);
        mButtonTwo.setVisibility(View.INVISIBLE);
        mButtonThree.setVisibility(View.INVISIBLE);
        mButtonFour.setVisibility(View.INVISIBLE);

        // 旋转主菜单按钮
        ObjectAnimator.ofFloat(mMainView, "rotation", 45f, 0f).start();
    }
}

3. 在布局文件中引入自定义控件

在 activity_main.xml 文件中，替换原来的布局代码，改为引入自定义控件。

<com.example.satellitemenu.SatelliteMenu
    android:id="@+id/satellite_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

4. 完善逻辑

在 MainActivity.java 中，添加代码响应主菜单和子菜单按钮的点击事件，添加动画效果，以及响应音量键的按下事件。以下是示例代码：

public class MainActivity extends AppCompatActivity {

    private SatelliteMenu mSatelliteMenu;

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

        mSatelliteMenu = findViewById(R.id.satellite_menu);

        // 响应主菜单按钮点击事件
        mSatelliteMenu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (mSatelliteMenu.mExpanded) {
                    mSatelliteMenu.collapse();
                }
            }
        });

        // 响应子菜单按钮1的点击事件
        mSatelliteMenu.mButtonOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Button one clicked", Toast.LENGTH_SHORT).show();
            }
        });

        // 响应子菜单按钮2的点击事件
        mSatelliteMenu.mButtonTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Button two clicked", Toast.LENGTH_SHORT).show();
            }
        });

        // 响应子菜单按钮3的点击事件
        mSatelliteMenu.mButtonThree.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Button three clicked", Toast.LENGTH_SHORT).show();
            }
        });

        // 响应子菜单按钮4的点击事件
        mSatelliteMenu.mButtonFour.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Button four clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }

    // 响应音量键按下事件，显示卫星菜单
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN) {
            if (!mSatelliteMenu.mExpanded) {
                mSatelliteMenu.expand();
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

至此，我们完成了卫星菜单的实现。

示例说明

下面给出两个与该攻略相关的示例说明。

示例 1

假如你想添加一个新的子菜单，比如图片或者文字，那该怎么办呢？

首先，在布局文件 activity_main.xml 中添加一个新的子菜单，比如一个 TextView，并设置它的位置和样式。

<TextView
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/main_imageview"
    android:layout_marginTop="60dp"
    android:layout_marginLeft="60dp"
    android:text="Button 5"
    android:textColor="#FFFFFF"
    android:textSize="16sp" />

然后，在自定义控件 SatelliteMenu.java 中添加一个新的按钮变量和初始化代码：

private TextView mButtonFive; // 新的子菜单按钮

private void init(Context context) {
    // 初始化新的子菜单按钮
    mButtonFive = new TextView(context);
    mButtonFive.setText("Button 5");
    mButtonFive.setTextColor(0xffffffff);
    mButtonFive.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
    mButtonFive.setBackgroundColor(0xff000000);

    // 将新的子菜单按钮添加到布局中
    addView(mButtonFive, new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

    // 设置新的子菜单按钮的位置
    mButtonFive.setTranslationX(-60f);
    mButtonFive.setTranslationY(-60f);
}

最后，在 MainActivity.java 中，添加新的按钮点击事件：

mSatelliteMenu.mButtonFive.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(MainActivity.this, "Button five clicked", Toast.LENGTH_SHORT).show();
    }
});

示例 2

假如你想隐藏一些已经展开的子菜单，在用户点击空白区域或者按下返回键时收起子菜单，那该怎么办呢？

首先，在 SatelliteMenu.java 中添加一个新的方法 public void dismiss()，用于收起子菜单：

public void dismiss() {
    if (mExpanded) {
        collapse();
    }
}

然后，在 MainActivity.java 中，对 SatelliteMenu 增加空白区域的点击事件和返回键的响应：

private View mOuterView; // 卫星菜单的外部区域

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

    mSatelliteMenu = findViewById(R.id.satellite_menu);
    mOuterView = findViewById(R.id.main_layout);

    mOuterView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mSatelliteMenu.dismiss();
        }
    });
}

// 响应返回键按下事件，收起子菜单
@Override
public void onBackPressed() {
    if (mSatelliteMenu.mExpanded) {
        mSatelliteMenu.dismiss();
        return;
    }
    super.onBackPressed();
}

至此，我们成功实现了在空白区域点击时收起子菜单，在按下返回键时收起子菜单。