vitamio小试牛刀（2）- 横屏全屏播放，竖屏指定高度

这是关于 vitamio 使用的第二篇小文章，主要实现了如下效果：

竖屏的效果，给视频源指定了自己需要的高度：

旋转屏幕横屏之后的效果，使视频源充满屏幕：

接下来记录一下实现的步骤：

1、首先，我们写好布局文件，如下：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <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 也不能让视屏源全屏
首先，针对竖屏，我们先将 外层布局设置一个固定的值，即：

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp">

...

</RelativeLayout>

此时效果如下：

可以看到视频源高度明显地变小，说明改变videoview的父布局高度是可行的，接着，我们将父布局的高度依然改为 match_parent，然后改变的是 videoview的高度，改成 20dp、100dp、200dp不等，即：

<RelativeLayout
    android:layout_height="match_parent">
    <io.vov.vitamio.widget.VideoView
        android:id = "@+id/video"
        android:layout_width="match_parent"
        android:layout_height="20dp" />
</RelativeLayout>

效果如下：

发现跟没有改变是一模一样的。

接下来是横屏全屏的实现，当我发现 xml中设置 match_parent 无效的时候，首先想到的是代码中通过 LayoutParams 来设置，如下：
activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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>