Question

我将ConstraintLayout单元充气为水平方向的LinearLayout，以便4个单元合为一行。我可以使用布局，但是它的边界和左边缘是有效的，因为我在右边使用了边距以使该边距像在图像上一样。一项设计如下img：

以及我为此项目设计的布局：

<?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="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:layout_weight="1">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@+id/imageview_listunit_button"
        app:layout_constraintRight_toRightOf="@+id/imageview_listunit_button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        android:layout_marginTop="8dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/back_one">

        <ImageView
            android:id="@+id/imageview_listunit_image"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:src="@drawable/placeholder"
            android:padding="6dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

        <TextView
            android:id="@+id/textview_listunit_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:textColor="@color/color_text"
            android:layout_gravity="start"
            android:paddingStart="6dp"
            android:paddingEnd="6dp"
            android:paddingBottom="12dp"
            app:layout_constraintTop_toBottomOf="@id/imageview_listunit_image"
            app:layout_constraintLeft_toLeftOf="@id/imageview_listunit_image"
            app:layout_constraintRight_toRightOf="@id/imageview_listunit_image"/>

    </android.support.constraint.ConstraintLayout>

    <ImageView
        android:id="@+id/imageview_listunit_button"
        android:layout_width="40dp"
        android:layout_height="40dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:src="@drawable/button"/>

</android.support.constraint.ConstraintLayout>

我相信问题出在边缘，我将黑色布局从红色边缘移出一点，并且比左边边缘切掉。我尝试填充，但是没有任何提示，我应该如何解决呢？

Answer 1

由于右上角的红色ImageView具有固定的尺寸，因此可以进行一些边距处理。我们设置黑色ImageView的宽度以匹配父级的约束，但是在20dp的右侧和顶部设置边距（红色ImageView的一半）。然后，将红色ImageView的中心放置在黑色<?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="0dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_weight="1"> <android.support.constraint.ConstraintLayout android:id="@+id/background" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginRight="20dp" android:layout_marginTop="20dp" android:background="@drawable/back_one" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"> <ImageView android:id="@+id/imageview_listunit_image" android:layout_width="0dp" android:layout_height="wrap_content" android:scaleType="fitCenter" android:adjustViewBounds="true" android:src="@drawable/placeholder" android:padding="6dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" /> <TextView android:id="@+id/textview_listunit_title" android:layout_width="0dp" android:layout_height="wrap_content" android:ellipsize="end" android:maxLines="1" android:textColor="@color/color_text" android:layout_gravity="start" android:paddingStart="6dp" android:paddingEnd="6dp" android:paddingBottom="12dp" app:layout_constraintTop_toBottomOf="@id/imageview_listunit_image" app:layout_constraintLeft_toLeftOf="@id/imageview_listunit_image" app:layout_constraintRight_toRightOf="@id/imageview_listunit_image" /> </android.support.constraint.ConstraintLayout> <ImageView android:id="@+id/imageview_listunit_button" android:layout_width="40dp" android:layout_height="40dp" app:layout_constraintBottom_toTopOf="@id/background" app:layout_constraintLeft_toRightOf="@id/background" app:layout_constraintRight_toRightOf="@id/background" app:layout_constraintTop_toTopOf="@id/background" android:src="@drawable/button"/> </android.support.constraint.ConstraintLayout>的中心，由于有边距，因此有足够的空间：

EditText

Answer 2

好吧，我反过来解决了这个问题，我只是在上面放了一个红色小圆圈，然后将红色按钮的一半宽度的主要布局留在了空白处。

ConstraintLayout边缘切除

2 个答案: