Flex开发Android 更改ViewMenu外观

Android自带的menu 不说好看不好看 只要感觉不满意就要改 

看看自带的menu 是什么样子的

 

感觉这个viewmenu比较 还是不错的 但是每个人的看法也不同 看看修改后的效果是什么样字

 

 

 

不管修改后的效果是否好看 目的是修改 因为只要知道了怎么修改 我们就可以按照我们的审美来编码

 

在项目中需要添加三个文件

 

SuperViewMenu.mxml

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

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2010 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for a Spark ViewMenu in a mobile application.  

@see spark.components.ViewMenu

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.ViewMenu")]
        ]]>
    </fx:Metadata> 
    
    <fx:Script fb:purpose="styling">
        <![CDATA[
            import mx.core.DPIClassification;
            import mx.core.FlexGlobals;
            import mx.core.IVisualElement;
            import mx.core.UIComponent;
            import mx.events.FlexEvent;
            
            import spark.components.supportClasses.GroupBase;
            import spark.effects.easing.Power;
            
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal"                          stateGroups="openedGroup"/>
        <s:State name="closed"                          stateGroups="closedGroup"/>
        <s:State name="disabled"                        stateGroups="openedGroup"/>
        <s:State name="normalAndLandscape"              stateGroups="openedGroup, landscapeGroup"/>
        <s:State name="closedAndLandscape"              stateGroups="closedGroup, landscapeGroup"/>
        <s:State name="disabledAndLandscape"            stateGroups="openedGroup, landscapeGroup" />
    </s:states>
    
    <s:transitions>
        <s:Transition fromState="closed" toState="normal" autoReverse="true">
            <s:Parallel>
                <s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
                <s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
            </s:Parallel>
        </s:Transition>
        
        <s:Transition fromState="closedAndLandscape" toState="normalAndLandscape" autoReverse="true">
            <s:Parallel>
                <s:Fade target="{chromeGroup}" duration="150" easer="{new Power(0.5, 3)}" /> 
                <s:Move target="{chromeGroup}" duration="150" disableLayout="true"  easer="{new Power(0, 5)}"/>
            </s:Parallel>
        </s:Transition>

        <s:Transition fromState="normal" toState="closed" autoReverse="true">
            <s:Parallel>
                <s:Fade target="{chromeGroup}" duration="100"/> 
                <s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
            </s:Parallel>
        </s:Transition>

        <s:Transition fromState="normalAndLandscape" toState="closedAndLandscape" autoReverse="true">
            <s:Parallel>
                <s:Fade target="{chromeGroup}" duration="100"/> 
                <s:Move target="{chromeGroup}" duration="100" disableLayout="true"/>
            </s:Parallel>
        </s:Transition>
    </s:transitions>

    <!-- The ViewMenu and its skin are sized to the application.
         The menu chrome is a separate group that is anchored to the bottom of the skin. -->

    <s:Group id="chromeGroup"
             left="0"
             right="0"
             top.closedGroup="{hostComponent.height - chromeGroup.height / 2}"
             bottom.openedGroup="0" 
             visible.closedGroup="false">
        
        <!-- Divider line -->
        
        <!-- Background -->
        <s:Rect radiusX="5" radiusY="5" left="0" right="0" top="0" bottom="0" id="background">
            <s:fill> 
                <s:SolidColor color="#E27907" alpha=".5"/>
            </s:fill>
        </s:Rect>
        
        <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
        -->
        <!--- @copy spark.components.SkinnableContainer#contentGroup -->
        <s:Group id="contentGroup" left="2" right="2" top="3" bottom="2" minWidth="0" minHeight="0">
            <s:layout>
                <s:ViewMenuLayout horizontalGap="2" verticalGap="2" id="contentGroupLayout"
                                  requestedMaxColumnCount="3" requestedMaxColumnCount.landscapeGroup="6"/>
            </s:layout>
        </s:Group>    
    </s:Group>
</s:SparkSkin>

 

SuperMenuItem.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.ViewMenuItem")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="showsCaret" stateGroups="contentGroup" />
		<s:State name="disabled" />
		<s:State name="down" />
		<s:State name="over" />
		<s:State name="up" />
	</s:states>
	
	<!-- SkinParts
	name=iconDisplay, type=spark.primitives.BitmapImage, required=false
	name=labelDisplay, type=spark.core.IDisplayText, required=false
	-->
	<s:Rect radiusX="5" top="1" left="1" right="1" bottom="1">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0x333333"/>
				<s:GradientEntry color="0x225AD9"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<s:HGroup paddingTop="3" paddingBottom="3" paddingLeft="3" paddingRight="3" id="contentGroup" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
		<s:BitmapImage id="iconDisplay"/>
		<s:Label id="labelDisplay"/>
	</s:HGroup>
</s:Skin>

 

新建一个样式文件

style.css

 

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
s|ViewMenu{
	skinClass:ClassReference("assets.skin.SuperViewMenu");
}
s|ViewMenuItem
{
	skinClass:ClassReference("assets.skin.SuperMenuItem")
}

 

在主程序中引入css就可以预览效果了

 

apk文件也上传了 有时间的可以测试下 手机只要要arm v7  先安装上AIR2.6+ 否则软件无法安装