Android StudioとlibGDXでアプリ開発 練習編4

libGDXにはUnityのAsset Storeのようなものはありませんが、代わりにskinが多数用意されています。

Free LibGDX Scene2D GUI skins.
https://github.com/czyzby/gdx-skins

今回はこれを使って、リスト画面を作ります。

まずメインのファイルを書き換えます。
これまではMyGdxGameクラスに直接描画処理を記載してきましたが、別ファイルにしていきます。
今後、複数の画面を簡単に切り替えるようにするためです。

core\src\com\mygdx\game\MyGdxGame.java

package com.mygdx.game;

import com.badlogic.gdx.Game;

public class MyGdxGame extends Game {

    @Override
    public void create() {
        // メインスクリーンをセット
        setScreen(new MainScreen(this));
    }
}

MyGdxGameクラスのスーパークラスがApplicationListenerからGameに変わりました。
そしてcreateメソッドでMainScreenをsetScreenするだけです。
MainScreenクラスの中身は以下になります。

core\src\com\mygdx\game\MainScreen.java

package com.mygdx.game;


import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Table;

public class MainScreen implements Screen {

    // 呼び出し元のインスタンス
    private MyGdxGame game;
    // ステージ
    private Stage stage;
    // レイアウトのコンテナー
    private Table container;

    public MainScreen(MyGdxGame game) {
        // 呼び出し元のインスタンスを保持
        this.game = game;
        // ステージを生成
        this.stage = new Stage();
        Gdx.input.setInputProcessor(this.stage);
        // スキンを初期化
        Skin skin = new Skin(Gdx.files.internal("skin/default/uiskin.json"));

        // レイアウトを初期化
        this.container = new Table();
        // ステージにレイアウトを追加
        this.stage.addActor(container);
        // レイアウトの大きさを最大化
        this.container.setFillParent(true);

        // テーブルレイアウトを生成
        Table table = new Table();

        // テーブルレイアウトを含むスクロールペインを生成
        final ScrollPane scroll = new ScrollPane(table, skin);

        // テーブルに余白を設定
        table.pad(10).defaults().expandX().space(4);
        for (int i = 0; i < 100; i++) {
            // 行を追加
            table.row();
            // ラベルを生成して追加
            table.add(new Label(i + " row ", skin));
        }
        // レイアウトにスクロールペインを追加
        container.add(scroll).expand().fill().colspan(4);
        // レイアウトに余白を設定
        container.row().space(10).padBottom(10);
    }

    @Override
    public void show() {

    }

    @Override
    public void render(float delta) {
        // 描画処理
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        this.stage.act(Gdx.graphics.getDeltaTime());
        this.stage.draw();
    }

    @Override
    public void resize(int width, int height) {
        // 縦横切り替えなどで画面の大きさが変わった際の処理
        this.stage.getViewport().update(width, height, true);
    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void hide() {

    }

    @Override
    public void dispose() {
        // 解放処理
        this.stage.dispose();
    }
}

次の場所にフォルダを作成します。

android\assets\skin\default

最後に以下のサイトの[DOWNLOAD. ALL OF THEM.]からスキンをダウンロードします。

https://github.com/czyzby/gdx-skins

今回はdefaultスキンを利用します。
ダウンロードしたzipファイルを解凍し、default\skinフォルダ内のファイルをAndroid Studioからassets\skin\defaultに配置します。

ここで一度実行してみます。
※下記動画はフルスクリーンで再生すると文字がはっきり見えます

テキストが並ぶ単純な画面が表示されます。スクロールすることもできます。
AndroidはXML、iOSはStoryboard、HTML5はHTMLでレイアウトを定義するのが一般的ですがlibGDXではプログラム内で作ります。
プログラム内の1つのレイアウトで各プラットフォーム向けのレイアウトを組むことができますので一石二鳥です。

まとめ

今回はラベルとdefaultスキンしか使いませんでしたが、例えばリスト表示はランキングなど、多くのアプリで使える機能です。
ここまでは簡単なのですが、実はこの状態からカスタマイズしていくのはそれなりに大変です。
次回はこの画面をカスタマイズしていきたいと思います。

カテゴリー: Android タグ: , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です