使用约束布局将按钮与 videoView 对齐

Question

我一直在尝试制作类似 Snapchat 的登录屏幕，其中两个按钮位于底部，背景层上播放一个小视频。当我完成所有操作时，按钮并没有将自己定位在它们所在的位置，而是遍布整个模拟器，视频播放器也未对齐。

登录页面的代码如下

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.test.test.Login">

<Button
    android:id="@+id/btnSignUp"
    android:layout_width="414dp"
    android:layout_height="89dp"
    android:text="SIGN UP"
    android:textSize="40sp"
    android:textStyle="bold"
    android:background="#FFD54F"
    android:textColor="#FAFAFA"
    tools:layout_editor_absoluteX="-24dp"
    tools:layout_editor_absoluteY="397dp" />

<Button
    android:id="@+id/btnLogin"
    android:layout_width="414dp"
    android:layout_height="89dp"
    android:fontFamily="sans-serif"
    android:lineSpacingExtra="10sp"
    android:text="Login"
    android:textSize="40sp"
    android:textStyle="bold"
    android:background="#80DEEA"
    android:textColor="#FAFAFA"
    tools:layout_editor_absoluteX="-15dp"
    tools:layout_editor_absoluteY="486dp" />

<VideoView
    android:id="@+id/bgVideoView"
    android:layout_width="394dp"
    android:layout_height="410dp"
    tools:layout_editor_absoluteX="-5dp"
    tools:layout_editor_absoluteY="0dp" />
</android.support.constraint.ConstraintLayout>

What I want it to look like

Emulator Capture

Answer 1

我认为您应该改用 RelativeLayout。请参阅下面的示例实现：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.test.test.Login">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <VideoView
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/btnSignUp"
            android:layout_width="414dp"
            android:layout_height="89dp"
            android:text="SIGN UP"
            android:textSize="40sp"
            android:textStyle="bold"
            android:background="#FFD54F"
            android:textColor="#FAFAFA" />

        <Button
            android:id="@+id/btnLogin"
            android:layout_width="414dp"
            android:layout_height="89dp"
            android:fontFamily="sans-serif"
            android:lineSpacingExtra="10sp"
            android:text="Login"
            android:textSize="40sp"
            android:textStyle="bold"
            android:background="#80DEEA"
            android:textColor="#FAFAFA"
            />
    </LinearLayout>

</RelativeLayout>

Answer 2

您正在使用 ConstraintLayout 作为根元素，但您没有为子视图提供任何约束。当你使用 ConstraintLayout 时尝试这样的事情：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btnSignUp"
        android:layout_width="0dp"
        android:layout_height="89dp"
        android:background="#FFD54F"
        android:text="SIGN UP"
        android:textColor="#FAFAFA"
        android:textSize="40sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/btnLogin"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="HardcodedText"
        tools:layout_editor_absoluteX="-24dp"
        tools:layout_editor_absoluteY="397dp" />

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="414dp"
        android:layout_height="89dp"
        android:background="#80DEEA"
        android:lineSpacingExtra="10sp"
        android:text="Login"
        android:textColor="#FAFAFA"
        android:textSize="40sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="HardcodedText"
        tools:layout_editor_absoluteX="-15dp"
        tools:layout_editor_absoluteY="486dp" />

    <VideoView
        android:id="@+id/bgVideoView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="visible"
        app:layout_constraintBottom_toTopOf="@+id/btnSignUp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

ConstraintLayout 比 RelativeLayout 更先进、更灵活。尝试从此处了解更多信息：

Build a Responsive UI with ConstraintLayout

使用约束布局将按钮与 videoView 对齐

Align Buttons with videoView using Constraint layout

android

android-videoview