android 仿EF看视频弹出练习功能

第一次看到英孚iPad上的视频练习，感觉好有创意，让我们学习英语起来更加的有激情。而且不仅仅是在EF上有。相信在其它的学校肯定也会有的。

以上也我尝试把它写出来的原因了。

以下让我们来看看它的效果是怎么样子的？

它是怎么实现的呢？

首先我们看下布局文件的内容：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="com.adthvideo.ui.MainActivity$PlaceholderFragment" >


    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="3dp"
        android:layout_weight="6" >


        <TextView
            android:id="@+id/tv_class_title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="课题：印象泰国" />


        <FrameLayout
            android:id="@+id/fl_frame"
            android:layout_width="fill_parent"
            android:layout_height="400dp"
            android:layout_below="@id/tv_class_title" >


            <SurfaceView
                android:id="@+id/mySurfaceView"
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:layout_below="@id/tv_class_title" />


            <LinearLayout
                android:id="@+id/ll_pretreatment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:orientation="vertical" >


                <ProgressBar
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal" />


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="正在解析視頻..." />
            </LinearLayout>
        </FrameLayout>


        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/fl_frame"
            android:background="@drawable/test_widget_bg" >


            <Button
                android:id="@+id/play"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="3dp"
                android:background="@drawable/player_pause_highlight" />


            <TextView
                android:id="@+id/play_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@id/play"
                android:textColor="#ffffff"
                android:textSize="12sp" />


            <SeekBar
                android:id="@+id/seekBar"
                style="@style/player_progressBarStyleHorizontal"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_toLeftOf="@+id/play_end_time"
                android:layout_toRightOf="@+id/play_time" />


            <TextView
                android:id="@+id/play_end_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="3dp"
                android:textColor="#ffffff"
                android:textSize="12sp" />
        </RelativeLayout>
    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/rl_answer"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="3dp"
        android:layout_weight="4"
        android:visibility="gone" >


        <TextView
            android:id="@+id/tv_title_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp" />


        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv_title_list"
            android:layout_marginTop="5dp" />


        <Button
            android:id="@+id/btn_answer1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv_title"
            android:layout_marginTop="3dp"
            android:background="#C0C0C0"
            android:visibility="invisible" />


        <Button
            android:id="@+id/btn_answer2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/btn_answer1"
            android:layout_marginTop="3dp"
            android:background="#C0C0C0"
            android:visibility="invisible" />


        <Button
            android:id="@+id/btn_answer3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/btn_answer2"
            android:layout_marginTop="3dp"
            android:background="#C0C0C0"
            android:visibility="invisible" />


        <Button
            android:id="@+id/btn_submit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="20dp"
            android:layout_marginRight="20dp"
            android:text="下一题" />
    </RelativeLayout>


</LinearLayout>

当然有练习题目。这里就创建了一个Practice对象。内容例如以下：

package com.adthvideo.bean;


public class Practice {


	private String title_list;
	private String title;
	private String issue_1;
	private String issue_2;
	private String issue_3;
	private String time;
	private boolean flag;


	public Practice(String time, String title_list, String title, String issue_1,
			String issue_2, String issue_3) {
		super();
		this.time = time;
		this.title_list = title_list;
		this.title = title;
		this.issue_1 = issue_1;
		this.issue_2 = issue_2;
		this.issue_3 = issue_3;
		this.flag = false;
	}




	public String getTime() {
		return time;
	}




	public void setTime(String time) {
		this.time = time;
	}


	public String getTitle_list() {
		return title_list;
	}
	public void setTitle_list(String title_list) {
		this.title_list = title_list;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getIssue_1() {
		return issue_1;
	}
	public void setIssue_1(String issue_1) {
		this.issue_1 = issue_1;
	}
	public String getIssue_2() {
		return issue_2;
	}
	public void setIssue_2(String issue_2) {
		this.issue_2 = issue_2;
	}
	public String getIssue_3() {
		return issue_3;
	}
	public void setIssue_3(String issue_3) {
		this.issue_3 = issue_3;
	}


	public boolean getFlag() {
		return flag;
	}


	public void setFlag(boolean _flag) {
		flag = _flag;
	}
}

最后另一个activity是这种：

package com.adthvideo.ui;


import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;
import com.adthvideo.bean.Practice;
import com.adthvideo.utils.TabletUtil;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.pm.ActivityInfo;
import android.graphics.Color;
import android.media.AudioManager;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnCompletionListener;
import android.media.MediaPlayer.OnErrorListener;
import android.media.MediaPlayer.OnPreparedListener;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.KeyEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.SurfaceHolder.Callback;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.SeekBar.OnSeekBarChangeListener;


public class MainActivity extends Activity implements OnClickListener{


	private SurfaceView mSurfaceView = null;
	private MediaPlayer mMediaPlayer = null;
	private Handler handler;
	Thread thread;
	private TextView play_time;
	private TextView play_end_time;
	private SeekBar mSeekBar;
	/**
	 * 当前位置
	 */
	private int currentPosition = 0;
	private boolean flag;
	private Button play; 
	private TextView tv_title_list;
	private TextView tv_title;
	private Button btn_submit;
	private Button btn_answer1;
	private Button btn_answer2;
	private Button btn_answer3;
	private List<Practice> list;
	private RelativeLayout rl_answer;
	private LinearLayout ll_pretreatment;
	@SuppressWarnings("deprecation")
	@SuppressLint("HandlerLeak") 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE); 
		setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);//横屏
		boolean isTablet = TabletUtil.isTablet(this);
		if(isTablet){
			setContentView(R.layout.fragment_main);
			Exitlication.getInstance().addActivity(MainActivity.this);  
			play_time = (TextView) findViewById(R.id.play_time);
			play_end_time = (TextView) findViewById(R.id.play_end_time);
			play = (Button) findViewById(R.id.play);
			play.setOnClickListener(this);
			rl_answer = (RelativeLayout) findViewById(R.id.rl_answer);
			ll_pretreatment = (LinearLayout) findViewById(R.id.ll_pretreatment);
			btn_submit = (Button) findViewById(R.id.btn_submit);
			tv_title_list = (TextView) findViewById(R.id.tv_title_list);
			tv_title = (TextView) findViewById(R.id.tv_title);
			btn_answer1 = (Button) findViewById(R.id.btn_answer1);
			btn_answer2 = (Button) findViewById(R.id.btn_answer2);
			btn_answer3 = (Button) findViewById(R.id.btn_answer3);
			btn_submit.setOnClickListener(this);
			btn_answer1.setOnClickListener(this);
			btn_answer2.setOnClickListener(this);
			btn_answer3.setOnClickListener(this);
			handler=new Handler(){
				public void handleMessage(Message msg){
					switch (msg.what){
					case 0:
						int a=msg.getData().getInt("1");
						int b=msg.getData().getInt("2");
						set(b,a);
						//					System.out.println("time:"+time+"
");//time:0:01
						break;
					case 1:
						String title = msg.getData().getString("title");
						String issue_1 = msg.getData().getString("issue_1");
						String issue_2 = msg.getData().getString("issue_2");
						String issue_3 = msg.getData().getString("issue_3");
						String title_list = msg.getData().getString("title_list");
						MainActivity.this.btn_answer1.setText(issue_1);
						btn_answer1.setVisibility(View.VISIBLE);
						btn_answer2.setVisibility(View.VISIBLE);
						btn_answer3.setVisibility(View.VISIBLE);
						btn_answer1.setClickable(true);
						btn_answer2.setClickable(true);
						btn_answer3.setClickable(true);
						btn_answer1.setSelected(false);
						btn_answer2.setSelected(false);
						btn_answer3.setSelected(false);
						btn_answer1.setBackgroundColor(Color.rgb(192, 192, 192));
						btn_answer2.setBackgroundColor(Color.rgb(192, 192, 192));
						btn_answer3.setBackgroundColor(Color.rgb(192, 192, 192));
						MainActivity.this.btn_answer2.setText(issue_2);
						MainActivity.this.btn_answer3.setText(issue_3);
						MainActivity.this.tv_title_list.setText(title_list);
						MainActivity.this.tv_title.setText(title);
						play.setBackgroundResource(R.drawable.player_play_highlight);
						rl_answer.setVisibility(View.VISIBLE);
						break;
					}
				}
				private void set(int progress, int max) {
					//				tv_time.setText(toTime(progress) + "/"
					//						+ toTime(max));
					play_time.setText(toTime(progress));
					play_end_time.setText(toTime(max));
				}
			};
			mSeekBar = (SeekBar) findViewById(R.id.seekBar);
			mSeekBar.setEnabled(false);
			mSeekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {


				@Override
				public void onStopTrackingTouch(SeekBar seekBar) {
					if (mMediaPlayer != null) {
						int progress = seekBar.getProgress();
						mMediaPlayer.seekTo(progress);
					}
				}


				@Override
				public void onStartTrackingTouch(SeekBar seekBar) {


				}


				@Override
				public void onProgressChanged(SeekBar seekBar, int progress,
						boolean fromUser) {


				}
			});


			mSurfaceView = (SurfaceView) findViewById(R.id.mySurfaceView);
			mSurfaceView.getHolder().setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
			mSurfaceView.getHolder().addCallback(new Callback() {


				@Override
				public void surfaceDestroyed(SurfaceHolder holder) {
					System.out.println("surfaceDestroyed");
					if (mMediaPlayer != null && mMediaPlayer.isPlaying()) {
						currentPosition = mMediaPlayer.getCurrentPosition();
					}
					stop();
				}


				@Override
				public void surfaceCreated(SurfaceHolder holder) {
					System.out.println("surfaceCreated");
					if(currentPosition==0){
						play(0);
					}else if (currentPosition > 0) {
						play(currentPosition);
					}
				}


				@Override
				public void surfaceChanged(SurfaceHolder holder, int format,
						int width, int height) {
					System.out.println("surfaceChanged");


				}
			});


			list = new ArrayList<Practice>();
			Practice mPractice1 = new Practice("0:10","问题1/3"
					,"1、You can play ________ the clean dog after class.","A.with","B.in","C.at");
			Practice mPractice2 = new Practice("0:30","问题2/3"
					,"2、They are reading about an English boy ________ the newspaper."
					,"A.on","B.at","C.in");
			Practice mPractice3 = new Practice("1:30","问题3/3"
					,"3、Can I have ________ postcards?
"
					,"A.any","B.a","C.some");
			list.add(mPractice1);
			list.add(mPractice2);
			list.add(mPractice3);
		}else{
			setContentView(R.layout.fragment_miniphone_main);
		}
	}


	private String toTime(int progress) {
		StringBuffer sb = new StringBuffer();
		int s = (progress / 1000) % 60;
		int m = progress / 60000;
		sb.append(m).append(":");
		if (s < 10) {
			sb.append(0);
		}
		sb.append((progress / 1000) % 60);
		return sb.toString();
	}
	@SuppressLint("ShowToast") 
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		int v_id = v.getId();
		switch (v_id) {
		case R.id.play:
			pause();
			break;
		case R.id.btn_submit:
			//提交：
			boolean isplayflag = false;
			if(this.btn_answer1.isSelected()){
				Toast.makeText(MainActivity.this, "您点中了"+this.btn_answer1.getText(), Toast.LENGTH_LONG).show();
				isplayflag = true;
			}
			else if(this.btn_answer2.isSelected()){
				Toast.makeText(MainActivity.this, "您点中了"+this.btn_answer2.getText(), Toast.LENGTH_LONG).show();
				isplayflag = true;
			}
			else if(this.btn_answer3.isSelected()){
				Toast.makeText(MainActivity.this, "您点中了"+this.btn_answer3.getText(), Toast.LENGTH_LONG).show();
				isplayflag = true;
			}else{
				isplayflag = false;
				Toast.makeText(MainActivity.this, "请回答问题，才干进入下一个题目！
", Toast.LENGTH_LONG).show();
			}
			if(isplayflag){
				mMediaPlayer.start();
				rl_answer.setVisibility(View.GONE);
				play.setBackgroundResource(R.drawable.player_pause_highlight);
				play.setClickable(true);
				flag = true;
			}
			break; 
		case R.id.btn_answer1:
			this.btn_answer1.setBackgroundColor(Color.GRAY);
			this.btn_answer1.setSelected(true);
			this.btn_answer2.setClickable(false);
			this.btn_answer3.setClickable(false);
			break;
		case R.id.btn_answer2:
			this.btn_answer2.setBackgroundColor(Color.GRAY);
			this.btn_answer1.setClickable(false);
			this.btn_answer2.setSelected(true);
			this.btn_answer3.setClickable(false);
			break;
		case R.id.btn_answer3:
			this.btn_answer3.setBackgroundColor(Color.GRAY);
			this.btn_answer2.setClickable(false);
			this.btn_answer3.setSelected(true);
			this.btn_answer1.setClickable(false);
			break;
		default:
			break;
		}
	}


	@SuppressLint("ShowToast") 
	private void stop() {
		if (mMediaPlayer != null) {
			mMediaPlayer.stop();
			mMediaPlayer.release();
			mMediaPlayer = null;
		}
	}


	@SuppressLint("ShowToast") 
	private void pause() {
		if (mMediaPlayer != null && mMediaPlayer.isPlaying()) {
			mMediaPlayer.pause();
			play.setBackgroundResource(R.drawable.player_play_highlight);
			//			mSeekBar.setEnabled(false);
		}
		else {
			mMediaPlayer.start();
			play.setBackgroundResource(R.drawable.player_pause_highlight);
			//			mSeekBar.setEnabled(true);
		}
	}


	@SuppressLint("ShowToast") 
	private void play(final int currentPosition2) {
		try {
			mMediaPlayer = new MediaPlayer();
			mMediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
			mMediaPlayer.setDisplay(mSurfaceView.getHolder());
			mMediaPlayer.setDataSource("http://www.fantasticthaitaste.com/streams/thaifood.mp4");
			mMediaPlayer.prepareAsync();
			//			mSeekBar.setEnabled(true);
			mMediaPlayer.setOnPreparedListener(new OnPreparedListener() {


				@Override
				public void onPrepared(MediaPlayer mp) {
					mMediaPlayer.start();
					final int max = mMediaPlayer.getDuration();
					ll_pretreatment.setVisibility(View.GONE);
					mSeekBar.setMax(max);
					mMediaPlayer.seekTo(currentPosition2);
					thread = new Thread() {
						public void run() {
							flag = true;
							while (flag) {
								try {
									if(mMediaPlayer==null){
										return;
									}
									int progress = mMediaPlayer.getCurrentPosition();
									mSeekBar.setProgress(progress);
									Message message = new Message();
									Bundle bundle=new Bundle();
									message.setData(bundle);
									bundle.putInt("1", max);
									bundle.putInt("2", progress);
									message.what = 0;
									handler.sendMessage(message);


									for(int i = 0; i<list.size(); i++){
										Practice p = list.get(i);
										String time = p.getTime();
										String title_list = p.getTitle_list();
										String title = p.getTitle();
										String issue_1 = p.getIssue_1();
										String issue_2 = p.getIssue_2();
										String issue_3 = p.getIssue_3();


										boolean timeMark = toTime(progress).equals(time);
										if(timeMark&&p.getFlag()==false){
											if(mMediaPlayer != null && mMediaPlayer.isPlaying()) {
												mMediaPlayer.pause();
												Message msg1 = new Message();
												Bundle mBundle = new Bundle();
												msg1.setData(mBundle);
												mBundle.putString("title_list", title_list);
												mBundle.putString("title", title);
												mBundle.putString("issue_1", issue_1);
												mBundle.putString("issue_2", issue_2);
												mBundle.putString("issue_3", issue_3);
												msg1.what = 1;
												handler.sendMessage(msg1);
											}
											play.setClickable(false);
											p.setFlag(true);
										} 
									}
									//									System.out.println("time:"+time+",porgress:"+progress+"
");
									try {
										Thread.sleep(500);
									} catch (InterruptedException e) {
										e.printStackTrace();
									}
								} catch (Exception e) {
									// TODO: handle exception
									e.printStackTrace();
								}
							}
						}
					};
					thread.start();
				}
			});
			mMediaPlayer.setOnCompletionListener(new OnCompletionListener() {
				@Override
				public void onCompletion(MediaPlayer mp) {
					//					bt_play.setEnabled(true);
				}
			});
			mMediaPlayer.setOnErrorListener(new OnErrorListener() {


				@Override
				public boolean onError(MediaPlayer mp, int what, int extra) {
					//bt_play.setEnabled(true);
					flag = false;
					return false;
				}
			});
		} catch (Exception e) {
			e.printStackTrace();
			Toast.makeText(this, "播放失败", 1).show();
		}
	}


	/** 
	 * 菜单、返回键响应 
	 */  
	@Override  
	public boolean onKeyDown(int keyCode, KeyEvent event) {  
		// TODO Auto-generated method stub  
		if(keyCode == KeyEvent.KEYCODE_BACK)  
		{    
			exitBy2Click();      //调用双击退出函数  
		}      
		return false;  
	}    
	/** 
	 * 双击退出函数 
	 */  
	private static Boolean isExit = false;  


	private void exitBy2Click() {  
		Timer tExit = null;    
		if (isExit == false) {  
			isExit = true; // 准备退出    
			Toast.makeText(this, "再按一次退出程序", Toast.LENGTH_SHORT).show();  
			tExit = new Timer();  
			tExit.schedule(new TimerTask() {     
				@Override  
				public void run() {    
					isExit = false; // 取消退出  
				}  
			}, 2000); // 假设2秒钟内没有按下返回键，则启动定时器取消掉刚才运行的任务    
		} else {  
			Exitlication.getInstance().exit(); 
		}  
	}  


}

以上的内容是就能够实现啦。


源代码下载例如以下：
http://download.csdn.net/detail/hehaiminginadth/8903029