Android-约束布局不会遵守边距吗？

时间：2018-07-25 17:17:48

标签： android android-constraintlayout

我是ConstraintLayout的新手，边距有麻烦。我有以下layout文件，但我想让 layoutNewsEventsItemImageContainer 在左侧保留{{1} }}位于该边距的左侧。

我在做什么错？？ 

20dp

正如您在下面的预览中看到的那样，它切断了我的副本TextView。 <?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" android:id="@+id/layoutNewsEventsItemContainer" android:layout_width="match_parent" android:layout_height="wrap_content" android:clickable="true" android:focusable="true" android:padding="20dp"> <TextView android:id="@+id/lblNewsEventsItemHeadline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" app:layout_constraintRight_toLeftOf="@+id/layoutNewsEventsItemImageContainer" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> <TextView android:id="@+id/lblNewsEventsItemCopy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="TextView" app:layout_constraintRight_toLeftOf="@+id/layoutNewsEventsItemImageContainer" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/lblNewsEventsItemHeadline"/> <TextView android:id="@+id/lblNewsEventsItemDateModified" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" app:layout_constraintRight_toLeftOf="@+id/layoutNewsEventsItemImageContainer" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/lblNewsEventsItemCopy"/> <android.support.constraint.ConstraintLayout android:id="@+id/layoutNewsEventsItemImageContainer" android:layout_width="75dp" android:layout_height="75dp" android:background="@color/BackgroundColor2" android:layout_marginStart="20dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent"> </android.support.constraint.ConstraintLayout> </android.support.constraint.ConstraintLayout> 应保持在TextView的左侧，并因此环绕到下一行。但是如您所见，没有应用任何边距。

enter image description here

3 个答案:

答案 0 :(得分：2)

请使用下面的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"
    android:id="@+id/layoutNewsEventsItemContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:focusable="true"
    android:padding="20dp">


    <TextView
        android:id="@+id/lblNewsEventsItemHeadline"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:text="TextViewnsd,n,snfklsdnfknkfnm,nfm,nf,mn,mfnm,sdnfm,dnf,mnsd,mfn,sdmfn,dmsnf,sdnf,nsd,fn,sdf,nms,fn,fsd"
        app:layout_constraintEnd_toStartOf="@id/layoutNewsEventsItemImageContainer"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"

        />

    <TextView
        android:id="@+id/lblNewsEventsItemCopy"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:text="88888888888888888888888888888888888888888888888888888888888888888888888888"
        app:layout_constraintEnd_toStartOf="@id/layoutNewsEventsItemImageContainer"
        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/lblNewsEventsItemHeadline" />

    <TextView
        android:id="@+id/lblNewsEventsItemDateModified"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:text="yess"
        app:layout_constraintEnd_toStartOf="@id/layoutNewsEventsItemImageContainer"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/lblNewsEventsItemCopy" />

    <android.support.constraint.ConstraintLayout
        android:id="@+id/layoutNewsEventsItemImageContainer"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

这将帮助您使用constraint layout

获得以下结果

enter image description here

希望这会有所帮助

答案 1 :(得分：1)

首先，为什么不只为容器使用图像视图？ 并选中此选项，只需编辑不接受空白到0dp的文本视图宽度

     <?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"
android:id="@+id/layoutNewsEventsItemContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:padding="20dp">


<TextView
    android:id="@+id/lblNewsEventsItemHeadline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    app:layout_constraintRight_toLeftOf="@+id/layoutNewsEventsItemImageContainer"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:id="@+id/lblNewsEventsItemCopy"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="88888888888888888888888888888888888888888888888888888888888888888888888888"
    app:layout_constraintRight_toLeftOf="@+id/layoutNewsEventsItemImageContainer"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/lblNewsEventsItemHeadline" />

<TextView
    android:id="@+id/lblNewsEventsItemDateModified"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:text="TextView"
    app:layout_constraintRight_toLeftOf="@+id/layoutNewsEventsItemImageContainer"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/lblNewsEventsItemCopy" />

<ImageView
    android:id="@+id/layoutNewsEventsItemImageContainer"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_marginEnd="16dp"
    android:layout_marginStart="20dp"
    android:background="@color/colorPrimary"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/lblNewsEventsItemCopy"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginRight="16dp"
    android:layout_marginLeft="20dp">

</ImageView>

答案 2 :(得分：0)

根据建议，将文本视图放置在相对布局内。这将使您的约束布局可以在它知道的内容旁边对齐，而不是在可能会改变大小并因此导致重叠的textview旁边对齐。这样您将获得可预测的行为。

<ConstraintLayout 
android:id="@+id/layoutNewsEventsItemContainer"
...

<RelativeLayout
android:id="@+id/container_for_textview"
android:width="wrap_content"
android:height="wrap_content">
 <TextView> ...first
 <TextView> ...second
 <TextView> ...third
</RelativeLayout>

<ConstraintLayout
    android:id="@+id/layoutNewsEventsItemImageContainer"
    ....
    app:layout_constraintEnd_toEndOf="@+id/container_for_textview"
</ConstraintLayout>

</ConstraintLayout>//NewsEventsItemContainer
相关问题
最新问题