如何在约束布局中水平匹配两个元素？

Question

我想匹配背景不是完整矩形的两个视图（一个按钮和一个文本视图）。这些形状是：

左背景

右背景

任何人都可以帮助我，所以我可以像这样把它们放在一起：

xml 这两个形状的代码在这里：正确的形状：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="134dp"
    android:height="84dp"
    android:viewportWidth="134"
    android:viewportHeight="84">
  <path
      android:pathData="M24,2.06981099e-11 L110,0 C123.254834,-2.48646561e-12 134,10.745166 134,24 L134,60 C134,73.254834 123.254834,84 110,84 L0,84 L24,2.06981099e-11 Z"
      android:strokeWidth="1"
      android:fillColor="#FFD949"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
</vector>

左侧形状：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="234dp"
    android:height="84dp"
    android:viewportWidth="234"
    android:viewportHeight="84">
  <path
      android:pathData="M24,0L234,0L210,84L24,84C10.745,84 0,73.255     0,60L0,24C-0,10.745 10.745,0 24,0Z"
      android:strokeWidth="1"
      android:fillColor="#FFCD0D"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
</vector>

Answer 1

如果您试图实现负边距以重叠两个视图并将它们的背景放在一起，请尝试以下解决方案：

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"
    android:orientation="vertical"
    android:layout_width="358dp"
    android:layout_height="84dp"
    android:layout_gravity="center_horizontal">

    <Button
        android:id="@+id/lb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:background="@drawable/left_shape"
        android:text="LB"
        android:textSize="70sp"
        android:gravity="center"
        app:layout_constraintHorizontal_chainStyle="packed" />

    <android.support.v4.widget.Space
        android:id="@+id/marginSpacer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/lb"
        app:layout_constraintLeft_toRightOf="@+id/lb" />

    <TextView
        android:id="@+id/rt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/right_shape"
        android:gravity="center"
        android:textSize="38sp"
        android:layout_marginStart="85dp"
        app:layout_constraintLeft_toLeftOf="@id/marginSpacer"
        app:layout_constraintRight_toRightOf="@id/marginSpacer"
        app:layout_constraintTop_toBottomOf="@+id/marginSpacer"
        android:text="RT"/>

</android.support.constraint.ConstraintLayout>

Answer 3

此布局使所有设备在那里相同，因为您需要在应用级别 gradle 文件中添加以下依赖项..

    implementation 'com.intuit.sdp:sdp-android:1.0.4'

然后在编写下面的布局代码后，所有设备都相同..

<?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:orientation="vertical"
android:layout_width="@dimen/_300sdp"
android:layout_height="@dimen/_70sdp"
android:layout_margin="@dimen/_10sdp"
android:layout_gravity="center_horizontal">

<Button
    android:id="@+id/lb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/_32sdp"
    android:background="@drawable/left_side"
    android:textSize="@dimen/_20sdp"
    android:gravity="center"
    android:text="left"
    android:textAllCaps="false"
    app:layout_constraintHorizontal_chainStyle="packed" />

<android.support.v4.widget.Space
    android:id="@+id/marginSpacer"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@id/lb"
    app:layout_constraintLeft_toRightOf="@+id/lb" />

<TextView
    android:id="@+id/rtTvData"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/right_side"
    android:gravity="center"
    android:textSize="@dimen/_20sdp"
    android:layout_marginStart="@dimen/_70sdp"
    app:layout_constraintLeft_toLeftOf="@id/marginSpacer"
    app:layout_constraintRight_toRightOf="@id/marginSpacer"
    app:layout_constraintTop_toBottomOf="@+id/marginSpacer"
    android:text="Right"
    />
</android.support.constraint.ConstraintLayout>

如何在约束布局中水平匹配两个元素？

How to match two element horizontally in Constraint Layout?

android

android-constraintlayout