效果展示

正文

libgdx官方有提供ui控件图片，github.com/libgdx/libg… 进入链接，依次点击红框

然后你会得到一个libgdx-1.11.0.zip，解压它你能在里面找到六个文件

在你libgdx项目的assets下新建文件夹"ui"，把那六个文件放进去，接着cv下面的代码，记得把类名改成你的类名，还有别丢了包名。

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.audio.AudioDevice;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.scenes.scene2d.Actor;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Slider;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.scenes.scene2d.utils.ChangeListener;
import com.badlogic.gdx.scenes.scene2d.utils.ChangeListener.ChangeEvent;
import com.badlogic.gdx.utils.viewport.FitViewport;

public class GameSuperClass extends ApplicationAdapter {
	
	
	Stage ui;
	Skin skin;
	float wavePanValue = 0;

	@Override
	public void create () {

		skin = new Skin(Gdx.files.internal("ui/uiskin.json"));
		ui = new Stage(new FitViewport(640, 400));

		Table table = new Table(skin);
		final Slider pan = new Slider(-1f, 1f, 0.1f, false, skin);
		pan.setValue(0);
		final Label panValue = new Label("0.0", skin);
		table.setFillParent(true);
		table.add("Pan");
		table.add(pan);
		table.add(panValue).width(100);

		ui.addActor(table);

		Gdx.input.setInputProcessor(ui);

		pan.addListener(new ChangeListener() {
			public void changed (ChangeEvent event, Actor actor) {
				wavePanValue = pan.getValue();
				panValue.setText("" + pan.getValue());
			}
		});

		
	}

	@Override
	public void resize (int width, int height) {
		ui.getViewport().update(width, height, true);
	}

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

	@Override
	public void dispose () {
		ui.dispose();
		skin.dispose();
		
	}
}

不出意外的话，你能得到这样的效果

仔细看你会发现上述代码里有这样一句

ui = new Stage(new FitViewport(640, 400));

这是一句非常Warning的写法，它把Stage限制成了一个小块，正常开发很少这样写，你可以把它改成下面这样

ui = new Stage(new StretchViewport(Gdx.graphics.getWidth(),Gdx.graphics.getHeight()));

记得倒包

import com.badlogic.gdx.utils.viewport.StretchViewport;

现在Stage才是整个屏幕，再次运行代码，你会发现控件变小了

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.audio.AudioDevice;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.freetype.FreeTypeFontGenerator;
import com.badlogic.gdx.scenes.scene2d.Actor;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Container;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Slider;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.scenes.scene2d.utils.ChangeListener;
import com.badlogic.gdx.scenes.scene2d.utils.ChangeListener.ChangeEvent;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.badlogic.gdx.utils.viewport.StretchViewport;

public class GameSuperClass extends ApplicationAdapter {
	
	Stage ui;
	Skin skin;
	float wavePanValue = 0;
    Slider pan;

	@Override
	public void create () {

		skin = new Skin(Gdx.files.internal("ui/uiskin.json"));
		ui = new Stage(new StretchViewport(Gdx.graphics.getWidth(),Gdx.graphics.getHeight()));

		Table table = new Table(skin);
		pan = new Slider(0f, 360f, 0.1f, false, skin);
		pan.setValue(0);
		
        
        
        int scal=5;
        pan.getStyle().background.setMinHeight(pan.getStyle().background.getMinHeight()*scal);
        //pan.getStyle().background.setMinWidth(400);//宽度这样改不了
        pan.getStyle().knob.setMinWidth(pan.getStyle().knob.getMinWidth()*scal);
        pan.getStyle().knob.setMinHeight(pan.getStyle().knob.getMinHeight()*scal);
        
        FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("LXGW.ttf"));
        FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
        parameter.size = 70;
        BitmapFont font = generator.generateFont(parameter);
        generator.dispose();

        Label.LabelStyle labelStyle = new Label.LabelStyle();
        labelStyle.font = font;
        
        Label label = new Label("Pan", labelStyle);
        Label panValue = new Label("0.0", labelStyle);
        
        table.add(label);
        
        table.setFillParent(true);
		table.add(pan).width(400);//添加Slider并设置长度（宽度）
		table.add(panValue).width(100);
        
        
		ui.addActor(table);

		Gdx.input.setInputProcessor(ui);

		pan.addListener(new ChangeListener() {
		public void changed (ChangeEvent event, Actor actor) {
				wavePanValue = pan.getValue();
				panValue.setText("" + pan.getValue());
			}
		});
        
		
	}

	@Override
	public void resize (int width, int height) {
		ui.getViewport().update(width, height, true);
	}

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

	@Override
	public void dispose () {
		ui.dispose();
		skin.dispose();
		
	}
}

改成这样就行了，记得开libgdx的附属库freetype，不然很多类你的编辑器会报错，这段代码里引用的LXGW.ttf你可以在github.com/lxgw/LxgwWe…