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

26 8月

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2012/08/26/libgdx_22/

前面有一篇文章介绍了用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
*spacing:12 padding:5 align:center

---
[StartButton] width:200 height:60
---
[PrefButton] width:200 height:60

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

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

将文件保存为main.layout。

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

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

Table table =new Table(skin);
stage.addActor(table);

然后获取TableLayout

TableLayout layout = table.getTableLayout();

创建控件以后进行注册

layout.register("StartButton", StartButton);

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

最后加载配置文件

layout.parse(Gdx.files.internal("layout/main.layout").readString());

 

看一下完整的代码

package com.cnblogs.htynkn;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.stbtt.TrueTypeFontFactory;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.ui.tablelayout.Table;
import com.badlogic.gdx.scenes.scene2d.ui.tablelayout.TableLayout;

publicclass App implements ApplicationListener {
Stage stage;
@Override
publicvoidcreate() {
stage =new Stage(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(),
true);

Skin skin =new Skin(Gdx.files.internal("skin/uiskin.json"));
Table table =new Table(skin);
table.width = Gdx.graphics.getWidth();
table.height = Gdx.graphics.getHeight();

stage.addActor(table);
TableLayout layout = table.getTableLayout();
TextButton StartButton =new TextButton("Start game", skin);
layout.register("StartButton", StartButton);

TextButton PrefButton =new TextButton("Settings", skin);
layout.register("PrefButton", PrefButton);

layout.parse(Gdx.files.internal("layout/main.layout").readString());
}

@Override
publicvoiddispose() {
stage.dispose();
}

@Override
publicvoidrender() {
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}

@Override
publicvoidresize(int width,int height) {
}

@Override
publicvoidpause() {
}

@Override
publicvoidresume() {
}
}

运行效果如下:

libgdx-layout-2

使用API配置

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

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

table.defaults().space(12).align("center").pad(5);

通过table.add()添加

table.add(StartButton).width(200).height(60);

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

完整代码如下:

package com.cnblogs.htynkn;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.stbtt.TrueTypeFontFactory;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.ui.tablelayout.Table;

publicclass App implements ApplicationListener {
Stage stage;

@Override
publicvoidcreate() {
stage =new Stage(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(),
true);

Skin skin =new Skin(Gdx.files.internal("skin/uiskin.json"));
Table table =new Table(skin);
table.width = Gdx.graphics.getWidth();
table.height = Gdx.graphics.getHeight();
table.defaults().space(12).align("center").pad(5);
TextButton StartButton =new TextButton("Start game", skin);
table.add(StartButton).width(200).height(60);
table.row();
TextButton PrefButton =new TextButton("Settings", skin);
table.add(PrefButton).width(200).height(60);

stage.addActor(table);
}

@Override
publicvoiddispose() {
stage.dispose();
}

@Override
publicvoidrender() {
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}

@Override
publicvoidresize(int width,int height) {
}

@Override
publicvoidpause() {
}

@Override
publicvoidresume() {
}
}

效果是一样的:

libgdx-layout-3

再谈Skin中的中文支持

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

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

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

Skin skin1 =new Skin(Gdx.files.internal("skin/uiskin.json"));
Skin skin =new Skin();
skin.addResource("default-font", font);
TextButtonStyle buttonStyle = skin1.getStyle("default",
TextButtonStyle.class);
buttonStyle.font = font;
skin.addStyle("default", buttonStyle);

效果:

libgdx-layout-4

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

写在最后

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

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

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

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

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

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2012/08/26/libgdx_22/

发表评论

您的电子邮箱地址不会被公开。