Android开发之ActionBar

  使用微信APP的小伙伴对于微信的ActionBar一定有印象,今天就带领大家一起实现以下这个效果。

  第一步打开我们的开发工具,这里我使用的是Eclipse+ADT插件,然后创建我们的工程,这里选择Android的最低版本号为3.0或以上。

  然后开始我们的"抄袭",首先打开我们微信,我们看到,顶部标题部分,分为左右两部分,左侧为"微信"两字,右侧则为搜索按钮+更多按钮,点击搜索按钮,会出现一个文本输入框。点击更多按钮,则会出现隐藏的menu菜单,分为:添加好友、发起群聊、扫一扫、付款。好了有了设计的框架,我们下面就开始我们的开发。

  首先打开我们工程,在MainActivity.java文件中有一个onCreateOptionsMenu方法,这个方法就是初始化创建我们menu菜单的方法。我们可以看到,默认引用的是res-->menu文件夹下的main.xml文件,默认系统为我们生成一个settings按钮,接下来我们就来修改一下这个文件,然后把我们的菜单添加上:



    <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"/>

  写好这文件,我还需要在我们的res-->values文件夹下,打开一个文件名为strings.xml的文件,来配置我们的中文常量。




    满艺
    检索
    更多
    添加朋友
    发起群聊
    收款
    扫一扫
    
    您好,满艺
    

  到这里我们现在运行我们的程序,局可以看到我们程序的顶部出现了类似微信的效果,左侧是应用图标+应用名称,右侧则是一个搜索按钮+表示更多的按钮。现在我们先来将系统默认自带的更多图标换成,我们定制的一个按钮。打开我们的AndroidManifest.xml,我们会发现系统默认我们应用了一个样式文件android:theme="@style/AppTheme",点击打开这个样式文件,将我们的自定义更多图标添加到样式上:



    
    
    
    

  现在我们运行我们的工程,会发现和微信的效果还是有些不同,这是我们就要通过在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菜单的实现就和大家分享完毕,欢迎一起交流学习。

 

你可能感兴趣的:(Android开发之ActionBar)