欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android制作微信app顶部menu菜单(ActionBar)

程序员文章站 2023-12-18 09:25:04
使用微信app的小伙伴对于微信的actionbar一定有印象,今天就带领大家一起实现以下这个效果。   第一步打开我们的开发工具,这里我使用的是eclipse+adt插件...

使用微信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菜单的实现就和大家分享完毕,欢迎一起交流学习。

上一篇:

下一篇: