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

您使用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

Answer 2

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

std::min

使用约束布局

2 个答案: