Android ConstraintLayout：ImageView 中的控件弄乱了 ImageView 布局

【问题标题】：Android ConstraintLayout: Controls in ImageView mess up ImageView layoutAndroid ConstraintLayout：ImageView 中的控件弄乱了 ImageView 布局
【发布时间】：2018-03-22 06:26:27
【问题描述】：

我想要两个并排的 ImageView，每个 ImageView 占据屏幕的 50%。在每一个上，我想安排一组按钮和文本视图。我在单个 ConstraintLayout 中执行此操作。

当我自己设置 ImageView 时，它们会使用这些属性正确布局：

android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"

ImageView 有这样的约束（还有一个 1dp 视图分隔栏）：

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/separator_bar"
app:layout_constraintTop_toTopOf="parent"

下面是拆分的样子：

但是，当我添加 Buttons 和 TextViews 并将它们链接在一起，将它们链接到 ImageView 的两侧并彼此链接时，使它们基本上“包含”在 ImageView 中，ImageView 水平收缩，因此它是小部件的宽度，几乎就像应用了 wrap_content 一样。更奇怪的是，另一个 ImageView 也缩小了，尽管我还没有添加它的小部件。

标记后，控件如下所示：

<Button
    android:id="@+id/btnKingW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♔"
    app:layout_constraintBottom_toTopOf="@id/btnQueenW"
    app:layout_constraintEnd_toStartOf="@id/tvKingW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toTopOf="@id/white_king_image"
    app:layout_constraintVertical_chainStyle="spread" />

（原ImageView的约束不变）

这是在所有四个侧面都锚定到父级的一个 ImageView 的样子。小部件看起来不错。

当我使用这两个 ImageViews 时，这就是一团糟。

这里发生了什么？为什么将widget 链接到另一个widget/view 会导致我之前的漂亮布局发生变化？我会假设 ImageViews 锚定到父级并且不应该移动，但这显然不是这种情况。

我查看了一堆教程，但它们似乎都向我展示了如何使用 Android Studio GUI 执行六种技巧，并没有真正深入了解如何评估布局。我想真正了解正在发生的事情，而不仅仅是单击 GUI 设计工具中的一些按钮。 FWIW，我确实尝试了 GUI 设计工具，并花了与使用该工具保存的时间一样多的时间来清理它添加到我的 XML 中的魔法垃圾（不，我不需要填充，谢谢），所以我基本上放弃了现在就用它来做实验吧。

如果不清楚的话，我是 Android 开发新手。这是 Udacity 未评分课程的玩具应用程序。

完整的 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"
tools:context="com.example.android.chessmaniac.MainActivity"
tools:layout_editor_absoluteY="81dp">

<ImageView
    android:id="@+id/white_king_image"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:alpha="0.3"
    android:contentDescription="@string/white_king_chesspiece"
    android:scaleType="centerCrop"
    android:src="@mipmap/white_king"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/separator_bar"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/separator_bar"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/black_king_image"
    app:layout_constraintStart_toEndOf="@id/white_king_image"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/black_king_image"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:alpha="0.3"
    android:contentDescription="@string/black_king_chesspiece"
    android:scaleType="centerCrop"
    android:src="@mipmap/black_king"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/separator_bar"
    app:layout_constraintTop_toTopOf="parent" />

<!-- WHITE BUTTONS -->

<Button
    android:id="@+id/btnKingW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♔"
    app:layout_constraintBottom_toTopOf="@id/btnQueenW"
    app:layout_constraintEnd_toStartOf="@id/tvKingW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toTopOf="@id/white_king_image"
    app:layout_constraintVertical_chainStyle="spread" />

<Button
    android:id="@+id/btnQueenW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♕"
    app:layout_constraintBottom_toTopOf="@id/btnRookW"
    app:layout_constraintEnd_toStartOf="@id/tvQueenW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnKingW" />

<Button
    android:id="@+id/btnRookW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♖"
    app:layout_constraintBottom_toTopOf="@id/btnBishopW"
    app:layout_constraintEnd_toStartOf="@id/tvRookW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnQueenW" />

<Button
    android:id="@+id/btnBishopW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♗"
    app:layout_constraintBottom_toTopOf="@id/btnKnightW"
    app:layout_constraintEnd_toStartOf="@id/tvBishopW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnRookW" />

<Button
    android:id="@+id/btnKnightW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♘"
    app:layout_constraintBottom_toTopOf="@id/btnPawnW"
    app:layout_constraintEnd_toStartOf="@id/tvKnightW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnBishopW" />

<Button
    android:id="@+id/btnPawnW"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:text="♙"
    app:layout_constraintBottom_toBottomOf="@id/white_king_image"
    app:layout_constraintEnd_toStartOf="@id/tvPawnW"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="@id/white_king_image"
    app:layout_constraintTop_toBottomOf="@id/btnKnightW" />

<!-- WHITE TEXTVIEWS -->

<TextView
    android:id="@+id/tvKingW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WK"
    app:layout_constraintBottom_toTopOf="@id/tvQueenW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnKingW"
    app:layout_constraintTop_toTopOf="@id/white_king_image"
    app:layout_constraintVertical_chainStyle="spread" />

<TextView
    android:id="@+id/tvQueenW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WQ"
    app:layout_constraintBottom_toTopOf="@id/tvRookW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnQueenW"
    app:layout_constraintTop_toBottomOf="@id/tvKingW" />

<TextView
    android:id="@+id/tvRookW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WR"
    app:layout_constraintBottom_toTopOf="@id/tvBishopW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnRookW"
    app:layout_constraintTop_toBottomOf="@id/tvQueenW" />

<TextView
    android:id="@+id/tvBishopW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:text="WB"
    app:layout_constraintBottom_toTopOf="@id/tvKnightW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnBishopW"
    app:layout_constraintTop_toBottomOf="@id/tvRookW" />

<TextView
    android:id="@+id/tvKnightW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WN"
    app:layout_constraintBottom_toTopOf="@id/tvPawnW"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnKnightW"
    app:layout_constraintTop_toBottomOf="@id/tvBishopW" />

<TextView
    android:id="@+id/tvPawnW"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WP"
    app:layout_constraintBottom_toBottomOf="@id/white_king_image"
    app:layout_constraintEnd_toEndOf="@id/white_king_image"
    app:layout_constraintStart_toEndOf="@id/btnPawnW"
    app:layout_constraintTop_toBottomOf="@id/tvKnightW" />

</android.support.constraint.ConstraintLayout>

【问题讨论】：

  • 我认为如果我们能看到您的整个 xml，我们会更容易提供帮助。 :)
  • 添加了完整的 XML！

标签： android android-layout


【解决方案1】：

试试这个

<?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">

    <ImageView
        android:id="@+id/imageOne"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/imageTwo"
        app:layout_constraintHorizontal_bias="0.65"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />

    <ImageView
        android:id="@+id/imageTwo"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/imageOne"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        app:layout_constraintTop_toBottomOf="@id/guideline" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toRightOf="@+id/button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/guideline"
        tools:layout_editor_absoluteY="232dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        app:layout_constraintTop_toBottomOf="@id/button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toRightOf="@+id/button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button2" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="87dp" />
</android.support.constraint.ConstraintLayout>

输出

Here is the good tutorial for this

【讨论】：

  • 你能解释一下你在这里做什么以及它为什么有效吗？我想了解发生了什么，而不仅仅是剪切粘贴一些可能解决我的问题的代码。
【解决方案2】：

首先，您必须正确排列图像视图。和LinearLayout一样，你可以在ConstraintLayout中设置权重。

<android.support.constraint.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/imageOne"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/img_one"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/imageTwo"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageTwo"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@drawable/img_two"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/imageOne"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

然后尝试在ImageViews 上对齐按钮。希望对你有帮助:)

【讨论】：

  • 我可以让 ImageViews 使用权重等来排列（见图）。我的问题是，当我在 ImageView 顶部添加小部件时，ImageView 布局会被水平压缩。
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript C# Mysql Docker 算法 前端 SpringBoot Redis Vue spring .net 设计模式 .net core c++ kubernetes 数据库 机器学习 大数据 数据结构 微服务 js 人工智能 Go Android 面试 程序员 JVM 云原生 后端 ASP.net core 深度学习 CSS k8s git golang PHP devops Nginx Django React mybatis 架构 多线程 Spring Boot 云计算 LeetCode 分布式