DavidMenuPopupWindow:Android定制化菜

2016-11-13 本文已影响359人非墨Zero

GitHub地址：<a href="https://github.com/FeiMo1988/PopupWindowFragment">DavidMenuPopupWindow</a>
作者邮箱: dingwei.chen1988@gmail.com

DavidMenuPopupWindow###

</br>

在宽屏Android设备或者是宽屏平板上,有类似像Windows系统的Win菜单样式的菜单或许是相对较好的交互体验。在Android系统中,menu文件很好的表述了这个层级关系。非墨就将用Android的menu文件结构,映射一套Windows系统类似的层级结构控件。先来看下效果吧:

最终效果

1.menu文件映射###

当然如果单纯是实现一些效果的话,这个还不够,这里首先我们要像之前在Android中定义一个menu一样定义一个menu.xml

<menu app:menu_id="@+id/menu1">
   <item app:item_title="item1"/>
   <item app:item_title="item2">
        <menu app:menu_id="@+id/menu2">
                <item app:item_title="item2.sub1"/>
                <item app:item_title="item2.sub2"/>
        </menu>
   </item>
</menu>

我们通过我们所定义的xml能很看清楚我们的层次结构,是含有两级的菜单,并且在item2菜单中有一个子菜单。这时候我们只需要生成一下DavidMenuPopupWindow,然后把这个Window show出来,一切问题都解决了,Window的位置也会给您精确算好:

DavidMenuPopupWindow menuPopupWindow = new DavidMenuPopupWindow(this,R.menu.menu);
...
menuPopupWindow.show(view);

难道这就够了么？当然远远不够！！DavidMenuPopupWindow还有哪些功能呢？

2.主题传递###

DavidMenuPopupWindow 将定制化一切你所需要的菜单属性。以上面的例子为例,menu1中嵌套了menu2。当你对定制了menu1的主题,并且你并没有指定menu2的主题的时候,menu2的主题将继承于menu1。按照我们的使用经验来说,父子menu间的主题总是相似的。
例如:

<menu app:menu_id="menu0">
<item>    
<menu app:menu_id="@+id/menu1"  
app:menu_title_color="#ff0000" 
app:menu_title_size="3dp">        
<item>            
     <menu 
          app:menu_id="@+id/menu2"
          app:menu_title_color="#ffff00">                
        <item/>                
        <item/>            
      </menu>        
</item>
<item/> 
</menu>
</item>
</menu>

menu0嵌套menu1,menu1嵌套menu2。menu1的主题将继承于menu0。但是由于menu1中设置了title的颜色"#ff0000"(红色),且字号为3dp。所以menu1除了字号和字体颜色外的主题都继承于menu0。而menu2继承于menu1,也就是menu2此时的字号应该为3dp。由于menu2中更换了字体颜色为"#ffff00"(黄色)因此menu2为3dp字号的黄色字体菜单：

主题传递效果演示

3.菜单弹出动画###

菜单弹出动画可以通过menu标签中的app:menu_enter_anim和app:menu_enter_anim属性指定。分别可以指定(可以组合使用):
*none:无动画

*scale:放大动画

*fade:淡入动画

*translate:动画

<menu app:menu_enter_anim="translate">

translate动画效果

4.设置menu样式###

DavidMenuPopupWindow 可以通过<menu>标签给menu设置样式,通过<item>标签给每个item设置样式,这里不做赘述,做一个简单的设置<menu>背景的例子:

<menu app:menu_background_color="#ff0000">

设置背景效果

5.控件占位###

有时候,如果你需要用到你自己的控件在menu里面的话,可以通过<item>的占位标签分别是:

app:item_headstub :首位占位(位于控件最左侧)
app:item_middlestub :中位占位(位于title后面)
app:item_tailstub :末位占位(位于控件最右侧)

通过这三个属性可以指定一个layout,指向你所需要的控件类型,这里非墨引用一个测试用的layout.xml：

// inner_menu_stub.xml
<?xml version="1.0" encoding="utf-8"?>
<ProgressBar
xmlns:android="http://schemas.android.com/apk/res/android
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

然后通过在menu中指定:

<menu>
<item app:item_tailstub="@layout/inner_menu_stub"/>
<menu>
...
<item app:item_leftstub="@layout/inner_menu_stub"/>
..
</menu>

</menu>

实现效果如下:

占位控件指定

DavidMenuPopupWindow还提供了很多的接口和功能,希望大家喜欢,也希望大家如果有好的改进建议或bug,整理发送到本人的邮箱,thx。

DavidMenuPopupWindow:Android定制化菜