Question

我使用ConstraintLayout创建了一个活动布局xml文件。在设计时，它具有良好的外观和感觉。但是当我在设备上运行它时，就像设计阶段一样，它错过了它的结构。

这是我的xml布局文件，

<?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"
android:background="#DCDCDC"
tools:context=".ui.AdMenuActivity">

<View
    android:id="@+id/bg_gradient"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_225sdp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/ic_bg_gradient_next"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="0dp" />

<ImageView
    android:layout_width="@dimen/_50sdp"
    android:layout_height="50dp"
    android:src="@mipmap/image_ssb_main"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_15sdp"
    android:layout_marginTop="@dimen/_10sdp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login"
    android:textColor="@color/white"
    android:textSize="@dimen/_24sdp"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_55sdp"
    android:textStyle="bold" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login to your account"
    android:textColor="@color/white"
    android:textSize="@dimen/_12sdp"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_90sdp" />

<LinearLayout
    android:layout_width="@dimen/_280sdp"
    android:layout_height="340dp"
    android:background="@color/white"
    android:orientation="vertical"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_120sdp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:text="Email"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

        <EditText
            style="@style/editText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/_8sdp"
            android:background="@drawable/edit_text_background"
            android:hint="Your Email"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:paddingLeft="@dimen/_8sdp"
            android:singleLine="true"
            android:textAppearance="@style/editText"
            android:textColor="#2C2C2C"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:text="Password"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

        <EditText
            style="@style/editText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/_8sdp"
            android:background="@drawable/edit_text_background"
            android:hint="Your Password"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:paddingLeft="@dimen/_8sdp"
            android:singleLine="true"
            android:textAppearance="@style/editText"
            android:textColor="#2C2C2C"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        android:orientation="vertical">

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:background="#009688"
            android:text="Login"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="@dimen/_14sdp" />

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:background="@color/white_greyish"
            android:text="Sign up"
            android:textAllCaps="false"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

</LinearLayout>

这是其设计阶段和运行阶段的图片，

设计阶段

运行阶段

有没有像设计阶段那样设计这种布局的方法？

Answer 1

您没有在布局中正确使用约束。

结束标记缺少添加

</android.support.constraint.ConstraintLayout>

在布局的末尾

韦斯利所说的话绝对正确，避免使用

tools:layout_editor_absoluteY

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent

最好使用约束，这样可以将视图放置在屏幕中央

您需要约束
i）查看
ii）ImageView
iii）TextView，您已在其中编写了登录名并登录到您的帐户
iv）线性布局

希望这对您有帮助编码愉快！

Answer 2

尽管下面的答案不是解决问题的方法，但是您可以在没有constraintlayout的情况下进行尝试，因为constraintlayout用于制作复杂的布局，而要实现的设计可以使用{{1 }}。

linearlayout

Answer 3

您可以使用AndroidStudio来帮助您设置这些约束。

并且您必须避免使用tools:layout_editor_absoluteX

这样的绝对边距

请改用这些约束。

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/someView"
app:layout_constraintStart_toStartOf="parent"

例如，如果要在水平中心设置“视图”并对齐父对象的顶部：

android:layout_margin="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

技巧是为另一个视图设置View约束。并非所有视图都受其父视图约束。

Answer 4

我注意到，您的顶部布局是约束布局，并且您正在使用</LinearLayout>标签（xml的最后一行）将其关闭

在约束布局中，每个子代必须至少具有一个水平约束和一个垂直约束。否则，孩子将无法正确放置在父母中。

您的布局可以替换为以下内容。给每个孩子正确的身份

<?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"
android:background="#DCDCDC"
tools:context=".ui.AdMenuActivity">

<View
    android:id="@+id/bg_gradient"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_225sdp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/ic_bg_gradient_next"
    tools:layout_editor_absoluteX="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteY="0dp" />

<ImageView
    android:layout_width="@dimen/_50sdp"
    android:layout_height="50dp"
    android:id="@+id/imgView"
    android:src="@mipmap/image_ssb_main"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_15sdp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/bg_gradient"
    android:layout_marginTop="@dimen/_10sdp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/imgView"
    android:textColor="@color/white"
    android:textSize="@dimen/_24sdp"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_55sdp"
    android:textStyle="bold" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login to your account"
    android:textColor="@color/white"
    android:textSize="@dimen/_12sdp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textView1"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_90sdp" />

<LinearLayout
    android:layout_width="@dimen/_280sdp"
    android:layout_height="340dp"
    android:background="@color/white"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textView2"
    tools:layout_editor_absoluteX="@dimen/_23sdp"
    tools:layout_editor_absoluteY="@dimen/_120sdp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:text="Email"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

        <EditText
            style="@style/editText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/_8sdp"
            android:background="@drawable/edit_text_background"
            android:hint="Your Email"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:paddingLeft="@dimen/_8sdp"
            android:singleLine="true"
            android:textAppearance="@style/editText"
            android:textColor="#2C2C2C"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/linearLt1"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:text="Password"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

        <EditText
            style="@style/editText"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_25sdp"
            android:layout_gravity="center"
            android:layout_margin="@dimen/_8sdp"
            android:background="@drawable/edit_text_background"
            android:hint="Your Password"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:paddingLeft="@dimen/_8sdp"
            android:singleLine="true"
            android:textAppearance="@style/editText"
            android:textColor="#2C2C2C"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_4sdp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/linearLt2"
        android:orientation="vertical">

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:background="#009688"
            android:text="Login"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="@dimen/_14sdp" />

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:layout_marginTop="@dimen/_10sdp"
            android:background="@color/white_greyish"
            android:text="Sign up"
            android:textAllCaps="false"
            android:textColor="@color/black"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

</ConstraintLayout>

使用约束布局无法正确创建Android活动

4 个答案: