Android基本控件之Menus

Posted 2020-08-21 smile、zj

在我们的手机中有很多样式的菜单，比如：我们的短信界面，每条短信，我们长按都会出现一个菜单，还有很多的种类。那么现在，我们就来详细的讨论一下安卓中的菜单

　android的控件中就有这么一个，叫做Menus。就是菜单的意思，他基本分为三种：选项式菜单、上下文菜单、弹出式菜单

我们先来看第一种：选项式菜单

　　那么什么是选项式菜单呢？ 就是当我们点击一个菜单的时候会弹出来一个菜单

如上图所示，右上角的那三个小点 就是菜单按钮，当我们点击时就会弹出一个菜单，这就是一个选项是菜单，既然我们知道是什么东西了，我们自然要做出来嘛~

我们来分析一下，这个选项式菜单怎么做：

　　我们知道弹出来的菜单是有布局的，那么我们就创建这样的一个文件，但是这个文件不同于layout。这个文件是menus专用的，需要在res下创建一个menu的一个目录，然后我们在menu目录中创建一个文件

我们再来分析下Activity中应该如何实现：

　　我们需要重写父类的onCreateOptionMenu()方法和onOptionsItemSelected()方法

　　这两个方法是干什么的呢？ 其中的onCreateOptionMenu()方法是用来创建这样的一个菜单的，那么onOptionsItemSelected()方法就是设置点击菜单后的点击事件

然后，我们根据上述的分析，来操作一下:

　　我们首先来在res下创建menu目录，并新建一个文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item_op_caomao"
        android:icon="@mipmap/lufei_titile"
        android:orderInCategory="100"
        android:title="草帽"
        app:showAsAction="ifRoom">
        <menu>
            <item
                android:id="@+id/item_op_lufei"
                android:icon="@mipmap/lufei"
                android:orderInCategory="100"
                android:title="路飞"
                app:showAsAction="ifRoom" />
        </menu>
    </item>
    <item
        android:id="@+id/item_op_haijun"
        android:icon="@mipmap/aisi"
        android:orderInCategory="100"
        android:title="海军"
        app:showAsAction="ifRoom">
        <menu>
            <item
                android:id="@+id/item_op_simoge"
                android:icon="@mipmap/simoge"
                android:orderInCategory="100"
                android:title="斯摩格"
                app:showAsAction="ifRoom"/>
        </menu>
    </item>
    <item
        android:id="@+id/item_op_hongxin"
        android:icon="@mipmap/xiangkesi"
        android:orderInCategory="100"
        android:title="红心"
        app:showAsAction="ifRoom">
        <menu>
            <item
                android:id="@+id/item_op_luo"
                android:icon="@mipmap/duolanan"
                android:orderInCategory="100"
                android:title="多拉男"
                app:showAsAction="ifRoom" />
        </menu>
    </item>
</menu>

　　在这里，我们创建这么一个文件，其中的item就是每个菜单的菜单项，我们为其设置了ID、图标(icon)、子菜单(menu)等属性。

　　我们来仔细看一下showAsAction属性，这个属性要求必须用app的命名空间，而我们默认是android的命名空间，那么我们就在上面定义一个app的命名空间，并使用，其中的值，也就是ifRoom的意思就是当屏幕上有空余的地方就显示图标，否则就显示“三个小点”

然后我们来到我们的Activity中，去编写代码

public class MainActivity extends AppCompatActivity {

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

    /**
     * 重写的父类的方法
     * @param menu
     * @return
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
            //通过菜单加载器获得菜单的布局
        getMenuInflater().inflate(R.menu.item_menus,menu);
        return super.onCreateOptionsMenu(menu);
    }

    /**
     * 重写的父类方法（用作点击事件）
     * @param item
     * @return
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
            //判断item的id
        switch (item.getItemId()){
            case R.id.item_op_lufei:
                    //弹出一个吐司
                Toast.makeText(this, "路飞", Toast.LENGTH_SHORT).show();
                break;
            case R.id.item_op_luo:
                Toast.makeText(this, "ROOM!!", Toast.LENGTH_SHORT).show();
                break;
            case R.id.item_op_simoge:
                Toast.makeText(this, "斯摩格", Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

我们这么一个选项式菜单就编写完成了，我们来看一下运行的结果吧

我们的运行结果是从左往右一次运行的哦~

选项式菜单，我们就完成了。

接下来，我们来看第二种，也就是上下文菜单：

　　那么什么是上下文菜单呢？上下文菜单是需要依附在某个控件之上的，需要长按该控件，会弹出来一个菜单，例如：我们以前的手机，在我们按住短信的时候，会弹出一个小菜单，提示你转发啊、删除啊什么的，那么就是一个上下文菜单。

我们来实现一下

我们还是来分析一下都需要怎么做：

　　我们首先需要一个控件让上下文菜单去依附，我们就在主布局文件上创建一个TextView好了。

　　然后，我们还是需要一个弹出的菜单的布局，我们在res下创建一个menu目录，在目录下创建菜单的文件

　　我们的布局暂时就这么多

我们来分析下Activity中如何去实现：

　　首先，我们找到需要的控件，就是那个TextView，我们还需要注册一个长按的这么一个事件，使用registerForContextMenu()方法

　　然后，我们重写父类的onCreateContextMenu()方法和onContextItemSelected()方法

　　　　这两个方法中 onCreateContextMenu()方法是为了创建一个上下文菜单，onContextItemSelected()方法就是点事件了。这个和选项式菜单就不一样了哦

然后我们根据上面的分析来实现一下：

　　首先，我们来创建菜单的布局文件：　　

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item_content_one"
        android:title="摁你了，怎么地！给你变成蓝色"
        android:orderInCategory="100"/>
    <item
        android:id="@+id/item_content_two"
        android:title="摁你了，怎么地！给你变成黄色"
        android:orderInCategory="200"/>
    <item
        android:id="@+id/item_content_three"
        android:title="摁你了，怎么地！给你变成红色"
        android:orderInCategory="300"/>
</menu>

　　然后，我们来看主界面菜单的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="application.smile.menus.Main2Activity">
    <TextView
        android:id="@+id/tv_dese"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="不服你摁我"
        android:textSize="50sp"/>
</RelativeLayout>

现在，我们再来看我们的Activity中是如何实现的：

public class Main2Activity extends AppCompatActivity {

    private TextView tv_dese;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
            //找到我们关心的控件
        tv_dese = (TextView) findViewById(R.id.tv_dese);
            //注册长按的事件
        registerForContextMenu(tv_dese);
    }

    @Override
    public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
        super.onCreateContextMenu(menu, v, menuInfo);
            //根据菜单加载器，加载菜单布局
        getMenuInflater().inflate(R.menu.content_menus,menu);
    }

    @Override
    public boolean onContextItemSelected(MenuItem item) {
            //根据id查找点击的是那个菜单项
        switch (item.getItemId()){
            case R.id.item_content_one:
                    //改变TextView上字体的颜色
                tv_dese.setTextColor(Color.BLUE);
                break;
            case R.id.item_content_two:
                tv_dese.setTextColor(Color.YELLOW);
                break;
            case R.id.item_content_three:
                tv_dese.setTextColor(Color.RED);
                break;
        }
        return super.onContextItemSelected(item);
    }
}

这样，我们就完成了，我们来测试一下吧

我们发现，我们长按之后就弹出来了菜单，然后我们选择菜单就改变了文字的颜色

这样，我们的上下文菜单就完成了。

最后，我们来看一下弹出式菜单

那么什么是弹出式菜单呢？ 简单说是弹出来的菜单嘛~哈哈，就是当我们点击一个控件的时候就会弹出来一个菜单，这个弹出和选项式可不同哦。这个的弹出菜单是在该控件的下方出现，如果下方没有地方了，就在上方出现

我们来分析一下：

　　首先，我们还是需要一个控件让弹出式菜单去依附，在这里，我们就使用imageview，并设置onclick属性为了好看点儿

　　然后，我们仍然需要菜单的布局，与前两种一致

然后我们来分析一下Acitivity：

　　我们要在Activity中写以onclick属性值命名的点击事件（这个是imageView的点击事件）（这里为什么有去找ImageView呢？因为onclick方法参数中的view就是我们点击的控件，也就是该程序中的ImageView）

　　然后，我们要实现OnMenuItemClickListener接口并重写onMenuItemClick()方法 作为菜单的点击事件

接下来，我们根据我们的分析来实现弹出式菜单

　　首先，我们需要在主界面布局文件中定义一个ImageView，并设置onClick属性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="application.smile.menus.Main3Activity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_menu_add"
        android:onClick="show"
        />
</RelativeLayout>

　　然后，我们在res下的menu目录下创建一个菜单的布局文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item_popup_1"
        android:orderInCategory="100"
        android:title="标题一"></item>
    <item
        android:id="@+id/item_popup_2"
        android:orderInCategory="200"
        android:title="标题二"></item>
    <item
        android:id="@+id/item_popup_3"
        android:orderInCategory="300"
        android:title="标题三"></item>
    <item
        android:id="@+id/item_popup_4"
        android:orderInCategory="400"
        android:title="标题四" />
</menu>

现在我们的这些布局文件算是都写完了，然后我们来看Activity中的具体实现

public class Main3Activity extends Activity implements PopupMenu.OnMenuItemClickListener{

    private PopupMenu popupMenu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
    }
    public void show(View v){
            //实例化一个弹出式菜单，传入上下文和控件
        popupMenu = new PopupMenu(this,v);
            //根据菜单填充器获得菜单的布局
        popupMenu.getMenuInflater().inflate(R.menu.popup_menus1,popupMenu.getMenu());
            //设置菜单的点击事件
        popupMenu.setOnMenuItemClickListener(this);
            //显示菜单
        popupMenu.show();
    }
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        switch (item.getItemId()){
            case R.id.item_popup_1:
                Toast.makeText(Main3Activity.this,"你点击了第一个标签",Toast.LENGTH_LONG).show();
                break;
            case R.id.item_popup_2:
                Toast.makeText(Main3Activity.this,"你点击了第二个标签",Toast.LENGTH_LONG).show();
                break;
            case R.id.item_popup_3:
                Toast.makeText(Main3Activity.this,"你点击了第三个标签",Toast.LENGTH_LONG).show();
                break;
        }
        return true;
    }
}

 然后，我们来看一下运行的结果：

这样，我们的弹出式菜单就完成了

我们来看一下这三个在Activity中的区别：

　　选项式菜单：重写父类的onCreateOptionsMenu()方法 和 父类的onOptionsItemSelected()方法

　　上下文菜单：重写父类的onCreateContextMenu()方法 和 父类的onContextItemSelected()方法

　　弹出式菜单：写onclick属性对应的点击事件  和 OnMenuItemClickListener接口的onMenuItemClick()方法

 

让程序写入生命，将代码融入灵魂

　　　　　　　　　　　　　　　　　　　　-------smile、zj