android - Xamarin.Android - ViewPager 内视频两侧的垂直黑条

Question

我目前正在 Xamarin.Android 中开发一个应用程序。在这个应用程序中，我使用了几个 ViewPagers，从昨天开始我就再也没有遇到过任何问题。

在我的应用程序的开头，我得到了一种动画游览，这是一个包含 ViewPager 的简单 Activity ，它使用 4 个 fragment (每个 fragment 中有一个视频)，因此我们可以水平滚动以继续前进旅途。下面你可以看到它的截图:

但是我在所有非 Android 7 的 android 设备上都出现了问题(不支持 Android 4 和更早版本，所以我的问题只出现在 Android 5 和 6 上)。当我在此 ViewPager 上水平滚动时，每个视频的左侧和右侧都会出现某种黑条。我想这不会发生在 Android 7 上，因为操作系统可以更好地管理视频。下面你有一个例子:

这里我的视频占据了 100% 的屏幕空间，但当视频较小时也会发生这种情况，我缩小了其中一个的大小来展示给你看:

那些黑条不是固定的，我的意思是当我水平滚动时它们会在屏幕上随机移动。我把几乎所有东西的背景色都变成了白色，但是没有效果。我真的认为这是 Android 在屏幕上移动视频时遇到困难，而该视频仍在播放。但这太丑陋了，它提供了糟糕的用户体验，这对我和我的团队来说非常重要，能够解决这个问题。

给你代码，如果它能帮到你的话:

animated_tour.axml( Activity 的 axml)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/vp_animated_tour"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white" />

AnimatedTourActivity.cs( Activity 类)

[Activity(Label = "AnimatedTourActivity", Theme = "@style/AppTheme")]
public class AnimatedTourActivity : AppCompatActivity
{

    public AnimatedTourViewModel Vm
    {
        get
        {
            return App.Locator.AnimatedTour;
        }
    }

    private ViewPager _viewPager;

    public ViewPager ViewPager
    {
        get
        {
            return this._viewPager ?? (this._viewPager = this.FindViewById<ViewPager>(Resource.Id.vp_animated_tour));
        }
    }

    protected override void OnCreate(Bundle savedInstanceState)
    {
        SetContentView(Resource.Layout.animated_tour);
        base.OnCreate(savedInstanceState);

        Window.SetFlags(Android.Views.WindowManagerFlags.Fullscreen, Android.Views.WindowManagerFlags.Fullscreen);

        // On bloque en mode portrait
        RequestedOrientation = Android.Content.PM.ScreenOrientation.Portrait;
        this.ViewPager.Adapter = new AnimatedTourAdapter(this.SupportFragmentManager);

        if (Android.OS.Build.VERSION.SdkInt <= BuildVersionCodes.Lollipop)
            this.ViewPager.OffscreenPageLimit = 1;
        else
            this.ViewPager.OffscreenPageLimit = 3;
    }
}

包含视频的 fragment 的四个 AXML 文件之一

<?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"
    android:background="@color/white">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <FrameLayout
            android:id="@+id/placeholder"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white" />
        <VideoView
            android:id="@+id/vv_animated_tour_2"
            android:layout_gravity="center"
            android:layout_height="match_parent"
            android:layout_width="match_parent" />
    </FrameLayout>
    <LinearLayout
        android:id="@+id/ll_animated_tour_description"
        android:layout_marginTop="350dp"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:textSize="23dp"
            android:fontFamily="fonts/AvenirLTStd-Book.otf"
            android:textColor="@color/general_text_color_grey"
            android:text="@string/animated_tour_family_management" />
        <TextView
            android:layout_marginTop="15dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:paddingRight="33dp"
            android:paddingLeft="33dp"
            android:textSize="19.5dp"
            android:fontFamily="fonts/AvenirLTStd-Book.otf"
            android:textColor="@color/animated_tour_description"
            android:text="@string/animated_tour_family_management_description" />
    </LinearLayout>
    <ImageView
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="100dp"
        android:background="@drawable/DOTS_2" />
</RelativeLayout>

AnimatedTourFragment.cs(通用 fragment 类)

public class AnimatedTourFragment : SupportV4.Fragment
{
    static AnimatedTourFragment fragment;

    private const string TEMPLATED_ANIMATED_TOUR_RESOURCE_ID = "resource_id";
    private const string TEMPLATED_ANIMATED_TOUR_VIDEO_RESOURCE_ID = "video_resource_id";
    private const string TEMPLATED_ANIMATED_TOUR_NUMBER = "number";


    public AnimatedTourFragment()
    {

    }

    public static AnimatedTourFragment NewInstance(int number, int resourceId, int videoResourceId)
    {
        fragment = new AnimatedTourFragment();
        Bundle args = new Bundle();

        args.PutInt(TEMPLATED_ANIMATED_TOUR_RESOURCE_ID, resourceId);
        args.PutInt(TEMPLATED_ANIMATED_TOUR_NUMBER, number);
        args.PutInt(TEMPLATED_ANIMATED_TOUR_VIDEO_RESOURCE_ID, videoResourceId);


        fragment.Arguments = args;

        return fragment;
    }


    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        //return base.OnCreateView(inflater, container, savedInstanceState);
        var resourceId = Arguments.GetInt(TEMPLATED_ANIMATED_TOUR_RESOURCE_ID, 0);
        var number = Arguments.GetInt(TEMPLATED_ANIMATED_TOUR_NUMBER, 1);
        var videoResourceId = Arguments.GetInt(TEMPLATED_ANIMATED_TOUR_VIDEO_RESOURCE_ID, 0);

        var view = inflater.Inflate(resourceId, container, false);

        var videoViewId = this.Activity.Resources.GetIdentifier(string.Format("vv_animated_tour_{0}", number), "id", this.Activity.PackageName);

        var videoView = view.FindViewById<VideoView>(videoViewId);
        videoView.SetOnPreparedListener(new VideoLoop());
        videoView.SetVideoURI(Android.Net.Uri.Parse("android.resource://" + this.Activity.PackageName + "/" + videoResourceId));
        videoView.Start();

        var goButton = view.FindViewById<Button>(Resource.Id.bt_animated_tour_go);
        goButton?.SetCommand("Click", (this.Activity as AnimatedTourActivity).Vm.NavigateToHomeCommand);

        return view;
    }

}


public class VideoLoop : Java.Lang.Object, Android.Media.MediaPlayer.IOnPreparedListener
{
    public void OnPrepared(MediaPlayer mp)
    {
        mp.Looping = true;
    }

}

感谢您的帮助!

Answer 1

VideoView extends SurfaceView，SurfaceView 的主要限制是它不是平移、动画和移动的理想选择，这可能会导致您问题。

您需要的是一个基于 TextureView 的视频播放器。您可以尝试搜索第三方库。

或者你可以尝试自己创建这样的一个，这里有一些你可以引用的Java资源:

Playing video on TextureView

TextureVideoView.java .