2014年11月17日游戏开发

cocos2d-x视频播放添加跳过按钮

之前做了个cocos2dx的视频播放扩展cocos2dx_videoview_extends, 一直都是点击屏幕就跳过视频, 这样玩家容易误操作. 一般的方法是添加一个”跳过”按钮

##Android google之后发现, SurfaceView 是没法在添加一个子view的, 也就是说没办法 SurfaceView.addView(View)

但是我们的SurfaceView是添加到Activity 获取到的ViewGroup里的, 那我们能否添加另外一个View到这个ViewGroup里, 并且层次在SurfaceView之上呢? 经过试验是可以的.

final VideoView videoView = new VideoView(instance);
videoView.setLuaOnFinishCallback(luaCallback);
try {
	AssetFileDescriptor afd = instance.getAssets().openFd(
			name);
	videoView.setVideo(afd);
	final ViewGroup group = (ViewGroup) instance
			.getWindow().getDecorView();
	group.addView(videoView);
	videoView.setZOrderMediaOverlay(true);
	
	TextView skipButton = new TextView(this.appActivity);
	skipButton.setText("跳过 >>");
	skipButton.setTextColor(Color.argb(180, 255, 255, 255));
	skipButton.setTextSize(20);
	group.addView(skipButton);

} catch (IOException e) {
	e.printStackTrace();
	videoView.onVideoFinish();
}

于是重构一下, 把button添加到videoView中管理, 因为需要统一将videoView和button在播放结束时移除

public VideoView(AppActivity appActivity) {

	super(appActivity);
	this.appActivity = appActivity;
	Log.i(TAG, "new VideoView");
	final SurfaceHolder holder = getHolder();
	holder.addCallback(this);

	this.addSkipButton();
}

private void addSkipButton(){
	skipButton = new TextView(this.appActivity);
	skipButton.setText("跳过 >>");
	skipButton.setTextColor(Color.argb(180, 255, 255, 255));
	skipButton.setTextSize(20);

	skipButton.setOnClickListener(new View.OnClickListener() {
		public void onClick(View v) {
			....
		}
	});
	
	//获取ViewGroup 并添加button
	((ViewGroup) this.appActivity.getWindow().getDecorView()).addView(
			skipButton);
}

运行代码之后奇怪了, button并没有显示出来? debug之后发现, 是因为, 原来ViewGroup先添加了videoView 再添加button, 那么button自然在videoView 之上; 修改完之后, 顺序颠倒了!

那么可以在surfaceCreated 回调函数添加代码:

skipButton.bringToFront();

还有个问题, 就是现在添加的button是在左上角, 如何做定位? 利用 LayoutParams, 查看Cocos2dxActivity源码, 发现其使用的是FrameLayout, 那么好, 利用其进行定位:

FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
skipButton.getWidth(), skipButton.getHeight());
params.leftMargin = (int) (getWidth() * 0.8);
params.topMargin = (int) (getHeight() * 0.86);
skipButton.setLayoutParams(params);

##iOS

iOS则简单的多, 因为播放器的view 是可以 addSubview 添加子view的, 于是:

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button addTarget:self action:@selector(handleTap:) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"Skip >>" forState:UIControlStateNormal];
button.frame = CGRectMake(player.view.frame.size.width - 200, player.view.frame.size.height - 50, 160.0, 40.0);
[player.view addSubview:button];