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

长平狐 发布于 2013/11/25 11:37
阅读 713
收藏 0

前面有一篇文章介绍了用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;

public class App implements ApplicationListener {
	Stage stage;
	@Override
	public void create() {
		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
	public void dispose() {
		stage.dispose();
	}

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

	@Override
	public void resize(int width, int height) {
	}

	@Override
	public void pause() {
	}

	@Override
	public void resume() {
	}
}

运行效果如下:

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;

public class App implements ApplicationListener {
	Stage stage;

	@Override
	public void create() {
		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
	public void dispose() {
		stage.dispose();
	}

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

	@Override
	public void resize(int width, int height) {
	}

	@Override
	public void pause() {
	}

	@Override
	public void resume() {
	}
}

效果是一样的:

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


原文链接:http://www.cnblogs.com/htynkn/archive/2012/08/26/libgdx_22.html
加载中
返回顶部
顶部