向Android操作栏中添加操作项和浮动菜单项

这篇文章中我们将创建一个应用并添加操作项(Action items)和浮动菜单项(Overflow menu items)到操作栏(Action bar)中。这个应用使用Eclipse 3.7.2开发环境并在Android api版本14中测试。如果你要也想添加操作项、浮动菜单项和操作栏到更早的版本蜂窝(Honeycomb)版本(API level  < 11)中,可以看这篇文章《使用Sherlock库在Android更早版本蜂窝(Honeycomb)中添加菜单到操作栏》。

1.创建一个新的Android程序名字“ActionBarMenu”


2.选择Android构建(build)目标(target)


3.进入应用详情


4.下载图片

下面给出链接,下载文件drawable-mdpi.zip drawable-hdpi.zipdrawable-xhdpi.zip并分别解压到目录drawable-mdpi,、drawable-hdpi和drawable-xhdpi中。


5. res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <string name="hello">MainActivity</string>
    <string name="app_name">ActionBarMenu</string>
 
    <string name="phone">Phone</string>
    <string name="computer">Computer</string>
    <string name="gamepad">Gamepad</string>
 
    <string name="camera">Camera</string>
    <string name="video">Video</string>
 
    <string name="email">EMail</string>
 
</resources>


6. res/menu/items.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/phone"
        android:title="@string/phone"
        android:icon="@drawable/phone"
        android:showAsAction="ifRoom|withText"
    />
 
    <item
        android:id="@+id/computer"
        android:title="@string/computer"
        android:icon="@drawable/computer"
        android:showAsAction="ifRoom|withText"
    />
 
    <item
        android:id="@+id/gamepad"
        android:title="@string/gamepad"
        android:icon="@drawable/gamepad"
        android:showAsAction="ifRoom|withText"
    />
 
    <item
        android:id="@+id/camera"
        android:title="@string/camera"
        android:icon="@drawable/camera"
        android:showAsAction="ifRoom|withText"
    />
 
    <item
        android:id="@+id/video"
        android:title="@string/video"
        android:icon="@drawable/video"
        android:showAsAction="ifRoom|withText"
    />
 
    <item
        android:id="@+id/email"
        android:title="@string/email"
        android:icon="@drawable/email"
        android:showAsAction="ifRoom|withText"
    />
</menu>


7. src/in/wptrafficanalyzer/actionbarmenu/MainActivity.java

package in.wptrafficanalyzer.actionbarmenu;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;
 
public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.items, menu);
        return super.onCreateOptionsMenu(menu);
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
 
        super.onOptionsItemSelected(item);
 
        switch(item.getItemId()){
            case R.id.phone:
                Toast.makeText(getBaseContext(), "You selected Phone", Toast.LENGTH_SHORT).show();
                break;
 
            case R.id.computer:
                Toast.makeText(getBaseContext(), "You selected Computer", Toast.LENGTH_SHORT).show();
                break;
 
            case R.id.gamepad:
                Toast.makeText(getBaseContext(), "You selected Gamepad", Toast.LENGTH_SHORT).show();
                break;
 
            case R.id.camera:
                Toast.makeText(getBaseContext(), "You selected Camera", Toast.LENGTH_SHORT).show();
                break;
 
            case R.id.video:
                Toast.makeText(getBaseContext(), "You selected Video", Toast.LENGTH_SHORT).show();
                break;
 
            case R.id.email:
                Toast.makeText(getBaseContext(), "You selected EMail", Toast.LENGTH_SHORT).show();
                break;
 
        }
        return true;
 
    }
}

8. AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.actionbarmenu"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk android:minSdkVersion="14" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:uiOptions="splitActionBarWhenNarrow"
        >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>


9. Application in Execution




为了拆分操作栏,在应用的AndroidManifest.xml中的Application元素或者Activity元素中添加属性 android:uiOptions=”splitActionBarWhenNarrow”  。

10.下载源码

Download Full Source Code


11. 参考

http://developer.android.com/guide/index.html

译文链接:http://wptrafficanalyzer.in/blog/adding-action-items-and-overflow-menu-items-to-action-bar-in-android/


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>导航</title> <style> .navbar { background-color: #333; overflow: hidden; } .navbar a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .navbar a:hover { background-color: #ddd; color: black; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #ddd; color: black; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <div class="navbar"> <a href="#home">首页</a> <div class="dropdown"> <button class="dropbtn">菜单1 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">子菜单1</a> <a href="#">子菜单2</a> <a href="#">子菜单3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">菜单2 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">子菜单1</a> <a href="#">子菜单2</a> <a href="#">子菜单3</a> </div> </div> <a href="#contact">菜单3</a> <a href="#about">菜单4</a> <div class="dropdown"> <button class="dropbtn">菜单5 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">子菜单1</a> <a href="#">子菜单2</a> <a href="#">子菜单3</a> </div> </div> <a href="#news">菜单6</a> <a href="#faq">菜单7</a> <a href="#search">菜单8</a> </div> </body> </html> ``` 在这个示例,我们创建了一个带有八个菜单项的导航菜单项包括首页、菜单1-5、菜单6-8。 为了避免菜单项到处浮动,我们使用了`overflow: hidden`属性来覆盖容器的内容溢出,并使用`float: left`属性来使菜单项靠左对齐。我们还使用了`position: absolute`属性和`display: none`属性来隐藏下拉菜单,并使用JavaScript代码来显示它们。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值