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

转载声明：http://www.cnblogs.com/htynkn/archive/2012/08/26/libgdx_22.html

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

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

TABLELAYOUT简介

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

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

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

使用配置文件

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

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

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

图片分享：

配置文件如下：

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() {
    }
}

运行效果如下:

图片分享：

使用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() {
    }
}

效果是一样的：

再谈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);

效果：

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

写在最后

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

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

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

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

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