Arcgis api for flex项目实例—谋局篇（2）：界面设计

      界面设计是谋局当中第二个任务，也是很重要的，这个和概念设计排名不分先后。合理的界面布局会给用户带来非常舒心的体验，在项目之处就能把界面风格和布局确定下来，更是可以让后面的开发事半功倍。

      First：基本布局。我们不是艺术家，不是激进派，四平八稳符合我们的风格，也符合快速开发的要求，布局就采用上天下地，左表右图的经典百度地图式布局，下面开始。

      基本元素：三个border、一个是主窗口，也就是map，一个border是网站的头部，也就是展示个名字放点图片当好看的；一个border是左侧栏，用于查询输入、结果列表显示；map不废话了。

    <s:BorderContainer id="b_left" left="0" top="80" bottom="0" width="200" backgroundColor="#98E3FF" borderWeight="2">
    </s:BorderContainer>
    <s:BorderContainer id="b_head" left="0" right="0" top="0" height="80" backgroundColor="#376FFC"
    </s:BorderContainer>
    <s:BorderContainer id="b_map" left="200" right="0" top="80" bottom="0">
        <esri:Map left="200" right="0" top="84" bottom="-4"/>
    </s:BorderContainer>

     头部没啥好说的，下面处理一下左侧，已经设计了是要有两种查询，关键字和行政区，两种查询需要切换的吧。上一个tab吧。

     关键字就叫景点查询吧，里面一个输入框，一个搜索按钮；行政区就叫政区导航吧，里面就是安徽省所有地级市的导航。GO~！

<mx:TabNavigator id="b_left" left="5" right="5" top="5" height="200">
            <s:NavigatorContent width="100%" height="100%" label="景点查询">
                <s:TextInput left="5" top="5" width="120" height="22"/>
                <s:Button x="130" top="5" width="50" height="22" label="查询"/>
            </s:NavigatorContent>
            <s:NavigatorContent width="100%" height="100%" label="政区导航">
                <s:TileGroup left="5" right="5" top="5" bottom="0">
                    <mx:LinkButton width="50" label="合肥市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="蚌埠市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="淮北市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="宿州市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="淮南市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="阜阳市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="亳州市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="六安市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="滁州市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="池州市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="芜湖市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="铜陵市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="宣城市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="黄山市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="安庆市" paddingLeft="0" paddingRight="0"/>
                    <mx:LinkButton width="50" label="马鞍山市" paddingLeft="0" paddingRight="0"/>
                </s:TileGroup>
            </s:NavigatorContent>
        </mx:TabNavigator>
    </s:BorderContainer>

      下面看一下地图窗口，放一个map，放一个级别控制器，放一个地图类型切换，再放一个鹰眼，这样就差不多了。级别控制器设计阶段暂时用map控件自带的，地图类型切换就是地图和影像两个按钮，鹰眼在右下角。GO~!

    <s:BorderContainer id="b_map" left="200" right="0" top="80" bottom="0">
        <esri:Map left="0" right="0" top="0" bottom="0" logoVisible="false" scaleBarVisible="false"/>
        <s:HGroup right="10" top="10" height="22" gap="0" verticalAlign="middle">
            <s:ToggleButton width="60" label="地图" cornerRadius="0" selected="true"/>
            <s:ToggleButton width="60" label="影像" cornerRadius="0"/>
        </s:HGroup>
        <s:BorderContainer right="0" bottom="0" width="240" height="180" backgroundAlpha="0.5"
                           backgroundColor="#FF8B45" borderWeight="2">
        </s:BorderContainer>
    </s:BorderContainer>

       这样就好了么？没有没有，别忘了地图查询之后界面会有变化，查询结果出来的样子也设计一下吧。主要是左侧内容会变成一个列表，而右边地图要有一个infowindow，GO~!

        <!--左边-->
        <s:BorderContainer left="5" right="5" top="5" bottom="5">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
            <s:Group width="100%" height="30">
                <s:Label x="10" text="查询结果" verticalCenter="0"/>
                <s:Button right="5" width="50" label="返回" verticalCenter="0"/>
            </s:Group>
            <s:List width="100%" height="100%">
                <s:ArrayList>
                    <fx:String>结果一</fx:String>
                    <fx:String>结果二</fx:String>
                    <fx:String>结果三</fx:String>
                </s:ArrayList>
            </s:List>
            <s:HGroup width="100%" height="30" paddingLeft="60" verticalAlign="middle">
                <s:Image source="image/StartArrow.png"/>
                <s:Image source="image/LeftArrow.png"/>
                <s:Label text="1/10"/>
                <s:Image source="image/RightArrow.png"/>
                <s:Image source="image/EndArrow.png"/>
            
            </s:HGroup>
        </s:BorderContainer>

      地图上放的那个infowindow是自己随手画的代码无所谓了，后面开发时可以先使用arcgis自带的，有时间的话再做一个自己玩儿的。这样界面设计差不多了。下面给两张截图，这就是设计效果。

 

 

       不要觉得难看，这只是原型设计，表达出意思就可以了。谋局到此结束，接下来的文字就是开发了。最后我提两个我的经验作为谋局篇的结尾。

     （1）概念设计中的Third也就是高级篇不是必须的，但是多考虑一些，在未来需求变化或者你个人想要精益求精的时候，这个意义就体现出来了。

     （2）界面设计不一定要像我一样到IDE里去做，在纸上画草图也是不错的选择，形式可以简略，设计还是要尽量面面俱到，不然后面有好果子吃。

     （3）flex的布局尽量使用top、bottom、left、right去锚定你的组件，而不要使用x、y，界面中要活用横向、纵向布局来保持一些排列式的组件形式上整齐，这两种布局引申的HGroup和VGroup还有一些更为有趣的作用，有机会在后面秀一下。