如何将两个视频并排隐藏其宽度的一半?

时间:2017-09-26 03:26:00

标签: android android-layout android-custom-view

我正在使用应用程序来比较视频,我有这个用例。这就是它的外观Two Videos view

我一直在尝试使用自定义视图扩展相对布局并将视频视图放入其中,但我无法实现此结果。

您必须考虑到视频宽度必须等于屏幕宽度,因为当有人点击某些视频时,必须将其翻译直至完全可见。我认为左侧视频应该被宽度屏幕的一半翻译到左侧,并且必须将相同的逻辑应用于右侧视频。

3 个答案:

答案 0 :(得分:0)

我正在尝试一个您可以尝试的示例,在 LinearLayout 内,您可以放置​​用于播放视频的视频视频

<强> activty_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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="2">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorAccent">

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorPrimaryDark">

        </LinearLayout>

    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher" />


</RelativeLayout>

enter image description here

答案 1 :(得分:0)

最简单的方法是创建横向线性布局并放入两个视图(SurfaceView或TextureView或GlSurfaceView)。并将这些视图的权重等于1.这将是:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:baselineAligned="false"
android:orientation="horizontal" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:layout_weight="1"
    android:layout_marginRight="8dp" >

    <TextureView
        android:id="@+id/double1_texture_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:layout_weight="1" >

    <TextureView
        android:id="@+id/double2_texture_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

要查看的最佳样本是Grafika。 但是,如果您想 比较视频 ,请不要忘记应该裁剪其中一个视频。因为您需要将一个视频的左侧与另一个视频的左侧进行比较。不要忘记宽高比。

答案 2 :(得分:0)

我可以通过以下布局来做到这一点:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<com.google.android.exoplayer2.ui.SimpleExoPlayerView
    android:id="@+id/right_video"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent" />

<com.google.android.exoplayer2.ui.SimpleExoPlayerView
    android:id="@+id/left_video"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary" />

</FrameLayout>

以编程方式,在活动的onCreate中我请求屏幕宽度并在X轴上进行平移。这看起来像:

    Point screenDimens = ViewUtils.getScreenDimensions(this);
    int videoSize = screenDimens.x;
    FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) leftVideo.getLayoutParams();
    params.width = videoSize;
    params.height = videoSize;
    leftVideo.setLayoutParams(params);
    rigthVideo.setLayoutParams(params);
    leftVideo.setTranslationX(-videoSize / 2);
    rigthVideo.setTranslationX(videoSize / 2);

它的外观如下:

enter image description here