📜  Android 中的圆形菜单

📅  最后修改于: 2022-05-13 01:55:27.770000             🧑  作者: Mango

Android 中的圆形菜单

圆形菜单(也称为径向菜单、圆形菜单、圆形菜单)是一种创造性的菜单设计理念,将子菜单项围绕圆形或弧形菜单切换按钮排列。

Android 中的圆形菜单

Android 中的圆形菜单

我们将在本文中构建什么?

在这里,我们将看到如何实现一个循环菜单,当用户单击菜单项时,它会向用户显示一条消息。此应用程序的示例视频如下所示。请注意,我们将使用Java语言构建此应用程序。

分步实施

步骤 1. 创建一个新项目

  • 打开一个新项目。
  • 我们将使用Java语言开发 Empty Activity。保持所有其他选项不变。
  • 您可以在方便时更改项目的名称。
  • 将有两个名为 activity_main.xml 和 MainActivity 的默认文件。Java

如果您不知道如何在 Android Studio 中创建新项目,可以参考如何在 Android Studio 中创建/启动新项目?

步骤 2. 将 JitPack 存储库添加到您的构建文件

maven { url "https://jitpack.io" }

步骤 3. 将依赖项添加到您的 gradle.build(module) 文件

implementation 'com.github.Hitomis:CircleMenu:v1.1.0'

步骤 4. 使用 actvity_main.xml 文件

导航到app > res > layout > activity_main.xml 文件并在其中使用以下代码 -

XML


  
    
  
    
    
    
  


Java
package com.example.circlemenu;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
  
import android.graphics.Color;
import android.os.Bundle;
import android.widget.Toast;
  
import com.hitomi.cmlibrary.CircleMenu;
import com.hitomi.cmlibrary.OnMenuSelectedListener;
  
public class MainActivity extends AppCompatActivity {
  
    CircleMenu circleMenu;
    ConstraintLayout constraintLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        constraintLayout=findViewById(R.id.constraint_layout);
        circleMenu=findViewById(R.id.circle_menu);
  
        circleMenu.setMainMenu(Color.parseColor("#CDCDCD"),R.mipmap.menu,R.mipmap.cancel)
                .addSubMenu(Color.parseColor("#88bef5"),R.mipmap.home)
                .addSubMenu(Color.parseColor("#83e85a"),R.mipmap.search)
                .addSubMenu(Color.parseColor("#FF4B32"),R.mipmap.notification)
                .addSubMenu(Color.parseColor("#ba53de"),R.mipmap.settings)
                .addSubMenu(Color.parseColor("#ff8a5c"),R.mipmap.gps)
                .setOnMenuSelectedListener(new OnMenuSelectedListener() {
                    @Override
                    public void onMenuSelected(int index) {
                        switch(index)
                        {
                            case 0:
                                Toast.makeText(MainActivity.this, "home", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("#ecfffb"));
                                break;
                            case 1:
                                Toast.makeText(MainActivity.this, "search", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("#96f7d2"));
                                break;
                            case 2:
                                Toast.makeText(MainActivity.this, "notification", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("#fac4a2"));
                                break;
                            case 3:
                                Toast.makeText(MainActivity.this, "settings", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("d3cde6"));
                                break;
                            case 4:
                                Toast.makeText(MainActivity.this, "gps", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("fff591"));
                                break;
                        }
                    }
                });
    }
}


第 5 步。使用 MainActivity。Java

转到 MainActivity。 Java文件并在其中使用以下代码-

Java

package com.example.circlemenu;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
  
import android.graphics.Color;
import android.os.Bundle;
import android.widget.Toast;
  
import com.hitomi.cmlibrary.CircleMenu;
import com.hitomi.cmlibrary.OnMenuSelectedListener;
  
public class MainActivity extends AppCompatActivity {
  
    CircleMenu circleMenu;
    ConstraintLayout constraintLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        constraintLayout=findViewById(R.id.constraint_layout);
        circleMenu=findViewById(R.id.circle_menu);
  
        circleMenu.setMainMenu(Color.parseColor("#CDCDCD"),R.mipmap.menu,R.mipmap.cancel)
                .addSubMenu(Color.parseColor("#88bef5"),R.mipmap.home)
                .addSubMenu(Color.parseColor("#83e85a"),R.mipmap.search)
                .addSubMenu(Color.parseColor("#FF4B32"),R.mipmap.notification)
                .addSubMenu(Color.parseColor("#ba53de"),R.mipmap.settings)
                .addSubMenu(Color.parseColor("#ff8a5c"),R.mipmap.gps)
                .setOnMenuSelectedListener(new OnMenuSelectedListener() {
                    @Override
                    public void onMenuSelected(int index) {
                        switch(index)
                        {
                            case 0:
                                Toast.makeText(MainActivity.this, "home", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("#ecfffb"));
                                break;
                            case 1:
                                Toast.makeText(MainActivity.this, "search", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("#96f7d2"));
                                break;
                            case 2:
                                Toast.makeText(MainActivity.this, "notification", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("#fac4a2"));
                                break;
                            case 3:
                                Toast.makeText(MainActivity.this, "settings", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("d3cde6"));
                                break;
                            case 4:
                                Toast.makeText(MainActivity.this, "gps", Toast.LENGTH_SHORT).show();
                                constraintLayout.setBackgroundColor(Color.parseColor("fff591"));
                                break;
                        }
                    }
                });
    }
}

我们的应用程序现已完成,您可以成功运行它,但还有一些可选步骤可以使我们的应用程序的 UI 更漂亮。

步骤 6。删除操作栏

转到 app > res > values > Themes > Themes.xml,然后将“parent=”Theme.MaterialComponents.DayNight.DarkActionBar”更改为 parent=”Theme.MaterialComponents.DayNight.NoActionBar”,因此操作栏将被成功删除。

步骤 7. 更改状态栏颜色

将状态栏的颜色更改为黑色。如果您不知道如何更改 Android 应用程序中状态栏的颜色,请阅读 - 如何更改 Android 应用程序中状态栏的颜色?

输出: