自定义皮肤

作者：追风剑情 发布于：2017-3-2 11:26 分类：Egret

1、创建自定义按钮皮肤ButtonLeftTabSkin.exml 

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <e:Skin class="ButtonLeftTabSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui">
  3.     <e:Image scale9Grid="1,3,8,8" alpha.disabled="0.5"
  4.              source="btn_tab_up_png"
  5.              source.down="btn_tab_down_png" scaleX="-1" anchorOffsetX="107" right="0" top="0" bottom="0" left="0" fillMode="scale"/>
  6.     <e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"
  7.              size="20"
  8.              textColor="0xFFFFFF" verticalAlign="middle" textAlign="center"/>
  9.     <e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>
  10. </e:Skin>


2、创建界面并使用自定义皮肤 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <e:Skin class="ranking" width="1280" height="720" xmlns:e="http://ns.egret.com/eui">
  3. <e:Group anchorOffsetX="0" anchorOffsetY="0" verticalCenter="0" horizontalCenter="0">
  4.     <e:Component id="panel" skinName="PanelMainSkin"/>
  5.     <e:Group anchorOffsetY="-68" anchorOffsetX="-145">
  6.         <e:layout>
  7.             <e:HorizontalLayout gap="10" verticalAlign="middle"/>
  8.         </e:layout>
  9.         <e:Button skinName="skins.ButtonLeftTabSkin" label="等级"/>
  10.         <e:Button skinName="skins.ButtonLeftTabSkin" label="功勋"/>
  11.     </e:Group>
  12. </e:Group>
  13. </e:Skin>


3、在default.thm.json中配置自定义皮肤 

  1. { 
  2.   "skins": {
  3.      "ButtonLeftTabSkin": "resource/eui_skins/ButtonLeftTabSkin.exml"
  4.   },
  5.   "autoGenerateExmlsList": true,
  6.   "exmls": [
  7.   ]
  8. }


预览效果

111111.png

标签: Egret

« 三角形 | EXML——水平布局(HorizontalLayout)»
Powered by emlog  蜀ICP备18021003号-1   sitemap

川公网安备 51019002001593号