Question

我试图在ConstraintLayout中复制这个简单的用例。基本上它是两个彼此对齐的视图，但在父视图中居中。

没有CL，它将如下

FrameLayout
 match_parent
 match_parent

 LinearLayout
   orientation vertical
   width wrap_content
   height wrap_content
   layout_gravity center_horizontal
   gravity left

   View
    width wrap_content
   View
    width wrap_content

CL正在努力如何将它们作为一个群体集中在一起，我可以将它们各自置于中心，对左父母，右父母进行约束，但是我希望该组居中，并且在该组中，左重力。我曾尝试在两个视图的左右两侧使用障碍物，但它并未将链条水平居中。我认为，基本上我需要一个没有障碍的水平链。

编辑：

I----AAA  ----I
I----BBBBB----I
I-------------I
I-------------I

Answer 1

You can do it programmatically:

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:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="28dp"
        android:background="#303F9F"
        android:text="Short Text"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toTopOf="parent"
        android:gravity="start" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="24dp"
        android:background="#303F9F"
        android:text="This is a very long text"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@+id/guideline2"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:layout_marginRight="8dp"
        android:gravity="start" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

</android.support.constraint.ConstraintLayout>

The background color is the see the change.

In code get width of the larger TextView and set it to the smaller one.

textView1 = findViewById(R.id.textView);
textView2 = findViewById(R.id.textView2);
textView1.measure(0,0);
textView2.measure(0,0);
int len1 = textView1.getMeasuredWidth();
int len2 = textView2.getMeasuredWidth();
if (len1 > len2) {
    textView2.getLayoutParams().width = len1;
} else {
    textView1.getLayoutParams().width = len2;
}

And you don't always have to use ConstraintLayout.

Answer 2

也许下面的代码会解决您的问题

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text2 Test2 Test2"
    app:layout_constraintTop_toBottomOf="@id/centered"
    app:layout_constraintStart_toStartOf="@id/text1" />

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/centered"
    app:layout_constraintStart_toStartOf="parent" />

<android.support.constraint.Guideline
    android:id="@+id/centered"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.50" />

Answer 3

假设您有两个视图（view1较短但位于顶部，view2较长但位于底部）。

您可以这样做：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:apps="http://schemas.android.com/apk/res-auto">

    <View
        android:id="@+id/view1"
        android:layout_width="120dp"
        android:layout_height="30dp"
        android:background="@android:color/holo_blue_bright"
        apps:layout_constraintLeft_toLeftOf="@+id/view2"
        apps:layout_constraintTop_toTopOf="parent"
        apps:layout_constraintBottom_toTopOf="@+id/view2"
        apps:layout_constraintVertical_chainStyle="packed"
        />

    <View
        android:id="@+id/view2"
        android:layout_width="240dp"
        android:layout_height="30dp"
        android:background="@android:color/holo_blue_dark"
        apps:layout_constraintLeft_toLeftOf="parent"
        apps:layout_constraintRight_toRightOf="parent"
        apps:layout_constraintTop_toBottomOf="@+id/view1"
        apps:layout_constraintBottom_toBottomOf="parent"
        />

</android.support.constraint.ConstraintLayout>

请注意layout_constraintVertical_chainStyle设置为packed，这两个视图会被推到一起。

此外，请观察两个视图之间的约束，以使其按照您希望的方式布局。在某种程度上，View2指示view1如何居中。在这里使用ConstraintLayout的一个好处是你不需要定义一个额外的组（ViewGroup）只是为了将两个视图混为一谈，只需要很好地定义约束，它就可以了它的魔力。

这将产生如下内容：

我不确定这是不是您要找的？

如何使用ConstraintLayout水平居中2个垂直视图

3 个答案: