android游戏开发框架libgdx的使用(二十二)—利用TABLELAYOUT进行布局

26 8月

前面有一篇文章介绍了用TWL进行布局,最近做其他java的东西接触到了table-layout,用着很不错,仔细看来一下文档,原来还支持libgdx。

简单试用了一下,比TWL好使多了。

TABLELAYOUT简介

tablelayout-logo

TABLELAYOUT是一个轻量级的UI组件布局库。使用表格实现,有点像HTML的TABLE。

它支持libgdx, Swing, Android和TWL。支持Java API和配置文件两种方式。

同时有个配套的编辑器http://table-layout.googlecode.com/svn/wiki/jws/editor.jnlp

使用配置文件

其实最好的方法应该是使用配置文件,这样便于修改,还可以利用工具进行可视化编辑。但是libgdx对于配置文件的支持好像没有很到位(或者是版本修改等等问题)。

所以先介绍配置文件方式。配置文件的具体书写格式请参考table-layout主页。

打开编辑器,绘制一个简单的游戏界面,包含一个开始按钮和设置按钮。

libgdx-layout-1

配置文件如下:


那个debug是显示边框的,方便调试。空间以对应的类型为结尾,比如StartButton就是按钮。

第二行定义的是全局样式。还有很多其他样式可以定义,我个人觉得很Css盒子模型很接近。

将文件保存为main.layout。

因为TableLayout是在Stage中使用的,所以很其他的Actor的用法雷同。先添加一个table,在从table中获取TableLayout。然后定义控件,并和配置文件中的名字一一对应注册进去,最后加载配置文件。

先新建一个table并添加到stage中


然后获取TableLayout


创建控件以后进行注册


其中第一个是配置文件中的名称,第二个是你代码中的名称。

最后加载配置文件


 

看一下完整的代码


运行效果如下:

libgdx-layout-2

使用API配置

使用代码控制其实和配置文件差不多,我比较推荐先用编辑器生成配置文件,然后在根据配置文件写代码。

通过table.defaults()设置全局样式,就是配置中的第二行。参照刚才的配置文件,我们的代码应该是:


通过table.add()添加


配置文件中的—-代码新起一行,代码中用table.row()实现。

完整代码如下:


效果是一样的:

libgdx-layout-3

再谈Skin中的中文支持

参考前文使用TTF字库实现了中文支持,但是Skin默认支持的是Hiero。

要使用TTF字库也可以,不过就不能使用配置文件模式了。

我一般比较偷懒,先读入配置文件,在新建一个Skin,将其中的Font改成TTF字库的Font就可以了。


效果:

libgdx-layout-4

说实话这个效果真心没有英文看着好,所以推荐还是制作Hiero来用吧。

写在最后

使用TABLELAYOUT好处相当明显,它使用逻辑性的表格而不是像素定位,极大的方便了开发。同时也增加了自适应性。而且一次学习可以用到多个地方,比如Android和Swing。

Libgdx是一个相当活跃的项目,很多代码和包都发生了变化。本博客的代码一定是运行成功以后截图分享给大家的,但是不能保证随着时间推移它依然有效。比如Skin部分就发生了非常大的变化。

遇到找不到包或者没有对应方法的时候请先看看官方说明,重要的变动会在声明中提到的,比如0.96就变动了本文介绍的TABLELAYOUT和SCENCE2D。或者在社区搜索一下,一般都有人提问。

本文使用的Libgdx是0.96发行版…不要使用nightly,变动太多了。

参考:http://www.badlogicgames.com/wordpress/?p=2483

发表评论

电子邮件地址不会被公开。