【问题标题】:RelativeLayout works, whereas ConstraintLayout FailsRelativeLayout 有效,而 ConstraintLayout 失败
【发布时间】:2019-10-07 12:19:36
【问题描述】:

这是来自RelativeLayout的代码,

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:gravity="center">

        <ImageView
            android:id="@+id/imgIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:minWidth="200dp"
            android:minHeight="200dp"
            android:src="@drawable/ic_baseline_description_24px"
            android:tint="@color/grey" />
    </RelativeLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtInputLayoutCaption"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="@dimen/dp8"
        android:layout_toStartOf="@+id/imgSend"
        android:hint="@string/caption">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editTextCaption"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fontFamily="@font/trebuchet" />

    </com.google.android.material.textfield.TextInputLayout>

    <ImageView
        android:id="@+id/imgSend"
        android:layout_width="@dimen/dp36"
        android:layout_height="@dimen/dp36"
        android:layout_alignTop="@+id/txtInputLayoutCaption"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_baseline_send_24px"
        android:tint="?attr/colorPrimary" />
</RelativeLayout>

相对布局输出

这里是约束布局代码,

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <ImageView
        android:id="@+id/imgIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:minWidth="200dp"
        android:minHeight="200dp"
        android:src="@drawable/ic_baseline_description_24px"
        android:tint="@color/grey"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtInputLayout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/dp8"
        android:hint="@string/caption"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imgSend"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

    <ImageView
        android:id="@+id/imgSend"
        android:layout_width="@dimen/dp36"
        android:layout_height="@dimen/dp36"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_baseline_send_24px"
        android:tint="?attr/colorPrimary"
        app:layout_constraintBottom_toBottomOf="@+id/txtInputLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/txtInputLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

这是约束布局代码的输出。

注意:我使用的是androidx.constraintlayout:constraintlayout:2.0.0-beta2

【问题讨论】:

  • 如何在 ImageView (imgIcon") 中从 app:layout_constraintBottom_toBottomOf="parent" 更改为 app:layout_constraintBottom_toTopOf="@+id/txtInputLayout"
  • 在约束中引用现有视图时删除加号 ("+")。
  • 我相信布局只是方程式的一部分。当我将您的基于约束布局的示例粘贴到测试项目中时,它的工作原理和行为(我相信)应该如此 - 也就是说,软 kbd 不与底部重叠,当键盘关闭时一切恢复正常。
  • app:layout_constraintBottom_toBottomOf="@+id/txtInputLayout"改成app:layout_constraintBottom_toBottomOf="parent"改成imgSend button
  • @MD,我试过了,但结果一样。

标签: android android-constraintlayout android-relativelayout


【解决方案1】:

ConstraintLayout 的目的是通过对每个视图应用一些规则来优化和扁平化布局的视图层次结构以避免嵌套。

规则提醒您RelativeLayout,例如将左侧设置为其他视图的底部。

app:layout_constraintBottom_toBottomOf="@+id/view1"

与RelativeLayout 不同,ConstraintLayout 提供偏差值,用于根据相对于手柄(用圆圈标记)的0% 和100% 水平和垂直偏移量来定位视图。这些百分比(和分数)提供了跨不同屏幕密度和尺寸的无缝视图定位。

app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->

【讨论】:

  • 如果要在左侧进行约束,请使用结束和开始约束,而不是代码中提到的底部。
【解决方案2】:

txtInputLayoutCaption

赋予发送按钮启动约束

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

    <ImageView
        android:id="@+id/imgIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:minWidth="200dp"
        android:minHeight="200dp"
        android:src="@drawable/ic_share_active"
        android:tint="@color/gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/txtInputLayout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:hint="caption"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imgSend"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

    <ImageView
        android:id="@+id/imgSend"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_send"
        app:layout_constraintBottom_toBottomOf="@+id/txtInputLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/txtInputLayout"
        app:layout_constraintTop_toTopOf="@+id/txtInputLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】:

    猜你喜欢
    • 2016-09-16
    • 1970-01-01
    • 1970-01-01
    • 2014-04-05
    • 1970-01-01
    • 1970-01-01
    • 2020-10-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多