Question

我正在尝试实现这种布局：

这是我试过的代码：

 <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/yellow_bg"
                android:layout_marginRight="8dp"
                app:layout_constraintRight_toRightOf="parent"
                android:layout_marginLeft="8dp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginBottom="8dp"
                android:id="@+id/imageView3" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/crown"
                tools:layout_editor_absoluteY="5dp"
                tools:layout_editor_absoluteX="10dp" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/position_no_bg"
                android:layout_marginLeft="0dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView3"
                app:layout_constraintTop_toTopOf="@+id/imageView3"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView3"
                android:layout_marginBottom="8dp"
                android:id="@+id/imageView4" />

        </android.support.constraint.ConstraintLayout>

但是我收到了这个输出：

问题在于，当我减小屏幕尺寸时，我会发现表冠从其位置移开。我的主要问题是皇冠无法设置到位。

这些是图片：

编辑：

为表冠添加2个约束：

 <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/yellow_bg"
                android:layout_marginRight="8dp"
                app:layout_constraintRight_toRightOf="parent"
                android:layout_marginLeft="8dp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginBottom="8dp"
                android:id="@+id/imageView3" />
            <ImageView
                android:layout_width="45dp"
                android:layout_height="32dp"
                android:src="@drawable/crown"
                app:layout_constraintBottom_toBottomOf="@+id/imageView3"
                android:layout_marginBottom="42dp"
                android:layout_marginLeft="0dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView3" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/position_no_bg"
                app:layout_constraintTop_toTopOf="@+id/imageView3"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView3"
                android:layout_marginBottom="8dp"
                android:id="@+id/imageView4"
                app:layout_constraintVertical_bias="1.0"
                android:layout_marginLeft="0dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView3" />

        </android.support.constraint.ConstraintLayout>

编辑2：

再次尝试使用此代码，并获得了良好的响应，但设计正在以7.0“加上设备：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="0.4"
        >

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout_editor_absoluteY="0dp"
            tools:layout_editor_absoluteX="0dp">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/yellow_without_crown"
                android:layout_marginRight="8dp"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="8dp"
                app:layout_constraintLeft_toLeftOf="parent"
                android:id="@+id/imageView4" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/crown"
                app:layout_constraintBottom_toBottomOf="@+id/imageView4"
                android:layout_marginBottom="8dp"
                app:layout_constraintTop_toTopOf="@+id/imageView4"
                android:layout_marginTop="0dp"
                android:layout_marginLeft="0dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView4"
                android:layout_marginRight="8dp"
                app:layout_constraintRight_toRightOf="@+id/imageView4"
                app:layout_constraintHorizontal_bias="0.04"
                app:layout_constraintVertical_bias="0.0" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/position_no_bg"
                app:layout_constraintBottom_toBottomOf="@+id/imageView4"
                android:layout_marginBottom="0dp"
                app:layout_constraintTop_toTopOf="@+id/imageView4"
                android:layout_marginTop="16dp"
                android:layout_marginLeft="16dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView4"
                android:id="@+id/imageView5" />

        </android.support.constraint.ConstraintLayout>







    </LinearLayout>

Answer 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" tools:layout_editor_absoluteX="0dp" tools:layout_editor_absoluteY="81dp"> <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="4dp" android:layout_marginLeft="8dp" android:layout_marginRight="8dp" android:src="@drawable/yellow" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHorizontal_bias="0.0" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@+id/imageView4" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginBottom="76dp" android:src="@drawable/crown" app:layout_constraintBottom_toBottomOf="@+id/imageView4" app:layout_constraintStart_toStartOf="parent" /> <ImageView android:id="@+id/imageView4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginStart="16dp" android:layout_marginTop="8dp" android:src="@drawable/circle" app:layout_constraintBottom_toBottomOf="@+id/imageView3" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="@+id/imageView3" /> </android.support.constraint.ConstraintLayout>

现在，这是在尝试不同的屏幕尺寸

这是截图

Answer 2

您正在为表冠应用绝对位置，这就是为什么表冠在您改变屏幕尺寸时会保持原样。

表冠图像未附加到其他图形。

即。将冠部底部约束设置为yellow_bg图像的下边框并增加底部边距

编辑：这就是它如何适合你的问题 - 你必须删除背景图像周围的空白区域!!

将背景约束设置为父级的左下角。
设置圆圈到背景的底部和左侧 -
- 之后我将表冠设置在背景之上。
- 它现在漂浮在上面，因为你的图像有一个白色的边框。你需要调整它。

你需要用边距调整它。

<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/bg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:src="@drawable/yellow_bg"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <ImageView
        android:id="@+id/crown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/crown"
        app:layout_constraintBottom_toTopOf="@+id/bg"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/bg" />

    <ImageView
        android:id="@+id/circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:layout_marginLeft="12dp"
        android:src="@drawable/position_no_bg"
        app:layout_constraintBottom_toBottomOf="@+id/bg"
        app:layout_constraintLeft_toLeftOf="@id/bg"/>

</android.support.constraint.ConstraintLayout>

如何在约束布局中实现重叠？

2 个答案: