PC Camera开发日志（十一）------ TTPLAYER UI 分析

TTPLAYER UI 分析

我一直就觉得TTPLAYER的UI扩展性已经做得很好。在MYCam开始之处先分析下别人的长处，哪些设计细节可以完全那里利用。

任意挑选一套皮肤文件出来分析（Orange 皮肤）

TTPlayre的皮肤选择Orange的时候整体外观如下：

去TTPLAYER的安装包里面找到Skin文件夹，在里面可以看到每个.SKN文件对应的有一个XML配置文件。找到Orange.skn文件，先修改其后缀名为.zip文件，然后解压缩就可以看到它所用到的所有图片了。

在解压出来的文件夹里面可以看到四个窗口的背景设计图：

player_skin.bmp ----- Player Wnd

Lyrics_skin.bmp ---- Lyrics Wnd

Playlist_skin.bmp --- Playlist Wnd

equalizer_skin.jpg --- Equalizer Wnd

文件夹中另外的图片就是Wnd上的按钮的图片了。

在Orange文件夹里面一共有三个XML配置文件。SKIN.XML，LYRIC.XML，PLAYLIST.XML，VISUAL.XML。

SKIN.XML设置了四个Wnd的大小，上面按钮摆放的坐标，长宽参数。按钮对应的图片等。还有一些其他的特性参数。例如：如果窗口需要伸缩，那么图片伸缩的部分是哪一部分，而其他的部分保持比列不变。

一般来说，PlayList和Lyrics窗口可伸缩。Equalizer和Player的窗口大小不变。因为我们看到在Equalizer窗口的Player窗口的背景图上中间部分并不是纯色，而是画有一些图案。这样一来伸缩的部位不是很好选择，如果选择中间伸缩的话，还是会改变图案的比例而是的窗口的设计比例失真。

对于Playlist和Lyrics窗口来说，设计的背景图比较简单，只是边框有一定的图案或者色彩变化，那么我们可以在窗口伸缩的时候，把窗口分成九部分来拉伸，主要拉伸的部位是中间那块纯色的部分。这样可以保持窗口的设计风格不变，图案比例不会失真。

LYRIC.XML文件里面写的参数是LYRIC窗口中需要用到的其他一些参数。譬如说窗口上字体样式，颜色等。不涉及到窗口上控件的参数。控件的配置参数都配置在SKIN文件里面。

PLAYLIST.XML文件也是一样，里面基本配置的是字体颜色样式等信息。

VISUAL.XML文件中配置的是在播放音乐的时候，可视化效果的参数。跟MediaPlayer的可视化效果配置一样。  

SKIN.XML详细内容如下：

<skin version="2" name="Orange" author="MagiColor" url="http://www.doggiehome.com/" email="mailto:[e-mail]" transparent_color="#ff00ff">
 <player_window image="player_skin.bmp">
      <icon position="1,1, 17, 17" icon="icon.ico"/>
      <play position="164, 39, 183, 58" image="play.bmp"/>
      <pause position="164, 39, 183, 58" image="pause.bmp"/>
      <stop position="145, 39, 164, 58" image="stop.bmp"/>
      <next position="202, 39, 221, 58" image="next.bmp"/>
      <prev position="183, 39, 202, 58" image="prev.bmp"/>
      <mute position="249, 39, 268, 58" image="mute.bmp"/>
      <open position="221, 39, 240, 58 " image="open.bmp"/>
      <equalizer position="152, 92, 188, 114" image="equalizer.bmp"/>
      <playlist position="188, 92, 224, 114" image="playlist.bmp"/>
      <lyric position="224, 92, 260, 114" image="lyric.bmp"/>
      <visual position="18, 24, 124, 84" />
      <minimize position="240, 3, 247, 10" image="minimize.bmp"/>
      <minimode position="253, 3, 260, 10" image="minimode.bmp"/>
      <exit position="266, 3, 273, 10" image="close.bmp"/>
      <progress position="145, 77, 267, 90" bar_image="" thumb_image="progress_thumb.bmp" fill_image="progress_fill.bmp"/>
      <volume position="274, 20, 283, 84" vertical="true" bar_image="" thumb_image="" fill_image="volume_fill.bmp"/>
      <info position="147, 20, 268, 31" color="#ff9933" font="simsong" font_size="12"/>
      <led position="175, 63, 235, 74" image="number.bmp" align="right"/>
      <stereo position="13, 98, 49, 109" color="#FF9014" font="simsong" font_size="12" align="left"/>
      <status position="59, 98, 129, 109" color="#FF9014" font="simsong" font_size="12" align="left"/>
   </player_window>

红色部分定义了Player窗口背景图上需要摆放的所有按钮和位置。
 
<mini_window image="mini-player.bmp">
  <play position="101, 3, 120, 22" image="play.bmp" />
  <pause position="101, 3, 120, 22" image="pause.bmp" />
  <stop position="82, 3, 101, 22" image="stop.bmp" />
  <next position="139, 3, 158, 22" image="next.bmp" />
  <prev position="120, 3, 139, 22" image="prev.bmp" />
  <open position="158, 3, 177, 22" image="open.bmp" />
  <mute position="186, 3, 205, 22" image="mute.bmp"/>
        <visual position="19, 2, 69, 23" />
  <icon position="0,4, 16, 14" icon="icon.ico"/>
  <exit position="218, 6, 225, 13" image="m-exit.bmp"/>
     <minimize position="211, 6, 218, 13" image="m-minimize.bmp"/>
  <lyric position="218, 13, 225, 20"  image="mini-lyric.bmp" />
        <minimode position="211, 13, 218, 20" image="fullmode.bmp" />
</mini_window>

   <equalizer_window position="0, 122, 283, 244" image="equalizer_skin.bmp" eq_interval="6">
      <close position="266, 3, 273, 10" image="close.bmp" align="right"/>
      <enabled position="5, 66, 41,88" image="eq_enabled.bmp"/>
      <profile position="5, 88, 41, 110" image="eq_profile.bmp"/>
      <reset position="41, 77, 77, 99" image="eq_reset.bmp"/>
      <balance position="11, 18, 72, 32" thumb_image="eq_thumb2.bmp" bar_image=""/>
      <surround position="11, 41, 72, 55" thumb_image="eq_thumb2.bmp" bar_image=""/>
      <preamp position="78, 18, 90, 109" thumb_image="eq_thumb.bmp" bar_image=""  fill_image="eqfactor_full.bmp"/>
      <eqfactor position="96, 18, 108, 109" thumb_image="eq_thumb.bmp" bar_image="" fill_image="eqfactor_full.bmp"/>
   </equalizer_window>
  
   <playlist_window position="0, 244, 283, 366" resize_rect="80, 30, 259, 70" image="playlist_skin.bmp" hilight="#0000ff">
      <close position="266, 3, 273, 10" image="close.bmp" align="right"/>
      <toolbar position="10, 96, 258, 108" image="playlist_toolbar.bmp" align="bottom+left"/>
      <scrollbar buttons_image="scrollbar_button.bmp" thumb_image="scrollbar_thumb.bmp" bar_image="scrollbar_bar.bmp" thumb_resize_center="4"/>
      <playlist position="14, 22, 270, 90"/>
   </playlist_window>
  
   <lyric_window position="283, 0, 566, 366 " resize_rect="60, 30, 259, 80" image="lyric_skin.bmp">
      <mini_border left_top_color="#626262" right_bottom_color="#353535" />
      <lyric position="14, 24, 272, 96"/>
      <ontop position="241, 3, 256, 10" image="ontop.bmp" align="right"/>
      <close position="266, 3, 273, 10" image="close.bmp" align="right"/>
   </lyric_window>

红色部分定义背景图和上面摆放的按钮。
</skin>

我可以看到Lyrics Wnd上需要摆放的按钮是一个关闭按钮和总在最前面的按钮。

按钮文件为：

设计方式：一个位图上面画了对应于按钮不同状态的多个小图，而不是一个按钮不同状态画多张图。

这样一来配置文件已经精确的设计了窗口的样式。程序需要对窗口的操作很多都根据配置文件来，这样可以使得程序没有定死窗口的尺寸，按钮位置等等。这样一来用户可以自己设计多种多样的窗口。

TTPLAYER心得之于MyCam

仔细分析完Skin.xml文件后可以知道窗口大致的设计方式是：

1. 不需要缩放的窗口大致就是按钮的摆放。

2. 需要缩放的窗口，先处理窗口比例不失真的缩放，然后处理按钮的摆放。

3. 按钮的动作响应和状态的变化（需要换图以指示状态的变化）是两种窗口都要处理的动作。

4. 根据实际，MyCam的Camera的图像PREVIEW窗口，可是设计成Lyrics样式的，需要缩放（比列不失真），需要总在最前。设计风格特征体现在四周。

5. 另外，一些控制操作可以设计一个类似Player窗口的小型控制面板，不需要缩放，设计风格需要华丽一些。需要摆放多个按钮，需要摆放ICON。另外需要类似于PlayList的POPUP菜单。

 

Sunny 2008-7-17 morning