Android開發之ActionBar_ZenDei技術網路在線

使用微信APP的小伙伴對於微信的ActionBar一定有印象，今天就帶領大家一起實現以下這個效果。第一步打開我們的開發工具，這裡我使用的是Eclipse+ADT插件，然後創建我們的工程，這裡選擇Android的最低版本號為3.0或以上。然後開始我們的"抄襲"，首先打開我們微信，我們看到，頂部標題 ...

　　使用微信APP的小伙伴對於微信的ActionBar一定有印象，今天就帶領大家一起實現以下這個效果。

　　第一步打開我們的開發工具，這裡我使用的是Eclipse+ADT插件，然後創建我們的工程，這裡選擇Android的最低版本號為3.0或以上。

　　然後開始我們的"抄襲"，首先打開我們微信，我們看到，頂部標題部分，分為左右兩部分，左側為"微信"兩字，右側則為搜索按鈕+更多按鈕，點擊搜索按鈕，會出現一個文本輸入框。點擊更多按鈕，則會出現隱藏的menu菜單，分為：添加好友、發起群聊、掃一掃、付款。好了有了設計的框架，我們下麵就開始我們的開發。

　　首先打開我們工程，在MainActivity.java文件中有一個onCreateOptionsMenu方法，這個方法就是初始化創建我們menu菜單的方法。我們可以看到，預設引用的是res-->menu文件夾下的main.xml文件，預設系統為我們生成一個settings按鈕，接下來我們就來修改一下這個文件，然後把我們的菜單添加上：

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/search"
        android:showAsAction="ifRoom|collapseActionView"
        android:actionViewClass="android.widget.SearchView"
        android:icon="@drawable/ic_menu_search"
        android:title="@string/action_search"/>

    <item
        android:id="@+id/addFriend"
        android:icon="@drawable/ic_menu_rotate"
        android:title="@string/menu_addFrideds"/>
    
    <item
        android:id="@+id/teamChart"
        android:icon="@drawable/ic_menu_refresh"
        android:title="@string/menu_teamChart"/>
    
    <item
        android:id="@+id/monery"
        android:icon="@drawable/ic_menu_preferences"
        android:title="@string/menu_getMonery"/>
    
    <item
        android:id="@+id/look"
        android:icon="@drawable/ic_menu_save"
        android:title="@string/menu_look"/>
</menu>

　　寫好這文件，我還需要在我們的res-->values文件夾下，打開一個文件名為strings.xml的文件，來配置我們的中文常量。

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">滿藝</string>
    <string name="action_search">檢索</string>
    <string name="action_more">更多</string>
    <string name="menu_addFrideds">添加朋友</string>
    <string name="menu_teamChart">發起群聊</string>
    <string name="menu_getMonery">收款</string>
    <string name="menu_look">掃一掃</string>
    
    <string name="welcome">您好，滿藝</string>
    
</resources>

　　到這裡我們現在運行我們的程式，局可以看到我們程式的頂部出現了類似微信的效果，左側是應用圖標+應用名稱，右側則是一個搜索按鈕+表示更多的按鈕。現在我們先來將系統預設自帶的更多圖標換成，我們定製的一個按鈕。打開我們的AndroidManifest.xml，我們會發現系統預設我們應用了一個樣式文件android:theme="@style/AppTheme"，點擊打開這個樣式文件，將我們的自定義更多圖標添加到樣式上：

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!--
        Base application theme for API 14+. This theme completely replaces
        AppBaseTheme from BOTH res/values/styles.xml and
        res/values-v11/styles.xml on API 14+ devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- API 14 theme customizations can go here. -->
        <item name="android:actionOverflowButtonStyle">@style/menuOverflowButtonStyle</item>
    </style>
    
    <style name="menuOverflowButtonStyle">
        <item name="android:src">@drawable/ic_menu_more</item>
    </style>

</resources>

　　現在我們運行我們的工程，會發現和微信的效果還是有些不同，這是我們就要通過在MainActivity.java文件中，1通過反射機制來設置自定義更多圖標顯示，2重寫onMenuOpened方法來設置每一個menu菜單像微信那樣，顯示為圖標加標題的形式。

package com.example.androidmenuview;

import java.lang.reflect.Field;
import java.lang.reflect.Method;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewConfiguration;
import android.view.Window;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        setMenuOverflowAlways();
        getActionBar().setDisplayShowHomeEnabled(false);//設置ActionBar應用圖標不顯示
    }

    //初始化Menu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        menu.add(Menu.NONE,Menu.FIRST+6,7,"新增").setIcon(android.R.drawable.ic_input_add);//手動添加menu菜單
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
    //添加Menu的點擊事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
          case R.id.search:
//            Toast.makeText(this, "檢索按鈕", Toast.LENGTH_SHORT).show();
            break;
          case R.id.addFriend:
//            Toast.makeText(this, "添加朋友", Toast.LENGTH_SHORT).show();
            break;
          case R.id.teamChart:
//            Toast.makeText(this, "群聊", Toast.LENGTH_SHORT).show();
            break;
          case R.id.look:
//            Toast.makeText(this, "掃一掃", Toast.LENGTH_SHORT).show();
            break;
          case R.id.monery:
//            Toast.makeText(this, "收款", Toast.LENGTH_SHORT).show();
            break;
          case Menu.FIRST+6:
//            Toast.makeText(this, "新增", Toast.LENGTH_SHORT).show();
            break;
          }
        Toast.makeText(this, item.getTitle(), Toast.LENGTH_SHORT).show();
        return super.onOptionsItemSelected(item);
    }
    
    //設置menu菜單的第一個圖標顯示在標題右上角---使用反射機制來完成
    public void setMenuOverflowAlways(){
        try {
            ViewConfiguration config = ViewConfiguration.get(this);
            Field field = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey");
            field.setAccessible(true);
            field.setBoolean(config, false);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    //設置每個Menu顯示為左圖標右標題
    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if(featureId == Window.FEATURE_ACTION_BAR && menu != null){
            if(menu.getClass().getSimpleName().equals("MenuBuilder")){
                try {
                    Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    method.setAccessible(true);
                    method.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                } 
            }
        }
        return super.onMenuOpened(featureId, menu);
    }

}

　　這裡我從寫了onOptionsItemSelected()方法，從而為每一個menu菜單添加點擊事件。

　　好了到這裡關於微信app頂部部分的menu菜單的實現就和大家分享完畢，歡迎一起交流學習。