高仿QQMusic(2008)播放器,VS2008环境下开发,功能陆续开发中,上图先(右边那个乐库没有啥内容,临时弄个网页放上去充数)
软件UI开发方法我正在整理中,尽量探索出既简单又功能强大的UI制作方法,随后会发布方法与大家讨论的,最近比较忙......
[2月13日更新]
首先感谢园友对本随笔的关注!!!!
浅谈一下我关于此软件的UI的制作方法,我的文笔不好,说话可能有点罗嗦,谅解哈!
要想做出好看的界面,素材准备是第一步,我因为超级喜欢QQMusic的界面,萌发了仿造它的想法。本人美工不咋好,直接用QQMusic的皮肤做素材是个不错的主意(安装此软件后找它的皮肤很简单吧,^-^)。安装目录下的QQMusic2008文件夹下都是皮肤用到的图片。
有了素材,还要推敲QQMusic是怎么样把这些散乱的图片组织起来的,QQMusic2008\Player文件夹内有个config.xml文件,我的分析就从这里入手,看下它的内容:
这里我只截取了主窗口以及该窗口上几个按钮的XML组织。<Window width="290" height="360" minWidth="290" maxWidth="2048" minHeight="100" maxHeight="2048" clippingColor="#FF00FF" style="hard" >
这里定义主窗体的宽、高等属性,以下定义主窗体的背景图的属性
<Picture id="Pic_BG_Left" image="..\Common\mainboard.bmp" x="5" y="23" w="92" h="123" zIndex="0" left="0" top="0" width="92" height="123" relative="lt" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
<Picture id="Pic_BG_Mid" image="..\Common\mainboard.bmp" x="98" y="23" w="5" h="123" zIndex="0" left="92" top="0" width="76" height="123" relative="ltr" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
<Picture id="Pic_BG_Right" image="..\Common\mainboard.bmp" x="103" y="23" w="122" h="123" zIndex="0" left="168" top="0" width="122" height="123" relative="tr" horizontalAlignment="Stretch" verticalAlignment="Stretch" />
mainboard.bmp图片如下:
上面XML里的具体属性我们可以不理会,只需要明白这是把图片按照左上角为坐标原点分成Pic_BG_Left、 Pic_BG_Mid、 Pic_BG_Right三部分,将来我们在做窗体时将用这三部分作为窗体左、中、右的背景。
Pic_BG_Left和Pic_BG_Right这两块是包含钝角背景的,终于明白QQ软件里的窗体为什么都是明显区别于普通软件的矩形窗体了。
当然我们不需要完全照搬QQ软件里的XML内容,我们自己定义XML时只需要把所取图片的坐标位置、宽度、高度、左距、右距、是否透明这些属性写上,随后我们按照自己定义的规则顺序读取出来供使用就OK了,所谓兵无定势也。
下面我把自己制作的XML配置文件里主窗体的代码帖出来,和QQMUSIC里的XML稍微有差异,但思想一致
此XML里的属性的含义我将在随后的窗体制作中顺便介绍!
罗嗦半天了,手头有点事,回头继续写,本文会不断更新,下次我将叙述一下如何简单利用这个图片把主窗体绘制出来,脑子有点乱,吃饭去......