首页 > 代码库 > Libgdx游戏引擎之ScrollPane组件

Libgdx游戏引擎之ScrollPane组件

1、运行界面



这是一个不显示滚动条的水平ScrollPanel,通过手势控制ScrollPanel水平移动

2、示例代码

import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.scenes.scene2d.Actor;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.InputListener;
import com.badlogic.gdx.scenes.scene2d.Touchable;
import com.badlogic.gdx.scenes.scene2d.ui.Image;
import com.badlogic.gdx.scenes.scene2d.ui.ImageButton;
import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable;
import com.swallowgames.supermario.game.Assets;
import com.swallowgames.supermario.screen.MainScreen;
import com.swallowgames.supermario.utils.Utils;

public class ThemeScrollPanel extends ScrollPane{

	private ButtonClickListener clickListener;
	private MainScreen mainScreen;
	
	public ThemeScrollPanel(Actor widget, Skin skin) {
		super(widget, skin);
	}
	
	public ThemeScrollPanel (Actor widget, ScrollPaneStyle style) {
		super(widget, style);
	}
	
	public ThemeScrollPanel init(){
		
		clickListener = new ButtonClickListener();
		
		Table table = new Table();
		table.debug();
		
		ImageButton themeBackground = new ImageButton(new TextureRegionDrawable(Assets.instance.assetUI.theme1),
				new TextureRegionDrawable(Assets.instance.assetUI.theme1p));
		themeBackground.setUserObject(0);
		themeBackground.addCaptureListener(clickListener);
		table.add(themeBackground);
		table.columnDefaults(0);
		
		themeBackground = new ImageButton(new TextureRegionDrawable(Assets.instance.assetUI.theme2),
				new TextureRegionDrawable(Assets.instance.assetUI.theme2p));
		themeBackground.setUserObject(1);
		themeBackground.setTouchable(Touchable.disabled);
		themeBackground.addCaptureListener(clickListener);
		Image lock = new Image(new TextureRegionDrawable(Assets.instance.assetUI.lock));
		lock.setPosition((themeBackground.getWidth() - lock.getWidth())/2, (themeBackground.getHeight() - lock.getHeight())/2);
		themeBackground.addActor(lock);
		table.add(themeBackground).width(themeBackground.getWidth()).height(themeBackground.getHeight());
		table.columnDefaults(1);
		
		themeBackground = new ImageButton(new TextureRegionDrawable(Assets.instance.assetUI.theme3),
				new TextureRegionDrawable(Assets.instance.assetUI.theme3p));
		themeBackground.setUserObject(2);
		themeBackground.setTouchable(Touchable.disabled);
		themeBackground.addCaptureListener(clickListener);
		lock = new Image(new TextureRegionDrawable(Assets.instance.assetUI.lock));
		lock.setPosition((themeBackground.getWidth() - lock.getWidth())/2, (themeBackground.getHeight() - lock.getHeight())/2);
		themeBackground.addActor(lock);
		table.add(themeBackground).width(themeBackground.getWidth()).height(themeBackground.getHeight());;
		table.columnDefaults(2);
		
		themeBackground = new ImageButton(new TextureRegionDrawable(Assets.instance.assetUI.theme4),
				new TextureRegionDrawable(Assets.instance.assetUI.theme4p));
		themeBackground.setUserObject(3);
		themeBackground.setColor(Color.GRAY);
		themeBackground.setTouchable(Touchable.disabled);
		themeBackground.addCaptureListener(clickListener);
		lock = new Image(new TextureRegionDrawable(Assets.instance.assetUI.lock));
		lock.setPosition((themeBackground.getWidth() - lock.getWidth())/2, (themeBackground.getHeight() - lock.getHeight())/2);
		themeBackground.addActor(lock);
		lock.setColor(Color.GRAY);
		table.add(themeBackground).width(themeBackground.getWidth()).height(themeBackground.getHeight());;
		table.columnDefaults(3);
		
		table.pack();
		
		setWidget(table);
		setScrollingDisabled(false, true);
		addListener(new InputListener() {
			public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
				event.stop();
				return true;
			}
		});
		setSmoothScrolling(true);
		setFlickScroll(false);
		setSize(themeBackground.getWidth()*2, table.getHeight());
		setPosition(Utils.xAxisCenter(getWidth()), Utils.yAxisCenter(getHeight()) - 20);
		return this;
	}
	
	public void setMainScreen(MainScreen mainScreen) {
		this.mainScreen = mainScreen;
	}


	class ButtonClickListener extends ClickListener {
		@Override
		public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
			super.touchUp(event, x, y, pointer, button);
			Actor actor = event.getListenerActor();
			Integer themeIndex = (Integer)actor.getUserObject();
			mainScreen.addLevelWindow(themeIndex);
		}
	}
}
3、手势监听

import com.badlogic.gdx.input.GestureDetector.GestureAdapter;

public class MainScreenGestureListener extends GestureAdapter{

	private LevelWindow levelWindow;
	private ThemeScrollPanel themeScrollPanel;
	
	float panx = 0f;
	float pany = 0f;
	float panDeltaX = 0f;
	float panDeltaY = 0f;
	
	@Override
	public boolean pan(float x, float y, float deltaX, float deltaY) {
		if(levelWindow != null && levelWindow.getColor().a != 0f){
			this.panx = x;
			this.pany = y;
			this.panDeltaX = deltaX;
			this.panDeltaY = deltaY;
			return true;
		}else if(themeScrollPanel != null && themeScrollPanel.isVisible()){
			themeScrollPanel.setScrollX(themeScrollPanel.getScrollX()-deltaX);
			return true;
		}else{
			return false;
		}
	}

	public void setLevelWindow(LevelWindow levelWindow) {
		this.levelWindow = levelWindow;
	}

	public void setThemeScrollPanel(ThemeScrollPanel themeScrollPanel) {
		this.themeScrollPanel = themeScrollPanel;
	}

	@Override
	public boolean panStop(float x, float y, int pointer, int button) {
		if(levelWindow != null && levelWindow.isVisible()){
			if(panx == x && pany ==y && panDeltaX < 0f){//向左滑动
				levelWindow.nextPage();
			}
			if(panx == x && pany ==y && panDeltaX > 0f){//向右滑动
				levelWindow.prevPage();
			}
			return true;
		}else{
			return false;
		}
	}
}
4、代码说明

ScrollPane里面的内容是几张图片,使用的是一个Table组件布局。

需要注意的几句代码:

//控制位水平滑动

setScrollingDisabled(false, true);

//需要加上,具体也不知道是干叼的

addListener(new InputListener() {
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
event.stop();
return true;
}
});

//看方法名就知道是干嘛的
setSmoothScrolling(true);

//不显示自带的滚动条
setFlickScroll(false);

手势监听器,不清楚的可以去<a href=http://www.mamicode.com/"www.baidu.com">百度</a>

@Override
public boolean pan(float x, float y, float deltaX, float deltaY) {
if(levelWindow != null && levelWindow.getColor().a != 0f){
this.panx = x;
this.pany = y;
this.panDeltaX = deltaX;
this.panDeltaY = deltaY;
return true;
}else if(themeScrollPanel != null && themeScrollPanel.isVisible()){
themeScrollPanel.setScrollX(themeScrollPanel.getScrollX()-deltaX);
return true;
}else{
return false;
}
}

这段代码,其中themeScrollPanel.setScrollX(themeScrollPanel.getScrollX()-deltaX);就是通过手势来移动滚动组件,

deltaX就是移动的速度。

Libgdx游戏引擎之ScrollPane组件