天天动听TTpod皮肤代码详解.doc

Sml皮肤语言教程/Skin.xml结构 /skin.xml文件采用utf8编码 /程序仅支持utf8编码的文件。如果直接用gb，则只能支持英文字符， /中文将不能够正确解码 /以下各Tag的属性中，是大小写敏感的 /建议对照一款皮肤，更容易理解 /xml文件头f /主题开始tag /Name 主题名称 /Author 作者 /Ver 版本 /Email 联系方式 /WebPage 网页 /以上在程序中实际并没有使用。 /主题tag起始到结束之间，包含两个部件 /表示整个skin中可能用到的图片引用 /表示一个完备的主题部件组 / Tag，提供给之后主题部件引用图片时使用 /ID 该图片的ID，在之后部件引用此图片时，将直接使用此ID来调用 /File 图片对象在文件系统中指向的图片 /如果不使用完整的路径，则默认的目录开始位置为skin.xml所在目录 /例如，skin.xml位于c:ttpodskintestskin.xml /则以下的/main.png表示图片位于c:ttpodskintestmain.png /完整路径在java平台下需要加上protocol，例如file:/c:/ttpod/skin/test/main.png /如果protocol为resource:/，则表示直接使用jar包中的文件，如resource:/img/main.png /凡是涉及到文件载入的地方，其路径规则均如以上所述 . /Tag，其中包含了整个皮肤的各种元件，但仅仅是一个旋转方向的皮肤 /ID /Landscape 横屏/Portait 竖屏/Transform 旋转的方向。/优先级高于ID指定的方向 /处于view中的各部件 /部件的容器为一个Panel，如播放界面，为一个播放Panel /但是Panel内不能包含Panel，其他部件也不能和Panel同级 /只能被Panel包含 /元件种类列表 / 窗体 / 文本显示 / 滑条 / 小图标 / 按钮 / 菜单 / 菜单条 / 动画 / 列表 / 歌词秀 / 均衡器 / 均衡器 / 频谱/所有的显示元件，包括Panel，都拥有一些统一的设置 /ID 元件的ID。ID的名称可以自由设置或者没有，但必须为几个固定的名称， /才会在程序中享有到实际的功能，而非内定的ID名称的元件 /在程序中将只会被显示，不具备任何其他特殊的功能。 /两个元件拥有固定的ID不会出错，但如果都使用到内定的ID名称， /那么就只有最后一个使用该ID的部件在程序中会具备相应的功能 /各部件种的固定的ID列表 / /Main 主播放窗口 /List 列表窗口 /Lyric 歌词窗口 /Equalizer 均衡器窗口 / /Title 歌曲标题 /Artist 歌曲艺术家 /Album 歌曲专辑 /Genre 歌曲风格 /Lapse 已播放/剩余时间 /Duration 歌曲总共长度 /Clock 时钟 / /Guage 播放进度指示 /Volume 音量指示 / /PlayIcon 播放模式 /SleepIcon 睡眠模式指示 /AlarmIcon 闹钟指示/ /StopButton 停止按钮 /PrevSongButton 上一首/快退按钮 /NextSongButton 下一首/快进按钮 /PlayPauseButton 播放/暂停按钮 / /一个窗口仅能拥有唯一的Menu /Menu 该窗口的菜单 / /一个窗口仅能拥有唯一的MenuBar /MenuBar 菜单栏 / /PlayList 播放列表/Analyzer频谱/ /LyricShow 歌词秀/ /Equalizer 均衡器设置/各部件的统一属性 /之后所有属性为数字的规则。若数字前包含符号#，例如#FFFFFF，或者数字前面包含符号0x，例如0xFFFFFF，则表示十六进制。 /Name 此部件的名称，在某些部件中可能会绘制到屏幕上，例如 /Enable 允许/禁止此部件，参数为true或1表示启动，其他表示禁止，以下开关类的属性均与此相同 /Visible 显示/不显示此部件，某些部件支持隐藏显示，例如音量条，按钮，菜单栏等，只有在固定事件，如调解音量等事件发生的时候，它才会出现 /Rect 该部件所处的位置，尺寸 /Foreground 前景颜色，参数为数字，如何绘制由每个控件自身决定。 /Background 背景颜色或者背景图像 当为背景图像的时候，接Bitmap的ID， 例如Background=BACKGROUND 后面可以有其他参数 Background=BACKGROUND|20,10,30,40|0x50 以上后面的参数分别为，图片截取矩形，强制alpha通道值。 参数均可选择性的加入，如 Background=BACKGROUND|0x50 这种形式也为合法值 其中强制alpha通道的值如果为0x100，表示背景图片包含半透明或全透明效果，且透明度由图片自身决定 如果Background接颜色规则，则表示背景使用颜色填充 例如Background=#FFFFFF 颜色可以接其他参数，例如Background=#50FFFFFF,#FF0000,1|0x50 表示颜色在两种颜色之间渐变，且自上而下。两个颜色参数之后的参数为0表示自左向右渐变，如果省略0就为默认值。0x50表示强制使用alpha值，此时不由颜色前面的alpha通道控制 所有参数均可不完全填入，例如 Background=#50FFFFFF,#FF0000|0x50 Background=#50FFFFFF,#FF0000,1 均被视为合法值 /Border 边框颜色。 /Shadow 阴影颜色。 /Font 字体 /如果使用十六进制描述 /最后一位表示大小，0 小，1 中，2 大 /倒数第二位表示风格 /0 STYLE_PLAIN，1 STYLE_BOLD（加粗），2 STYLE_UNDERLINED（下划线），3 STYLE_ITALIC（斜体） /倒数第三位表示字体 /0 FACE_MONOSPACE，1 FACE_PROPORTIONAL，2 FACE_SYSTEM /例如#000，表示小字体（默认设置） /同样可以使用10进制描述，将对应的十六进制换算即可。以后的字体类设置均遵循此规则 /所有设置如果不需要，均可以不写入代码中，将有一个内部默认的值 /下面每个部件特殊的设置如无特殊说明，均可以省略不写 /以下将结合具体代码描述各个部件的特殊设置/BackgroundLayout 背景图片的绘制方式/0 默认，1 居中，2平铺，3 拉伸（拉伸暂不被支持） / /TransRect 转换该窗口的时候，哪块区域运动/BackgroundFill 填充的颜色和填充的透明度（用于专辑背景显示时候的蒙板） / /ScrollDelay 卷动的时间间隔，单位为毫秒 /ScrollStep 每次卷动的像素 /Style 卷动的方式，-1 禁止卷动，0 左至右，然后右至左（默认方式），1 左至右，2 右至左 /DigitalBitmap 数字标示图像（仅仅包括-,.,/,0,1,2,3,4,5,6,7,8,9,:） /FontShadow 文字阴影颜色/ScrollStartDelay 下次开始滚动之前等待的时间间隔/Align 文本对齐方式，0 左对齐， 1 居中对齐，2 右对齐 / /Handle 把手颜色或把手图像 /Slide 填充颜色或图像 /Style 显示风格，使用十六进制描述 /最后一位表示显示方向 0 横向，1 纵向 /倒数第二位表示滑动方向 0 左至右，1 右至左 / /currentIcon 当前图标序号 /IconNum 图像中总共的图标数量 / Bitmap使用的图像 /注：PlayIcon 必须有且仅有4个图标 /AlarmIcon LightIcon SleepIcon 必须有且仅有2个图标 / /Pressed 是否处于按下状态 /StateNum 总共拥有多少变换的状态（按下与弹起算一种状态） /CurrentState 当前所处与的状态位置 /Bitmap 使用的图像 /注：PrevButton PlayPauseButton NextButton有两种状态 / /CurrentFrame 当前所处的帧 /FrameNum 总共包含的帧数 /FrameRate 帧率 /Repeat 是否重复播放 /Bitmap 使用的图像 / /ItemSpace各条目中间的间隔像素/FontColorSelected 选中项的颜色 /BarSelected 选中项的背景颜色或图像 /ScrollForeground 卷动条前景颜色 / ScrollBackground卷动条背景颜色或图像/ ScrollBorder卷动条边框颜色/ ScrollShadow卷动条阴影颜色/ ScrollButton卷动条按钮颜色或图像/ ScrollHandle卷动条把手颜色或图像/ /SlideNum 总共显示的条目数量 /SlideWidth 宽度 /SlideForeground 前景颜色或图像 /SlideBackground 背景颜色或图像 / /IconBitmap 图标的图像 /总共14个小图标，依次为 /未选择、选择、收藏夹、标题、艺术家、唱片、风格、 /播放列表、播放、暂停、返回、驱动器、目录、文件 /ListBox也包括以上Menu的全部设置/ListBox也包括以上Text的全部设置 / /FontColorSelected 高亮颜色 /Style 显示模式 /* * 显示模式 * 0x000 - 显示一页歌词 * 0x001 - 仅显示一条歌词 * 0x010 - 不自动换行，显示一页歌词 * 0x011 - 不自动换行，显示单条歌词*0x1xx- 不响应缓慢移动的指令 */ /ItemSpace 显示条目间隔 / /SlideWidth 单条调节条的宽度 /SlideBackground /背景颜色或图像 /Slide /填充颜色或图像 /SlideHandle /把手颜色或图像 /SlideBorder /边框颜色 /SlideSelectBackground /选定调节条之后的背景颜色或图像 Equalizer ID=EQUALIZER Rect=73, 78, 133, 144 Background=0xFF000000 SlideWidth=15 SlideSelectBackground=EQ_CHOICE SlideHandle=HANDLE / 说明提要：/一、皮肤文件/主要介绍皮肤文件构成及相关说明/二、皮肤结构/主要介绍构成皮肤的两类控件/三、皮肤语法及详解/主要介绍皮肤语法，采用从整体到局部的叙述方法，首先介绍一个完整语法的大致框架，然后就语法中的竖屏模式语法进行单独介绍，最后对竖屏模式各页面中用到的代码进行归类说明介绍，参照介绍应该可以看懂默认皮肤的代码，制作或学习皮肤时，可以在默认皮肤的上进行修改或练习。/四、附录（语法表格，待制作）/*/一、【皮肤文件】/皮肤由两类文件组成：皮肤所需的所有图片文件和一个皮肤的定义文件(skin.xml)，然后所有文件都放在一个目录中，此目录即被视为天天动听的一个完备的皮肤/1.关于如何将皮肤呈现在天天动听上：/如上所说，整个目录被视为一个皮肤。因此，将此目录整体放在天天动听系统工作目录中的skin目录下（如果没有，需要自己建立），然后启动天天动听，就能在菜单中的皮肤一项中看到以此目录为名称的皮肤可供选择了。/2.图片文件与skin.xml文件的关系/skin.xml文件详细描述了如何去调用这些图片文件，以及各种元素在屏幕上的坐标等。所以，skin.xml中会引用到这些图片文件。/注意：图片文件是可以被重复调用的，其次，图片是可以被切割显示的/二、【皮肤结构】/现在皮肤的结构类似于photoshop的图层，属于背景+多个控件的方式，每个控件相当于photoshop中的一个图层，在这些控件之中，有些将具有特殊的作用（如时间显示等），而赋予它们这些行为则是通过对它们给出一个特定的ID来命名。而对于不具备特殊ID的控件，则只会在屏幕上简单的显示，可用来点缀皮肤。/关于各种控件的语法下面会有介绍。/三、【皮肤语法】/1. 皮肤采用xml语法，具有：/a）更好的扩展性，语法更灵活；/b）性能更佳，功能更强大。/2. 需要注意的事情：/a）编辑Xml请采用UTF-8编码，可以支持中英文字符；如果你使用GBK编码，则之中出现的所有中文字符可能会变为乱码/b）在各Tag的属性中，对大小写是敏感的，在书写时请注意区分！/c）xml可以使用专门的xml工具(如UltraEdit、Editplus等)来进行编辑，注意这些工具具有自动更正关键字功能，有可能将皮肤中的关键字自动修改，所以需要设置禁用关键字更改，才能正常编辑。/1.java版本对图片的引用，可选的图片切割的模式。/比如，1张大图片上的从0,0开始的，宽高为50,50的某块区域，是我需要引用来显示的部分，所以我可以在这张图片所对应的ID后面加上一个切割矩形框，其间用“|”来分隔，例如Background=图片|0,0,50,50/2.相信各位都知道，java手机的性能有限，不能和智能机的动辄上百M的运行内存相比所以在制作图片的，尽量的精简图片。一个计算内存占用的公式是 图片宽*高*4=占用字节数。/【语法详解】/整个皮肤语法的大体框架为：/ . .下面详细介绍具体涵义：/表示注释/xml 文件头/Name 皮肤名称/Author 作者/Ver 版本/Email 联系邮箱/WebPage 网页/以上内容会在程序中的皮肤信息显示/Bitmap 提供给后面的控件引用图片时使用/ID 该图片的ID，后面引用该图片时，将直接用此ID来调用/File 调用的文件的路径。该路径/制作皮肤时注意把File调用的文件修改为图片所对应的文件/如果不使用完整的路径，则默认的目录开始位置为skin.xml所在目录 /例如，skin.xml位于c:ttpodskintestskin.xml /则以下的/main.png表示图片位于c:ttpodskintestmain.png /完整路径在java平台下需要加上protocol，例如file:/c:/ttpod/skin/test/main.png /如果protocol为resource:/，则表示直接使用jar包中的文件，如resource:/img/main.png /凡是涉及到文件载入的地方，其路径规则均如以上所述/注意java中路径的分隔符为/而不是 /View 视图方式/一般来说，一个视图应该包含主页面（Main）、列表页面（List）、歌词页面（Lyric）、均衡器页面（Equalizer）/但是这并不是必须的。你可以任意少写，或者多写一些页面/关于页面的ID的含义。/如上所说，系统会支持上面所示四种ID命名的页面，并自动附加上导航键（这是不能被用户设置的）的功能，和对应的右部菜单/Portait 竖屏模式/View 视图方式/Landscape 横屏模式以上为一个完整语法的大致构成，下面介绍上面提到的竖屏模式（Portait）和横屏模式（Landscape）的语法。由于横竖屏代码是完全相通的，差别只在于屏幕分辨率不同（相当于又做了一个其他分辨率的皮肤），所以了解了其中一个，另一个也自然就会了。下面以一款简单皮肤的竖屏模式为例，各页面的代码分别如下： /Panel 窗体，包含多个控件的容器，如主页面、列表页面、歌词页面、均衡器页面等等/ Background=BACKGROUND 表示本窗体的背景需要用到的图片从ID为BACKGROUND的Bitmap控件来引用，前面我们已经定义了，所以背景就从和skin.xml相同目录下去查找bg.png这张图片 /Dialog 对话框。每个页面都可能弹出来一个提示框，这里就定义了这个提示框的外观/Border=0表示颜色为黑色，Shadow则是阴影的颜色 /注意：在这个示例中，并没包含4个基本页面，但这也是符合要求的皮肤其中用到的控件，会在之后作详细说明/【控件详解1】/皮肤控件包括几个基本的种类：/a） 窗体b） 文本c） 菜单栏d） 菜单 e） 图标f） 滑动条k） 歌词显示l） 频谱m） 曲目列表o） 按钮p） 动画q） 均衡器（这个只有在支持的机型上才能使用）下面介绍控件及其从属的固定ID：/各部件种的固定的ID列表Main 主播放窗口List 列表窗口Lyric 歌词窗口Equalizer 均衡器窗口Title 歌曲标题Artist 歌曲艺术家Album 歌曲专辑Genre 歌曲风格Lapse 已播放/剩余时间Duration 歌曲总共长度Clock 时钟MusicInfo 歌曲信息NextMedia 下一首歌曲Guage 播放进度指示 Volume 音量指示 PlayIcon 播放模式SleepIcon 睡眠模式指示AlarmIcon 闹钟指示StopButton 停止按钮PrevSongButton 上一首/快退按钮NextSongButton 下一首/快进按钮PlayPauseButton 播放/暂停按钮一个窗口仅能拥有唯一的Menu Menu 该窗口的菜单 /一个窗口仅能拥有唯一的MenuBar MenuBar 菜单栏 PlayList 播放列表Analyzer频谱LyricShow 歌词秀Equalizer 均衡器设置/当ID设置为以上的名称的时候，这个控件就自动享有它的功能了，至于如何组合，当然靠大家意愿咯/【控件详解2】/控件的属性/控件需要我们自己去定义它的属性，它才能按我们的希望显示。/例如上面提到的皮肤里的一个控件的样子/里面的Rect=16,16,132,22等这些就为它的属性对于所有控件，都有一些公共的属性/各部件的统一属性之后所有属性为数字的规则。若数字前包含符号#，例如#FFFFFF，或者数字前面包含符号0x，例如0xFFFFFF，则表示十六进制。Name 此部件的名称，在某些部件中可能会绘制到屏幕上，例如Enable 允许/禁止此部件，参数为true或1表示启动，其他表示禁止，以下开关类的属性均与此相同Visible 显示/不显示此部件，某些部件支持隐藏显示，例如音量条，按钮，菜单栏等，只有在固定事件，如调解音量等事件发生的时候，它才会出现 Rect 该部件所处的位置，尺寸Foreground 前景颜色，参数为数字，如何绘制由每个控件自身决定。Background 背景颜色或者背景图像当为背景图像的时候，接Bitmap的ID， 例如Background=BACKGROUND后面可以有其他参数 Background=BACKGROUND|20,10,30,40|0x50 以上后面的参数分别为，图片截取矩形，强制alpha通道值。 参数均可选择性的加入，如 Background=BACKGROUND|0x50 这种形式也为合法值 其中强制alpha通道的值如果为0x100，表示背景图片包含半透明或全透明效果，且透明度由图片自身决定 如果Background接颜色规则，则表示背景使用颜色填充 例如Background=#FFFFFF 颜色可以接其他参数，例如Background=#50FFFFFF,#FF0000,1|0x50 表示颜色在两种颜色之间渐变，且自上而下。两个颜色参数之后的参数为0表示自左向右渐变，如果省略0就为默认值。0x50表示强制使用alpha值，此时不由颜色前面的alpha通道控制 所有参数均可不完全填入，例如 Background=#50FFFFFF,#FF0000|0x50 Background=#50FFFFFF,#FF0000,1 均被视为合法值 Border 边框颜色。 Shadow 阴影颜色。 Font 字体 如果使用十六进制描述 最后一位表示大小，0 小，1 中，2 大 倒数第二位表示风格 0 STYLE_PLAIN，1 STYLE_BOLD（加粗），2 STYLE_UNDERLINED（下划线），3STYLE_ITALIC（斜体） 倒数第三位表示字体 0 FACE_MONOSPACE，1 FACE_PROPORTIONAL，2 FACE_SYSTEM 例如#000，表示小字体（默认设置） 同样可以使用10进制描述，将对应的十六进制换算即可。以后的字体类设置均遵循此规则 所有设置如果不需要，均可以不写入代码中，将有一个内部默认的值 下面每个部件特殊的设置如无特殊说明，均可以省略不写 以下将结合具体代码描述各个部件的特殊设置BackgroundLayout 背景图片的绘制方式0 默认，1 居中，2平铺/【控件详解3】/除了以上所说的，所有控件都具有的属性之外，每个控件也具有它自身独有的一些属性。以下分别介绍每个控件的属性。这是表示一个基本的页面，可以承载各种控件以显示到屏幕上示例：/基本的属性上面已经说明，其中其他的属性/BackgroundLayout 背景图片的绘制方式，后面的数字表示绘制图片的方式/0 默认，1 居中，2平铺/TransRect 切换到该窗口的时候，哪块区域运动，后面是描述这块区域的一个矩形，如Rect属性一致x,y,宽,高/BackgroundFill 填充的颜色和填充的透明度（这个只会在出现专辑背景显示的时候，才会启用）/后面第一个数字表示填充的颜色，第一个数字表示透明度。 在屏幕上显示一串文字示例： /ScrollDelay 卷动的时间间隔，单位为毫秒 /ScrollStep 每次卷动的像素 /Style 卷动的方式，-1 禁止卷动，0 左至右，然后右至左（默认方式），1 左至右，2 右至左 /DigitalBitmap 数字标示图像（仅仅包括-,.,/,0,1,2,3,4,5,6,7,8,9,:） /FontShadow 文字阴影颜色/ScrollStartDelay 下次开始滚动之前等待的时间间隔/Align 文本对齐方式，0 左对齐， 1 居中对齐，2