约束布局问题

时间:2018-07-09 16:47:17

标签: android responsive-design android-constraintlayout

具有约束布局的UI在Android Studio上显示良好,但是一旦在移动设备上进行构建和测试,它就会变得不规则且分散。并且当将约束布局更改为相对或线性布局时,我的设计可以完美运行。因此,如果我们不能在其中正确编码,那么约束布局有什么好处。这是我的代码:

   <?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="@color/background_color"
        android:paddingHorizontal="@dimen/button_horizontal_padding">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="143dp"
            android:layout_marginStart="143dp"
            android:text="@string/booking_done_title"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Title"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:ignore="MissingConstraints"
            tools:layout_editor_absoluteY="56dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/booking_done_sub_title"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:ignore="MissingConstraints"
            tools:layout_editor_absoluteY="95dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_booking_done_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:ignore="MissingConstraints"
            tools:layout_editor_absoluteY="188dp" />

        <Button
            android:id="@+id/hotelBookNowBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginHorizontal="@dimen/button_horizontal_padding"
            android:background="@drawable/green_button_background"
            android:gravity="center"
            android:paddingHorizontal="@dimen/button_horizontal_padding"
            android:text="@string/done"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
            android:textColor="@color/white"
            android:textStyle="normal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:ignore="MissingConstraints"
            tools:layout_editor_absoluteY="353dp" />

        <TextView
            android:id="@+id/viewSummaryView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/view_full_summary"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
            android:textColor="@color/colorPrimary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent"
            tools:ignore="MissingConstraints"
            tools:layout_editor_absoluteY="425dp" />

        <android.support.constraint.Group
            android:id="@+id/group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </android.support.constraint.ConstraintLayout>

2 个答案:

答案 0 :(得分:2)

我遇到了同样的问题,结果发现您必须处理所有视图。例如,如果您在布局的底部/中间有一个按钮,并且想要保留在该位置,则需要在布局的两侧和底部都使用约束。 Android Studio会为此警告您。

答案 1 :(得分:1)

tools名称空间属性启用仅在布局编辑器中使用的设计时功能。 tools:layout_editor_absoluteY的值在运行时对View无效。

View缺少适当的约束时,布局编辑器将显示有关该约束的警告。但是,根据您的情况,您通过为tools:ignore="MissingConstraints"设置Views来忽略这些警告。您只为Views设置了水平约束,但没有垂直约束。

要在布局编辑器中为View设置约束,您需要单击View边缘的圆并将其拖向其他Views或边缘父母。也可以使用适当的属性直接在XML中设置约束。完整列表可在ConstraintLayout documentation

中找到