微信6.0 ActionBar样式

微信6.0的ActionBar比较简洁只有一个搜索框和一个溢出(overflow)菜单。这个溢出菜单可以看到不是默认的，而是一个“+”号图标。

并且溢出菜单中点击，里面的隐藏菜单图标可以显示出来。（系统默认是不显示的）

文章主要分三部分：

一.主要介绍：如何高仿微信6.0ActionBar；

1.溢出菜单不显示

2.自定义溢出菜单的图标样式

3.隐藏图标的显示。

二.取巧的方法；

三.用PopupWindow实现自定义溢出(overflow)菜单；

一.如何高仿微信6.0ActionBar

错误提示：第一次做时，犯了个错误，就是当我们创建MainActivity时，要让它去继承FragmentActivity，否则ActionBar就会出现异常情况！！！

1.在模拟器中，大家可以发现overflow是显示不出来的，我们可以通过反射的原理从新配置参数。然后再onCreate()方法中调用此方法。

private void setOverflowButtonAlways(){try{ViewConfiguration config = ViewConfiguration.get(this);Field menuKey = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey");menuKey.setAccessible(true);menuKey.setBoolean(config, false);} catch (Exception e){e.printStackTrace();}}

如果，想要在ActonBar中的图标不显示，在onCreate()方法中，配置如下：

getActionBar().setDisplayShowHomeEnabled(false);

2.自定义溢出菜单的图标样式

如果你的API在14+.那么是在你的values-14中的styles.xml中配置如下：

<span style="font-size:18px;"> <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar"><!-- API 14 theme customizations can go here. --><item name="android:actionOverflowButtonStyle">@style/weixinActionOverflowButtonStyle</item>//Overflow中引入下面自定义样式</style><style name="weixinActionOverflowButtonStyle">//自定义图标样式<item name="android:src">@drawable/actionbar_add_icon</item></style>
</span>

3.隐藏图标的显示。
同样利用反射，重新配置一下菜单打开时的样式，重写onMenuOpened()方法：

@Overridepublic boolean onMenuOpened(int featureId, Menu menu){if (featureId == Window.FEATURE_ACTION_BAR && menu != null){if (menu.getClass().getSimpleName().equals("MenuBuilder")){try{Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);m.setAccessible(true);m.invoke(menu, true);} catch (Exception e){e.printStackTrace();}}}return super.onMenuOpened(featureId, menu);}

最后：再把Menu下的main.xml文件补全：

    <itemandroid:id="@+id/action_search"android:actionViewClass="android.widget.SearchView"android:icon="@drawable/actionbar_search_icon"android:showAsAction="ifRoom|collapseActionView"android:title="@string/action_search"/><itemandroid:id="@+id/action_group_chat"android:icon="@drawable/menu_group_chat_icon"android:title="@string/menu_group_chat"/><itemandroid:id="@+id/action_add_friend"android:icon="@drawable/menu_add_icon"android:title="@string/menu_addfriend"/><itemandroid:id="@+id/action_scan"android:icon="@drawable/men_scan_icon"android:title="@string/menu_scan"/><itemandroid:id="@+id/action_feedback"android:icon="@drawable/menu_feedback_icon"android:title="@string/menu_feedback"/></menu></span>

二.取巧的方法：

这部分，再讲一下，取巧的方法：

我发现虽然溢出菜单中的图标不显示，但是如果将隐藏图标放到alway菜单（“+”号）下面，图标是显示的。

如图：

补充：上图是点击“+”号效果。

所以可以，不使用溢出菜单，直接将“+”设置为：android:showAsAction="always"

<span style="font-size:18px;">    <itemandroid:id="@+id/action_search"android:actionViewClass="android.widget.SearchView"android:icon="@drawable/actionbar_search_icon"android:showAsAction="ifRoom|collapseActionView"android:title="搜索"/><itemandroid:id="@+id/action_group_chat"android:icon="@drawable/actionbar_add_icon"android:showAsAction="always"android:title="更多"><menu><itemandroid:id="@+id/action_add_friend"android:icon="@drawable/ofm_add_icon"android:title="添加"/><itemandroid:id="@+id/action_scan"android:icon="@drawable/ofm_feedback_icon"android:title="扫描"/></menu></item></span>

<span style="font-size:18px;">  <itemandroid:id="@+id/action_feed"android:icon="@drawable/ofm_feedback_icon"android:title="反馈"/>
<span style="color:#ff0000;">
</span></span>

三.用PopupWindow实现自定义溢出(overflow)菜单；

如图：

首先，看下main.xml配置：

<span style="font-size:18px;"><menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"tools:context="com.example.demo2.MainActivity" ><itemandroid:id="@+id/action_search"android:actionViewClass="android.widget.SearchView"android:icon="@drawable/actionbar_search_icon"android:showAsAction="ifRoom|collapseActionView"android:title="搜索"/><itemandroid:id="@+id/action_overflow"android:icon="@drawable/actionbar_add_icon"android:orderInCategory="2"android:title="PopupWindow"app:showAsAction="always"/></menu></span>

监听ID为action_overflow的Action，创建popupWindow弹出自己的overflow

<span style="font-size:18px;">@Override

 public boolean onOptionsItemSelected(MenuItem item) {// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();switch (id) {case R.id.action_overflow:opUpMyOverflow();// 弹出自定义overflowbreak;}return super.onOptionsItemSelected(item);}</span>

下面介绍popUpMyOverflow()方法，就是通过它弹出了我们的overflow：

<span style="font-size:18px;">private void opUpMyOverflow() {/*** 定位PopupWindow，让它恰好显示在Action Bar的下方。 通过设置Gravity，确定PopupWindow的大致位置。* 首先获得状态栏的高度，再获取Action bar的高度，这两者相加设置y方向的offset样PopupWindow就显示在action* bar的下方了。 通过dp计算出px，就可以在不同密度屏幕统一X方向的offset.但是要注意不要让背景阴影大于所设置的offset，* 否则阴影的宽度为offset.*/// 获取状态栏高度Rect frame = new Rect();getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);// 状态栏高度：frame.topint yOffset = frame.top + getActionBar().getHeight();// 减去阴影宽度，适配UI.int xOffset = Dp2Px(this, 5f); // 设置x方向offset为5dpView parentView = getLayoutInflater().inflate(R.layout.activity_main,null);View popView = getLayoutInflater().inflate(R.layout.action_overflow_popwindow, null);final PopupWindow popWind = new PopupWindow(popView,LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, true);// popView即popupWindow的布局，ture设置focusAble.ll_one = (LinearLayout) popView.findViewById(R.id.ll_one);ll_two = (LinearLayout) popView.findViewById(R.id.ll_two);ll_one.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "添加", 0).show();popWind.dismiss();}});ll_two.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "群聊", 0).show();popWind.dismiss();}});// 必须设置BackgroundDrawable后setOutsideTouchable(true)才会有效。这里在XML中定义背景，所以这里设置为null;popWind.setBackgroundDrawable(new BitmapDrawable(getResources(),(Bitmap) null));popWind.setOutsideTouchable(true); // 点击外部关闭。popWind.setAnimationStyle(android.R.style.Animation_Dialog); // 设置一个动画。// 设置Gravity，让它显示在右上角。popWind.showAtLocation(parentView, Gravity.RIGHT | Gravity.TOP,xOffset, yOffset);}</span>

在android中，为了适配不同屏幕密度和尺寸，android用了Dp单位，但是在Java代码中多是接受px单位的尺寸，所以这里要转换一下。
Dp转换Px的方法。

<span style="font-size:18px;">  public int Dp2Px(Context context, float dp) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (dp * scale + 0.5f);}</span>

最后，贴出自定义overflow的布局文件就是R.layout.action_overflow_popwindow

<span style="font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#000000"android:orientation="vertical" ><LinearLayoutandroid:id="@+id/ll_one"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal" ><ImageViewandroid:id="@+id/iv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ofm_add_icon" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="添加"android:textColor="#ffffff" /></LinearLayout><Viewandroid:layout_width="150dp"android:layout_height="2dp"android:background="#ffffff"/><LinearLayoutandroid:id="@+id/ll_two"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal" ><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ofm_group_chat_icon" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="群聊"android:textColor="#ffffff" /></LinearLayout></LinearLayout></span>

微信6.0 ActionBar样式相关推荐

微信6.0界面开发学习
[前言] 最近观看了幕课网的仿制微信6.0界面的视频,记录一些学习中碰到的问题,方便自己以后总结,学习. [开发环境] Eclipse +Android Developer Tools+bluesta ...
300 多行代码搞定微信 8.0 的「炸」「裂」特效！
作者 | 峰华出品 | CSDN(id:CSDNnews) 微信 8.0 更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效 ...
rose 2003 7.0_安卓微信7.0.17正式版更新：十大新鲜功能~
"赶不上新的变化,那就来适应TA!" 昨日,安卓微信7.0.17正式版更新啦!不知道大家有没有在第一时间更新呢? 距7.0.17内测版5天,微信发布了7.0.17正式版,说明速度还 ...
微信8.0.6正式发布，新增了7大变化，个个实用~
来源 | 网络正文微信又更新了,今天看到iOS微信8.0.6正式版发布了,之前没有内测到的小伙伴现在可以进行更新了,下面来看看都更新什么功能了. 从微信官方的更新介绍来看,解决了一些已知问题,似乎 ...
仿站小工具8.0_安卓微信8.0版本可以升级了！新增4个实用功能，内附更新方式...
昨天凌晨微信8.0版本率先在苹果端上线,预示着微信7.0的时代已经过去了. 这次微信8.0的更新,一共更新了4个功能,因为实用.有趣,引发了众多安卓用户的羡慕之情.不要着急,更新方式在这里. 1. 更 ...
【Android 应用开发】 ActionBar 样式详解 -- 样式主题简介 Actionbar 的 icon logo 标题菜单样式修改
作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...
Android 高仿微信6.0主界面带你玩转切换图标变色
目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41087219,本文出自:[张鸿洋的博客] 1.概述学习And ...
代码实现微信8.0特效
点击链接可以体验:https://zxuqian.github.io/html-css-examples/31-05-wechat-emoji-effect/ 项目的核心是使用到了 lottie 动画 ...
让微信 8.0 「裂开」「炸弹」的特效代码来了
微信 8.0 更新的一大特色就是支持动画表情,如果发送的消息只有一个内置的表情图标,这个表情会有一段简单的动画,一些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和 ...

微信6.0 ActionBar样式

微信6.0 ActionBar样式相关推荐

最新文章

热门文章