EXML——水平布局(HorizontalLayout)

作者：追风剑情发布于：2017-3-1 16:23 分类：Egret

示例一：

新建ButtonTopTabSkinSkin.exml

<?xml version="1.0" encoding="utf-8" ?>
<e:Skin class="ButtonTopTabSkinSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
    <e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5"
             source="btn_common_up_png"
             source.down="btn_common_down_png"/>
    <e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"
             size="20"
             textColor="0xFFFFFF" verticalAlign="middle" textAlign="center" text="选项卡"/>
    <e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>

	<w:Config id="15a8886de91" ></w:Config>
</e:Skin>

新建NormalTabBarSkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="NormalTabBarSkin" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" >
	<w:Config id="15a8874aa96" ></w:Config>
	<e:Group anchorOffsetX="0">
		<e:layout>
			<e:HorizontalLayout gap="10" verticalAlign="middle"/>
		</e:layout>
		<e:Button  skinName="ButtonTopTabSkinSkin" label="等级"/>
		<e:Button  skinName="ButtonTopTabSkinSkin" label="功勋"/>
		<e:Button  skinName="ButtonTopTabSkinSkin" label="财富"/>
		<e:Button  skinName="ButtonTopTabSkinSkin" label="消费"/>
		<e:Button  skinName="ButtonTopTabSkinSkin" label="关卡"/>
		<e:Button  skinName="ButtonTopTabSkinSkin" label="成就"/>
	</e:Group>
</e:Skin>

预览效果