vitamio小试牛刀（2）- 横屏全屏播放，竖屏指定高度
这是关于 vitamio 使用的第二篇小文章，主要实现了如下效果：
竖屏的效果，给视频源指定了自己需要的高度：
旋转屏幕横屏之后的效果，使视频源充满屏幕：
接下来记录一下实现的步骤：
1、首先，我们写好布局文件，如下：
activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<io.vov.vitamio.widget.VideoView
android:id = "@+id/video"
android:layout_width="match_parent"
android:layout_height="match_parent" />
RelativeLayout>MainActivity.java
public class MainActivity extends AppCompatActivity
{
String playUrl = "";
VideoView videoView;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide();
Vitamio.initialize(this);
if(Vitamio.initialize(this))
{
videoView = (VideoView) findViewById(R.id.video);
videoView.setVideoURI(Uri.parse(playUrl));
MediaController controller = new MediaController(this);
videoView.setMediaController(controller);
videoView.start();
}
}
}运行效果如下，图片略大。。。：
竖屏：
横屏：
可以看出，横屏之后即使 match_parent 也不能让视屏源全屏
首先，针对竖屏，我们先将 外层布局设置一个固定的值，即：
"match_parent"
android:layout_height="100dp">
...
此时效果如下：
可以看到视频源高度明显地变小，说明改变videoview的父布局高度是可行的，接着，我们将父布局的高度依然改为 match_parent，然后改变的是 videoview的高度，改成 20dp、100dp、200dp不等，即：
"match_parent">
.vov.vitamio.widget.VideoView
android:id = "@+id/video"
android:layout_width="match_parent"
android:layout_height="20dp" />
效果如下：
发现跟没有改变是一模一样的。
接下来是横屏全屏的实现，当我发现 xml中设置 match_parent 无效的时候，首先想到的是代码中通过 LayoutParams 来设置，如下：
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<io.vov.vitamio.widget.VideoView
android:id="@+id/video"
android:layout_width="match_parent"
android:layout_height="match_parent" />
RelativeLayout>MainActivity.java
@Override
public void onConfigurationChanged(Configuration newConfig)
{
if(getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE)
{
Log.d("haha","切换横屏");
setFullScreen();
}
}
private void setFullScreen()
{
Log.d("haha","调用设置全屏");
RelativeLayout.LayoutParams layoutParams1 = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.MATCH_PARENT);
videoView.setLayoutParams(layoutParams1);
}此时视频源的横屏全屏效果即可实现。
另外，可以看到，第二个视频进度条并不在视频源的最底部，通过看 MediaController.java 可以知道，进度条是以PopupWindow的方式添加到屏幕到视频源的，代码如下：
/**
* Show the controller on screen. It will go away automatically after
* 'timeout' milliseconds of inactivity.
*
* @param timeout The timeout in milliseconds. Use 0 to show the controller
* until hide() is called.
*/
public void show(int timeout) {
if (!mShowing && mAnchor != null && mAnchor.getWindowToken() != null) {
if (mPauseButton != null)
mPauseButton.requestFocus();
if (mFromXml) {
setVisibility(View.VISIBLE);
} else {
int[] location = new int[2];
mAnchor.getLocationOnScreen(location);
Rect anchorRect = new Rect(location[0], location[1],
location[0] + mAnchor.getWidth(), location[1] + mAnchor.getHeight());
mWindow.setAnimationStyle(mAnimStyle);
setWindowLayoutType();
mWindow.showAtLocation(mAnchor, Gravity.NO_GRAVITY, anchorRect.left, anchorRect.bottom);
}
mShowing = true;
if (mShownListener != null)
mShownListener.onShown();
}
updatePausePlay();
mHandler.sendEmptyMessage(SHOW_PROGRESS);
if (timeout != 0) {
mHandler.removeMessages(FADE_OUT);
mHandler.sendMessageDelayed(mHandler.obtainMessage(FADE_OUT), timeout);
}
}注释写的很清楚，这里对 controller的显示进行了操作，
参考 http://blog.csdn.net/luojing0208/article/details/53537508 的注释，那么由于我使用了Relativelayout ，所以在 MediaController 添加了一下构造方法：
public MediaController(Context context, boolean isFromXml, View container)
{
super(context);
initController(context);
mFromXml = isFromXml;
mRoot = makeControllerView();
if(container instanceof RelativeLayout)
{
RelativeLayout.LayoutParams p = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT);
p.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
mRoot.setLayoutParams(p);
((RelativeLayout)container).addView(mRoot);
}
}那么即可实现controller在视频源底部
接着我们通过调用即可实现横屏全屏播放，竖屏指定高度，代码如下，很短：
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/rela"
android:layout_width="match_parent"
android:layout_height="200dp">
<io.vov.vitamio.widget.VideoView
android:id="@+id/video"
android:layout_width="match_parent"
android:layout_height="match_parent" />
RelativeLayout>
LinearLayout>MainActivity.java
public class MainActivity extends AppCompatActivity
{
VideoView videoView;
private RelativeLayout mRelatviLayout;
LinearLayout linearLayout;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide();
Vitamio.initialize(this);
if(Vitamio.initialize(this))
{
videoView = (VideoView) findViewById(R.id.video);
mRelatviLayout = (RelativeLayout) findViewById(R.id.rela);
linearLayout = (LinearLayout) findViewById(R.id.line);
videoView.setVideoURI(Uri.parse(playUrl));
MediaController controller = new MediaController(this,true,mRelatviLayout);
// MediaController controller = new MediaController(this);
videoView.setMediaController(controller);
videoView.start();
}
}
@Override
public void onConfigurationChanged(Configuration newConfig)
{
if(getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE)
{
Log.d("haha","切换横屏");
setFullScreen();
}
else
{
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
600);
mRelatviLayout.setLayoutParams(layoutParams);
RelativeLayout.LayoutParams layoutParams1 = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT);
videoView.setLayoutParams(layoutParams1);
}
super.onConfigurationChanged(newConfig);
}
private void setFullScreen()
{
Log.d("haha","调用设置全屏");
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT);
mRelatviLayout.setLayoutParams(layoutParams);
RelativeLayout.LayoutParams layoutParams1 = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT,
RelativeLayout.LayoutParams.MATCH_PARENT);
videoView.setLayoutParams(layoutParams1);
}
}最后，为了防止videoview的白边问题，重写了一下videoview，在直播的全屏效果时，遇到白边也可以通过这样重写解决，道理是一样的，如下：
public class MyVideoView extends VideoView
{
public MyVideoView(Context context)
{
super(context);
}
public MyVideoView(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public MyVideoView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
Log.d("haha","调用onMeasure");
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if(widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY)
{
setMeasuredDimension(widthSize,heightSize);
}
else
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}所以，只需将 xml 文件中 videoview 改成 MyVideoView 即可 ：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/rela"
android:layout_width="match_parent"
android:layout_height="200dp">
<com.example.z.vitamiotest.MyVideoView
android:id="@+id/video"
android:layout_width="match_parent"
android:layout_height="match_parent" />
RelativeLayout>
LinearLayout>