logo标签列表

安卓 - 约束布局不遵循边距？

androidandroid-constraintlayout
4

我非常新手 ConstraintLayout，我在边距方面遇到了麻烦。 我有以下 layout 文件，但我正在尝试使 layoutNewsEventsItemImageContainer 在左侧具有 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 被截断了。 TextView 应该保持在 layoutNewsEventsItemImageContainer 的左侧，因此换行到下一行。但是，如您所见，没有应用任何边距。

enter image description here

1
为了学习的目的（也包括我自己），我想参考一下Android约束布局文档，你能否上传一个当前布局的快照图片？ - EvOlaNdLuPiZ
1
@EvOlaNdLuPiZ 预览已添加。 - Phil
1
从我看到的情况来看，您有三个垂直排列的文本视图，因此我认为约束布局不知道要将哪一个与其对齐。我的问题是，约束布局下一个对齐的是哪一个？再次强调，这只是初步看法，但更好的解决方案 在我看来 是使用相对布局来包含文本视图，然后将约束布局定位在相对布局旁边。 - EvOlaNdLuPiZ
3个回答
4
请使用以下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>

这将帮助您使用约束布局实现以下结果

enter image description here

希望这能帮到您

4
关键部分是将“wrap_content”宽度与“0dp”（匹配约束）进行交换，否则它不会尊重边距与约束布局父级之间的关系。 - hmac
1
我刚刚将宽度设置为0dp，像下面这样做就可以了。android:layout_width="0dp"谢谢！你的回答非常有帮助。 - Subhan Ali
1
首先，为什么不使用ImageView作为容器？并且检查一下这个，只需将TextView的宽度编辑为不接受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>

1
因为我在图像容器中有3个图像。 - Phil
2
好的，那就把 ImageView 改成 ConstraintLayout，并确保文本匹配约束来进行包裹以设置其宽度为零，就这样。 - Ezaldeen sahb
-3

如建议所示，请将您的文本视图放在相对布局内。这将使您的约束布局能够与某些已知的内容对齐，而不是与可能会更改大小并导致重叠的文本视图对齐。通过这种方式，您可以获得可预测的行为。

<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
5
你可能要考虑使用哪种布局方式，但是将RelativeLayout放置在ConstraintLayout中总是一个不好的解决方案，因为这样会影响性能，并且你实际上从来不需要这样做（你只需要用ConstraintLayout就可以实现所有想要使用RelativeLayout实现的功能）。 - Michał Baran
1
请勿发布没有代码的内容。我想看到您的解决方案并在我的端上运行它，以便验证和确认您的说法。谢谢。 - EvOlaNdLuPiZ
你应该使用RelativeLayout或ConstraintLayout中的一个。没有必要同时使用两个。 - Felipe Andrade
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接