Android game development framework libgdx (22)-layout using tablelayout

Previous ArticleArticleThis article introduces how to use TWL for layout. Recently, other Java things have come into contact with table-layout. It is quite helpful to use it. After careful consideration, the document still supports libgdx.

A simple trial is much better than TWL.

Introduction to tablelayout

Tablelayout is a lightweight UI component layout library. Using tables is a bit like HTML tables.

It supports libgdx, swing, Android, and TWL. Supports Java APIs and configuration files.

At the same time there is a matching editor http://table-layout.googlecode.com/svn/wiki/jws/editor.jnlp

Use the configuration file

In fact, the best way is to use the configuration file, so that it is easy to modify, you can also use tools for visual editing. However, libgdx does not seem to provide adequate support for configuration files (or version modification issues ).

So we will first introduce the configuration file method. For the specific writing format of the configuration file, see the table-layout homepage.

Open the editor and draw a simple game interface that contains a start button and a setting button.

The configuration file is as follows:

 
Debug * Spacing: 12 padding: 5 align: center --- [startbutton] width: 200 Height: 60 --- [prefbutton] width: 200 Height: 60
 

That debug shows borders for debugging. The space ends with the corresponding type. For example, startbutton is the button.

The second row defines global styles. There are many other styles that can be defined. I personally think the CSS box model is very similar.

Save the file as main. layout.

Because tablelayout is used in stage, it is similar to other actor. Add a table first and obtain tablelayout from the table. Then define the control, register it with the name in the configuration file, and load the configuration file.

Create a new table and add it to stage.

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

Then retrieve tablelayout

 
Tablelayout layout = table. gettablelayout ();
 

Register after creating the control

 
Layout. Register ("startbutton", startbutton );
 

The first is the name in the configuration file, and the second is yourCode.

Finally load the configuration file

 
Layout. parse (GDX. Files. Internal ("layout/Main. layout"). readstring ());
 

 

check the complete code.

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; @ overridepublic void create () {stage = new stage (GDX. graphics. getwidth (), GDX. graphics. getheight (), true); skin Skin = new skin (GDX. files. internal ("skin/uiskin. JSON "); 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 () ;}@ overridepublic void dispose () {stage. dispose () ;}@ overridepublic void render () {GDX. GL. glclear (gl10.gl _ color_buffer_bit); stage. act (GDX. graphics. getdeltatime (); stage. draw () ;}@ overridepublic void resize (INT width, int height) {}@ overridepublic void pause () {}@ overridepublic void resume (){}}

The running effect is as follows:

Use API Configuration

Code control is similar to a configuration file. I recommend that you generate a configuration file with the editor and write code based on the configuration file.

Set the global style through table. defaults (), which is the second row in the configuration. With reference to the configuration file, our code should be:

 
Table. defaults (). Space (12). Align ("center"). Pad (5 );
 

Use table. Add () to add

 
Table. Add (startbutton). Width (200). Height (60 );
 

In the configuration file --- the code starts a new line and is implemented using table. Row () in the code.

The complete code is as follows:

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; @ overridepublic void create () {stage = new stage (GDX. graphics. getwidth (), GDX. graphics. getheight (), true); skin Skin = new skin (GDX. files. internal ("skin/uiskin. JSON "); 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) ;}@ overridepublic void dispose () {stage. dispose () ;}@ overridepublic void render () {GDX. GL. glclear (gl10.gl _ color_buffer_bit); stage. act (GDX. graphics. getdeltatime (); stage. draw () ;}@ overridepublic void resize (INT width, int height) {}@ overridepublic void pause () {}@ overridepublic void resume (){}}

The results are the same:

Let's talk about Chinese support in skin.

Refer to the previous article and use the TTF font library to implement Chinese support, but skin supports Hiero by default.

You can use the TTF font, but you cannot use the configuration file mode.

I am generally relatively lazy. Read the configuration file first, create a new skin, and change the font to the font of the 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 );
 

Effect:

To be honest, this effect is really not as good as English, so we recommend using Hiero.

Conclusion

The advantage of using tablelayout is quite obvious. It uses logical tables instead of pixel positioning, which greatly facilitates development. It also increases adaptability. In addition, one learning can be used in multiple places, such as Android and swing.

Libgdx is a very active project, and many code and packages have changed. The code of this blog must be shared with you after it runs successfully, but it cannot be guaranteed that it will still work over time. For example, the skin part changes a lot.

If the package cannot be found or there is no corresponding method, please refer to the official instructions. Important changes will be mentioned in the statement. For example, 0.96 changes the tablelayout and scence2d described in this article. OrCommunitySearch, and some people usually ask questions.

The libgdx used in this article is the 0.96 release... don't use it. There are too many changes.

Reference: http://www.badlogicgames.com/wordpress? P = 2483