Question

我希望有两个并排的ImageView，它们分别占据屏幕的50％。在每个，我想安排一组按钮和TextViews。我在一个ConstraintLayout中执行此操作。

当我自己设置ImageViews时，它们使用以下属性正确布局：

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

ImageViews有这样的约束（还有 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的两侧并相互连接，使它们基本上包含在＃34;包含＆＃34;在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固定在父四面上。小部件看起来很好。

当我使用两个ImageView时，这就是热点。

这里发生了什么？为什么将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>

Answer 1

首先，您必须正确排列图像视图。与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。希望它有所帮助：）

Answer 2

试试这个

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

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

2 个答案: