17.常用UI界面（二）_小虎老师丶

http://blog.sina.com.cn/u/2483934474

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

17.常用UI界面（二）

(2013-05-06 10:05:27)

标签：

android开发

分类： libGDX开发教程

本文使用的libgdx是0.98版本，可能和最新版有一些不同地方。全文内容仅供参考。

上一次我们学习了libgdx中UI界面的使用，其中给我们主要学习了SKIN类的一些基本概念，也初步的了解了SKIN的用法和原理，但是这些并不是SKIN类的全部，libgdx给我们封装的东西，远远不止这些，在上一次我也介绍了关于SKIN是可以和JSON一起使用的，那么今天我们就来学习下SKIN类的这个用法。

Libgdx游戏引擎(1群)：187378034

Libgdx游戏引擎(2群)：148848483

Libgdx游戏引擎(3群): 79168470

视频教程

1.JSON文件

JSON定义：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，类似于XML。

JSON详细介绍：关于JSON，这里土豆引用Mars老师的视频教程，希望可以帮助大家可以理解。（PS:土豆也是Mars老师的忠实粉丝）

视频教程：

2.libgdx中的JSON封装

关于封装JSON，libgdx做了详细的封装，由于今天我们介绍的是UI方面，而且也是介绍SKIN类，那么我们就单独介绍关于Skin方面的JSON封装。

API介绍：由于JSON文件，是以键值对的方式保存数据的，这样，JSON文件在libgdx中也是一样，它的书写基本格式，在API中也是给我们写好了，我们只要按照他给的固定格式就可以制作JSON文件。

JSON文件详解：

（1）JSON文件可以根据类名来描述不同的文件，类名是Java类的完全限定名称的对象，其中名字是每个资源的名称。资源是JSON对象的实际资源，JSON实际上通过名字，拿到对应着的字段名称的资源的类。

如图：

http://s13/mw690/940dd50agdc05a21d4eec&690

（2）JSON文件设置，首先,定义一些颜色和字体。其次,定义一些文本按钮样式。字段的下、上、和检查类型的绘图。

如图：

http://s1/mw690/940dd50agdc07074848a0&690

（3）关于颜色，如果设置了颜色的RGB值，那么该处的值为1，如果没有设置默认设置为0.如上图

（4）Bitmapfont相关。首先，libgdx中默认宣召JSON文件设定的Bitmaofont文件是在JSON文件通目录一下寻找的，如果没有找到才在内部路径中寻找，一般是将fnt文件和JSON文件放置在一起，这样方便使用。当然了，默认获得fnt文件队友的png图片也是同理的，如果没有在JSON文件目录下找到的话，那么会在内部路径内寻找同名字的png。

如图：

http://s8/mw690/940dd50agdc0722926a57&690

（5）TintedDrawable 常用来控制按钮的抬起和按下。原理同上。

如图：

http://s6/mw690/940dd50agdc07336c8365&690

3.实例演示

（1）首先用Herio建立一个fnt文件，支持文字输入。具体实现，可以参照土豆的博文《中文显示与汉字绘制》。

如图：

http://s6/bmiddle/940dd50ag7c6722076fa5&690

（2) 新建一个JSON文件。

1.首先，建立一个txt文件命名为“default.txt”.

如图：

http://s8/mw690/940dd50agdc0762edb3f7&690

2.将扩展名改为“.json”同时用记事本打开，在起内部书写我们需要使用的资源和键值对。

如图：

http://s8/bmiddle/940dd50agdc076e293e47&690

3.选取一张UI方面的图片（图片可以自己PS做），同时配置Atlas，也是新建文本文件然后输入配置信息，但是要将“.png”图片在配置中传入。

如图：（左：Atlas、右：控件图）

http://s2/bmiddle/940dd50agdc0780313f11&690 http://s4/mw690/940dd50agdc07823f8323&690

（2）新建一个项目，命名为UItest，将我们只做好的“uiskin.json”、"uiskin.atlas"、“uiskin.png”都放入data文件夹中，同时将使用的素材也放入其中。

PS:由于skin默认是读取相同名字的altas和png图片，所以不仅要将他们放置在同一个文件夹下，同时名字也必须一样否则会报错。

如图：（使用素材：一只猫、一张图片）

（猫）（土豆）

http://s3/mw690/940dd50agdc07a768ef42&690 http://s3/small/940dd50agdc07a7b449b2&690

（3）新建一个String的数组便以后使用，同时初始化需要用到的对象。

如图：

http://s14/mw690/940dd50agdc07b704676d&690

（4）实例化对象，同时将“.JSON”文件传入，实例化舞台、纹理区域等。

如图：

http://s16/bmiddle/940dd50agdc07c426b81f&690

（5）实例化按钮，同时传入ButtonStyle中“toggle”样式。

如图：

http://s3/bmiddle/940dd50agdc07e3387b52&690

（6）创建不同控件，Label、CheckBox、Slider等。

如图：

http://s3/bmiddle/940dd50agdc07efea5832&690

（7）创建滚动条、密码输入框、列表栏等。

如图：

http://s2/mw690/940dd50ag7c67321a3941&690

(8)创建window控件，将所有的控件全部加入到window中，方便管理，最后加入舞台。

如图：

http://s2/bmiddle/940dd50agdc07f9e82211&690

（9）加入监听，打印出一些东西，方便我们查看控件使用效果。

如图：

http://s3/mw690/940dd50agdc07fe8d2162&690

4.完整代码

（1）MyGdxUI类中的代码。

package com.potato;

import com.badlogic.gdx.ApplicationListener;

import com.badlogic.gdx.Gdx;

import com.badlogic.gdx.Input.Keys;

import com.badlogic.gdx.graphics.Color;

import com.badlogic.gdx.graphics.GL10;

import com.badlogic.gdx.graphics.OrthographicCamera;

import com.badlogic.gdx.graphics.Pixmap;

import com.badlogic.gdx.graphics.Texture;

import com.badlogic.gdx.graphics.Pixmap.Format;

import com.badlogic.gdx.graphics.Texture.TextureFilter;

import com.badlogic.gdx.graphics.g2d.BitmapFont;

import com.badlogic.gdx.graphics.g2d.Sprite;

import com.badlogic.gdx.graphics.g2d.SpriteBatch;

import com.badlogic.gdx.graphics.g2d.TextureRegion;

import com.badlogic.gdx.scenes.scene2d.Actor;

import com.badlogic.gdx.scenes.scene2d.Stage;

import com.badlogic.gdx.scenes.scene2d.ui.Button;

import com.badlogic.gdx.scenes.scene2d.ui.CheckBox;

import com.badlogic.gdx.scenes.scene2d.ui.Dialog;

import com.badlogic.gdx.scenes.scene2d.ui.Image;

import com.badlogic.gdx.scenes.scene2d.ui.ImageButton;

import com.badlogic.gdx.scenes.scene2d.ui.Label;

import com.badlogic.gdx.scenes.scene2d.ui.List;

import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane;

import com.badlogic.gdx.scenes.scene2d.ui.SelectBox;

import com.badlogic.gdx.scenes.scene2d.ui.Skin;

import com.badlogic.gdx.scenes.scene2d.ui.Slider;

import com.badlogic.gdx.scenes.scene2d.ui.SplitPane;

import com.badlogic.gdx.scenes.scene2d.ui.Table;

import com.badlogic.gdx.scenes.scene2d.ui.TextButton;

import com.badlogic.gdx.scenes.scene2d.ui.TextField;

import com.badlogic.gdx.scenes.scene2d.ui.Window;

import com.badlogic.gdx.scenes.scene2d.ui.Button.ButtonStyle;

import com.badlogic.gdx.scenes.scene2d.ui.ImageButton.ImageButtonStyle;

import com.badlogic.gdx.scenes.scene2d.ui.TextButton.TextButtonStyle;

import com.badlogic.gdx.scenes.scene2d.ui.TextField.TextFieldListener;

import com.badlogic.gdx.scenes.scene2d.utils.ChangeListener;

import com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable;

import com.badlogic.gdx.scenes.scene2d.utils.ChangeListener.ChangeEvent;

public class MyGdxUI implements ApplicationListener {

 String[] listEntries = {"potato1", "potato2", "potato3", "potato4",

 "potato5", "potato6", "potato7", "potato8"};

 Skin skin;

 Stage stage;

 SpriteBatch batch;

 Texture texture1;

 Texture texture2;

 Actor root;

 Label fpsLabel;

   @Override

   public void create() {  
     
 batch = new SpriteBatch();

 skin = new Skin(Gdx.files.internal("data/uiskin.json"));

 texture1 = new Texture(Gdx.files.internal("data/cat.jpg"));

 texture2 = new Texture(Gdx.files.internal("data/potato.jpg"));

 TextureRegion image = new TextureRegion(texture1);

 TextureRegion imageFlipped = new TextureRegion(image);

 imageFlipped.flip(true, true);

 TextureRegion image2 = new TextureRegion(texture2);

 stage = new Stage(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), false);

 Gdx.input.setInputProcessor(stage);

 //按钮

 ImageButtonStyle style = new ImageButtonStyle(skin.get(ButtonStyle.class));

 style.imageUp = new TextureRegionDrawable(image);

 style.imageDown = new TextureRegionDrawable(imageFlipped);

 ImageButton iconButton = new ImageButton(style);

 Button buttonMulti = new TextButton("Button", skin, "toggle");

 Button imgButton = new Button(new Image(image), skin);

 Button imgToggleButton = new Button(new Image(image), skin, "toggle");

 Label myLabel = new Label("this
is some text.", skin);

 myLabel.setWrap(true);

 Table t = new Table();

 t.row();

 t.add(myLabel);

 t.layout();

 CheckBox checkBox = new CheckBox("TEXT", skin);

 final Slider slider = new Slider(0, 10, 1, false, skin);

 TextField textfield = new TextField("", skin);

 textfield.setMessageText("POTATO");

 SelectBox dropdown = new SelectBox(new String[] {"POTATO-Android", "POTATO-Windows", "POTATO-Linux", "POTATO-OSX"}, skin);

 Image imageActor = new Image(image2);

 ScrollPane scrollPane = new ScrollPane(imageActor);

 List list = new List(listEntries, skin);

 ScrollPane scrollPane2 = new ScrollPane(list, skin);

 scrollPane2.setFlickScroll(false);

 SplitPane splitPane = new SplitPane(scrollPane, scrollPane2, false, skin, "default-horizontal");

 fpsLabel = new Label("fps:", skin);

 // configures an
example of a TextField in password mode.

 final Label passwordLabel = new Label("Password
:", skin);

 final TextField passwordTextField = new TextField("", skin);

 passwordTextField.setMessageText("POTATO");

 passwordTextField.setPasswordCharacter('*');

 passwordTextField.setPasswordMode(true);

 //
window.debug();

 Window window = new Window("POTATO", skin);

 window.setPosition(220, 100);

 window.defaults().spaceBottom(10);

 window.row().fill().expandX();

 window.add(iconButton);

 window.add(buttonMulti);

 window.add(imgButton);

 window.add(imgToggleButton);

 window.row();

 window.add(checkBox);

 window.add(slider).minWidth(100).fillX().colspan(3);

 window.row();

 window.add(dropdown);

 window.add(textfield).minWidth(100).expandX().fillX().colspan(3);

 window.row();

 window.add(splitPane).fill().expand().colspan(4).maxHeight(200);

 window.row();

 window.add(passwordLabel).colspan(2);

 window.add(passwordTextField).minWidth(100).expandX().fillX().colspan(2);

 window.row();

 window.add(fpsLabel).colspan(4);

 window.pack();

 stage.addActor(window);

 textfield.setTextFieldListener(new TextFieldListener() {

 public void keyTyped (TextField textField, char key) {

   if (key == '\n') textField.getOnscreenKeyboard().show(false);

     }

 });

 slider.addListener(new ChangeListener() {

 public void changed (ChangeEvent event, Actor actor) {

   Gdx.app.log("UITest", "slider:
" + slider.getValue());

     }

 });

 iconButton.addListener(new ChangeListener() {

 public void changed (ChangeEvent event, Actor actor) {

   new Dialog("Potato", skin, "dialog") {

 protected void result (Object object) {

 System.out.println("Chosen:
" + object);

 }

   }.text("Do you like Potato?").button("Yes", true).button("No", false).key(Keys.ENTER, true)

 .key(Keys.ESCAPE, false).show(stage);

     }

 });

   }

   @Override

   public void dispose() {

 stage.dispose();

 skin.dispose();

 texture1.dispose();

 texture2.dispose();

   }

   @Override

   public void render() {  
     
 Gdx.gl.glClearColor(0.2f, 0.2f, 0.2f, 1);

 Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

 fpsLabel.setText("fps:
" + Gdx.graphics.getFramesPerSecond());

 stage.act(Math.min(Gdx.graphics.getDeltaTime(), 1 / 30f));

 stage.draw();

 Table.drawDebug(stage);

   }

   @Override

   public void resize(int width, int height) {

 stage.setViewport(width, height, false);

   }

   @Override

   public void pause() {

   }

   @Override

   public void resume() {

   }

}

效果图：（同样是视频，方便观看）

点击观看

源码下载：http://pan.baidu.com/share/link?shareid=437197&uk=3456175979

写在最后,关于libgdx中UI界面设置，就给大家介绍到这里，希望对大家有所帮助。下一篇是是关于libgdx框架中《粒子编辑器》的博文，我会介绍下粒子编辑器的使用。如果大家有什么问题可以加我QQ：316344618，一起讨论下。PS:希望大家可以多加评论，方便交流～

------------奋斗小土豆丶

2013 年 5 月 06 日

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：16.常用UI界面（一）

后一篇：18.粒子编辑器（一）

新浪BLOG意见反馈留言板　欢迎批评指正