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

时间:2017-08-01 09:37:02

标签: android video xamarin xamarin.android android-viewpager

我目前正在使用Xamarin.Android中的应用程序。 在这个应用程序中,我使用了几个ViewPagers,从那天起我从未遇到任何问题。

在我的应用程序开始时,我得到了一个动画之旅,这是一个包含ViewPager的简单活动,它使用4个片段(每个片段中都有一个视频),因此我们可以水平滚动以进一步旅途。您可以在下面看到它的截图: enter image description here

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

enter image description here

在这里,我的视频占据了100%的屏幕空间,但是当视频较小时也会发生这种情况,我缩小了其中一个的尺寸以向您展示:

enter image description here

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

如果可以帮助您,请提供代码:

animated_tour.axml(活动的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(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;
    }
}

包含视频的片段的四个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(常见的片段类)

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;
    }

}

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

VideoView延伸SurfaceViewSurfaceView的主要限制是它不适合翻译,动画和移动,这可能会导致您的问题。

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

或者您可以尝试自己创建这样的一个,这里有一些您可以参考的Java资源:

Playing video on TextureView

TextureVideoView.java