全屏YouTube播放器中系统用户界面隐藏的工具栏叠加层

时间:2016-01-29 22:28:33

标签: android android-layout youtube-api android-youtube-api

我在我的活动中使用YouTubePlayerFragment,并尝试在播放器全屏时使用应用栏(也称为操作栏)覆盖播放器。我按照YouTube播放器API" Overlay ActionBar Demo"中的指南和示例进行操作。 sample application和YouTubePlayerFragment文档(详情如下)。

当我从Activity延伸并使用核心ActionBar时,所有这一切都正常。但是,当我切换到使用支持AppCompatActivityToolbar时,会出现一些问题:

  • 工具栏位于状态栏和导航栏下方
  • 当工具栏位于其上时,播放器不再播放

似乎播放器全屏模式用于将操作栏视为系统UI的一部分(以及状态栏和导航栏),在定位和叠加方面,但不再使用工具栏。

对于为什么会发生这种情况或如何使用工具栏在全屏模式下正确覆盖YouTube播放器的任何想法?我意识到工具栏只是另一种观点,我可能会强制它调整大小并在状态栏下重新定位,我可以设置一个listener for system UI changes并相应地显示和隐藏我的工具栏,但我希望有一个更清洁的解决方案,我错过了。

这是一个截图:

Toolbar overlay YouTube player

更多细节:我能够在" Overlay ActionBar Demo"中重现这种行为。示例应用(ActionBarDemoActivity),包含以下更改:

  • 延长AppCompatActivity
  • 将导入从android.app.ActionBar更改为android.support.v7.app.ActionBar
  • 将工具栏添加到布局

    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <view
            class="com.examples.youtubeapidemo.ActionBarDemoActivity$ActionBarPaddedFrameLayout"
            android:id="@+id/view_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
        ...
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/material_deep_teal_500" />
    
    </FrameLayout>
    
  • 将主题更改为Theme.AppCompat.Light.NoActionBar并添加windowActionBarOverlay

    <style name="OverlayActionBarTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowActionBarOverlay">true</item>
        <item name="windowActionBarOverlay">true</item>
    </style>
    
  • 将工具栏设置为onCreate()

    中的操作栏
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    

请注意,示例应用也执行以下操作(我没有更改这些内容):

  • 实施YouTubePlayer.OnFullscreenListener
  • 不全屏时扩展布局并设置填充,以便内容显示在工具栏下方

    @Override
    public void onFullscreen(boolean fullscreen) {
        viewContainer.setEnablePadding(!fullscreen);
        ...        
    }
    
    public static final class ActionBarPaddedFrameLayout extends FrameLayout {
    
        public void setEnablePadding(boolean enable) {
              paddingEnabled = enable;
              requestLayout();
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int topPadding =
            paddingEnabled && actionBar != null && actionBar.isShowing() ? actionBar.getHeight() : 0;
        setPadding(0, topPadding, 0, 0);
    
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
    
  • 设置YouTube播放器全屏控制标记

    player.addFullscreenControlFlag(YouTubePlayer.FULLSCREEN_FLAG_CUSTOM_LAYOUT);
    
  • 处理配置更改

    <activity
        ...
        android:configChanges="keyboardHidden|orientation|screenSize"
        ...
    </activity>
    

3 个答案:

答案 0 :(得分:2)

我怀疑这是一个错误。我为布局问题提交了一份新的错误报告,并在现有报告中添加了一条评论,说明支持ActionBar /工具栏被视为非法叠加。

与此同时,作为一种解决方法,我正在做以下事情:

布局问题

正如Troy建议的那样,我将android:fitsSystemWindows="true"添加到工具栏XML中。这样可以全屏固定布局,但在离开全屏(screenshot)时会导致填充添加到工具栏。我在onFullscreen(boolean)方法中添加了逻辑以删除工具栏填充(toolbar.setPadding(0, 0, 0, 0)),但遗憾的是这仍然显示填充的空白区域,当下次重新绘制布局时(例如,点击时)项目,启动播放器等)。我仍然对如何正确设置布局/填充感到困惑,但目前的解决方法现在都可以。

非法叠加问题

鉴于显示工具栏将全屏暂停YouTube播放器,我添加了逻辑,仅在播放器已暂停时显示工具栏。这并不理想,因为它迫使用户暂停播放器以查看工具栏,但这是我能想到的最佳选择。

onFullscreen(boolean)中,如果我们进入全屏并且播放器正在播放,则隐藏工具栏。

public void onFullscreen(boolean isFullscreen) {    
    mFullscreen = isFullscreen;

    if (isFullscreen && youTubePlayer.isPlaying()) {
        toolbar.setVisibility(View.GONE);
    }
    else {
        toolbar.setVisibility(View.VISIBLE);
    }
}

在设置播放器时(在onInitializationSuccess()中),我添加了一个监听器来播放和隐藏工具栏:

youTubePlayer.setPlaybackEventListener(new YouTubePlayer.PlaybackEventListener() {

    ...

    @Override
    public void onPlaying() { 
        if (mFullscreen) {
            toolbar.setVisibility(View.GONE);
        }
    }

    @Override
    public void onPaused() { 
        if (mFullscreen) {
            toolbar.setVisibility(View.VISIBLE);
        }
    }

});

答案 1 :(得分:1)

此代码将解决您的问题。 隐藏导航栏和工具栏

   public void fullScreenCall() {
    if(Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { //lower api
        View v = getActivity().getWindow().getDecorView();
        v.setSystemUiVisibility(View.GONE);
    } else if(Build.VERSION.SDK_INT >= 19) {
        //for new api versions.
        View decorView = getActivity().getWindow().getDecorView();
        int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY | View.SYSTEM_UI_FLAG_FULLSCREEN;
        decorView.setSystemUiVisibility(uiOptions);
    }
}

恢复正常模式

public void normalScreenCall() {
    if(Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api
        View v = getActivity().getWindow().getDecorView();
        v.setSystemUiVisibility(View.VISIBLE);
    } else if(Build.VERSION.SDK_INT >= 19) {
        //for new api versions.
        View decorView = getActivity().getWindow().getDecorView();
        decorView.setSystemUiVisibility(0);
    }
}

答案 2 :(得分:0)

尝试将android:fitsSystemWindows="true"添加到XML文件中的工具栏中。