Menu整理

本文详细介绍了Android开发中选项菜单、上下文菜单的创建及使用方法,并提供了使用XML和Java代码实现的具体示例。此外,还讲解了如何使用Spinner组件实现下拉选择功能。

一、选项菜单:最常规的菜单,android中把它叫做option menu,示例:


public class MainActivity extends Activity {

	private static final int CREATE_MENU=Menu.FIRST;
	private static final int ALTER_MENU=Menu.FIRST+1;
	private static final int UPDATE_MENU=Menu.FIRST+2;
	private static final int EXIT_MENU=Menu.FIRST+3;
	private static final int UPDATE_SUBMENU1=Menu.FIRST+4;
	private static final int UPDATE_SUBMENU2=Menu.FIRST+5;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case UPDATE_SUBMENU2:
			Toast.makeText(this, "选择了",1).show();
			break;
		}
		return super.onOptionsItemSelected(item);
	}
	

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		menu.add(Menu.NONE, CREATE_MENU, Menu.NONE, "新建");
		menu.add(Menu.NONE, ALTER_MENU, Menu.NONE, "修改");
		SubMenu subMenu=menu.addSubMenu(Menu.NONE, UPDATE_MENU, Menu.NONE, "更新");
		subMenu.add(Menu.NONE, UPDATE_SUBMENU1, Menu.NONE, "更新 1");
		subMenu.add(Menu.NONE, UPDATE_SUBMENU2, Menu.NONE, "更新 2");
		menu.add(Menu.NONE, EXIT_MENU, Menu.NONE, "退出");
		return true;
	}

}
xmlMenu,依然以常规的菜单为例(option menu),示例:


在工程的/menu下main.xml代码:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/create"
        android:icon="@drawable/ic_launcher"
        android:title="@string/create"/>
    <item
        android:id="@+id/setting"
        android:title="@string/setting">
        <menu>
            <item
                android:id="@+id/setting1"
                android:title="@string/setting1">
            </item>
  
            <item
                android:id="@+id/setting2"
                android:title="@string/setting2">
            </item>
        </menu>
    </item>
    <item
        android:id="@+id/update"
        android:title="@string/update"/>
    <item
        android:id="@+id/exit"
        android:title="@string/exit"/>
</menu>

Activity代码:

public class MainActivity extends Activity {

	private static final String TAG = "TAG";

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

	@Override
	public boolean onMenuItemSelected(int featureId, MenuItem item) {
		switch (item.getItemId()) {
		case R.id.create:
			Log.d(TAG, "CREATE~~~~~~~~~~~~");
			break;
		case R.id.setting2:
			Log.d(TAG, "setting2~~~~~~~~~~~~");
			break;
		case R.id.exit:
			Log.d(TAG, "exit~~~~~~~~~~~~");
			break;
		}
		return super.onMenuItemSelected(featureId, item);
	}
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}


二、上下文菜单:android中长按视图控件后出现的菜单,windows点击右键弹出的菜单即上下文菜单


public class MainActivity extends Activity {

	private static final int MENU1=Menu.FIRST;
	private static final int MENU2=Menu.FIRST+1;
	private static final int MENU3=Menu.FIRST+2;
	private static final int MENU4=Menu.FIRST+3;
	
	private TextView mTextView;
	private Button mButton;
	private ImageView mImageView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mTextView=(TextView) findViewById(R.id.textViewId);
		mButton=(Button) findViewById(R.id.buttonId);
		mImageView=(ImageView) findViewById(R.id.imageViewId);
		
		this.registerForContextMenu(mTextView);
		this.registerForContextMenu(mButton);
		this.registerForContextMenu(mImageView);
	}

	
	@Override
	public boolean onContextItemSelected(MenuItem item) {
		Log.d("TAG", ""+item.getItemId());
		switch (item.getItemId()) {
		case MENU1 :
			Toast.makeText(this, "MENU1", 0).show();
			break;
		case MENU2 :
			Toast.makeText(this, "MENU2", 0).show();
			break;
		case MENU3 :
			Toast.makeText(this, "MENU3", 0).show();
			break;
		case MENU4 :
			Toast.makeText(this, "MENU4", 0).show();
			break;

		default:
			break;
		}
		return super.onContextItemSelected(item);
	}

	@Override
	public void onCreateContextMenu(ContextMenu menu, View v,
			ContextMenuInfo menuInfo) {
		
		switch (v.getId()) {
		case R.id.textViewId:
			menu.add(Menu.NONE, MENU1, Menu.NONE, "哈哈1");
			break;
		case R.id.imageViewId:
			menu.add(Menu.NONE, MENU2, Menu.NONE, "哈哈2");
			break;
		case R.id.buttonId:
			menu.add(Menu.NONE, MENU3, Menu.NONE, "哈哈3");
			menu.add(Menu.NONE, MENU4, Menu.NONE, "哈哈4");
			break;

		}
		super.onCreateContextMenu(menu, v, menuInfo);
	}
	
}

三、下拉框spinner

效果图:


package cn.imcore.test;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MainActivity extends Activity {

	private Spinner mSpinner;
	private ArrayAdapter mAdapter;
	private String [] hobby ={"棒球","足球","看书"};
	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mSpinner=(Spinner) findViewById(R.id.spinnerId);
		
		
		mAdapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, hobby);
		mAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
		
//		String[] hobby = getResources().getStringArray(R.array.hobby);
//		mAdapter=ArrayAdapter.createFromResource(this, R.array.hobby, android.R.layout.simple_spinner_item);
//		mAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
		
		mSpinner.setAdapter(mAdapter);
		
	}
}
还有PopupMenu等日后更新。。。。。。。。。。。

<think>好的,我现在需要帮助用户找到在Elmenu组件中实现折叠和悬浮效果的方法或示例,特别是使用Vue和Element UI的。首先,我得回忆一下Element UI的文档和相关组件。记得el-menu是用于导航菜单的,支持水平和垂直模式,可能还有折叠的选项。 用户提到的折叠效果,通常是指侧边栏菜单可以收起和展开,比如点击一个按钮后菜单栏变窄,只显示图标,悬浮时显示完整内容。这可能需要结合el-menu的collapse属性。在Element UI的文档中,el-menu有一个collapse属性,设置为布尔值,控制是否折叠。所以第一步应该是使用v-model或者绑定数据来控制collapse的状态。 然后是悬浮效果,当菜单折叠后,鼠标悬停在菜单项上时显示完整的提示信息。Element UI的el-submenu和el-menu-item可能有内置的tooltip功能,或者需要手动添加el-tooltip组件。不过可能需要自定义,因为折叠状态下菜单项可能只显示图标,悬浮时显示文字提示。 接下来,我需要查找相关的示例代码。根据用户提供的引用,引用[3]提到了isCollapse的状态和toggleCollapse方法,这可能用于切换折叠状态。引用[4]中提到了多标签页切换,可能与导航菜单相关,但可能不直接涉及折叠。引用[2]中的自动折叠功能可能与布局计算有关,但这里是el-tag,可能不适用。引用[1]提到el-menu的mode属性,可能影响布局方向,垂直模式更适合折叠。 综合这些信息,实现步骤可能包括: 1. 使用el-menu的collapse属性,绑定到data中的isCollapse变量。 2. 添加一个按钮触发toggleCollapse方法,切换isCollapse的值。 3. 在折叠状态下,通过CSS或Element UI的配置,使得鼠标悬浮时显示子菜单或提示。 4. 可能需要使用el-tooltip组件在菜单项折叠时显示文字提示。 另外,可能需要注意菜单折叠时的样式调整,比如宽度变化,图标居中,以及子菜单的弹出方向。在垂直模式下,折叠后宽度变窄,子菜单可能会自动弹出到右侧,这可能需要检查是否正确实现。 可能的代码结构包括在el-menu上设置:collapse="isCollapse",然后通过按钮切换isCollapse的值。同时,为每个el-menu-item添加el-tooltip,当折叠时显示对应的标题。 还需要考虑路由的处理,折叠时可能路由不变,但需要确保点击菜单项时正确跳转。引用[4]中的路由切换逻辑可能与此相关,但主要是在多标签页的应用,而这里更关注菜单本身的折叠和悬浮效果。 可能的问题点包括:折叠后子菜单的显示位置是否正确,悬浮提示是否正常出现,以及菜单项在折叠状态下的对齐和样式。需要参考Element UI的文档确认这些细节,或者查找社区中的示例。 最后,整理出一个示例代码,包含数据属性isCollapse,方法toggleCollapse,以及el-menu和el-tooltip的使用方式。同时,可能需要添加CSS来调整菜单的宽度和悬浮效果。</think>### 如何在 Elmenu 组件中实现折叠和悬浮效果(Vue + Element UI) #### 实现折叠效果 1. **核心属性 `collapse`** `el-menu` 的 `collapse` 属性控制菜单是否折叠。绑定一个布尔值变量即可动态切换折叠状态: ```vue <el-menu :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" > <!-- 菜单项 --> </el-menu> ``` ```javascript data() { return { isCollapse: false } }, methods: { toggleCollapse() { this.isCollapse = !this.isCollapse; } } ``` 2. **添加折叠按钮** 通过按钮触发 `toggleCollapse` 方法: ```vue <el-button @click="toggleCollapse">|||</el-button> ``` 3. **折叠时样式调整** 折叠后菜单宽度会变为 `64px`(默认值),可通过 CSS 自定义: ```css .el-menu--collapse { width: 50px; /* 自定义折叠宽度 */ } ``` #### 实现悬浮效果 1. **子菜单悬浮展开** 当菜单折叠时,`el-submenu` 的悬浮效果需通过 `popper-append-to-body` 属性实现[^1]: ```vue <el-submenu index="1" popper-append-to-body > <template #title> <i class="el-icon-location"></i> <span>导航一</span> </template> <!-- 子项 --> </el-submenu> ``` 2. **菜单项悬浮提示** 折叠状态下,为菜单项添加 `el-tooltip` 显示完整名称: ```vue <el-menu-item index="2"> <el-tooltip :content="'首页'" placement="right" :disabled="!isCollapse" > <div> <i class="el-icon-s-home"></i> <span>首页</span> </div> </el-tooltip> </el-menu-item> ``` #### 完整示例代码 ```vue <template> <div> <el-button @click="toggleCollapse">切换折叠</el-button> <el-menu :collapse="isCollapse" class="sidebar-menu" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" > <el-submenu index="1" popper-append-to-body > <template #title> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item index="1-1">子项1</el-menu-item> </el-submenu> <el-menu-item index="2"> <el-tooltip content="首页" placement="right" :disabled="!isCollapse" > <div> <i class="el-icon-s-home"></i> <span>首页</span> </div> </el-tooltip> </el-menu-item> </el-menu> </div> </template> <script> export default { data() { return { isCollapse: false }; }, methods: { toggleCollapse() { this.isCollapse = !this.isCollapse; } } }; </script> <style> .sidebar-menu:not(.el-menu--collapse) { width: 200px; /* 默认展开宽度 */ } </style> ``` #### 效果说明 - **折叠状态**:菜单宽度收缩,仅显示图标,悬浮子菜单会弹出完整内容。 - **悬浮提示**:折叠时,鼠标悬停在菜单项上会显示文字提示。 - **动态切换**:通过按钮控制 `isCollapse` 实现折叠/展开动画[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值