android - 如何把这个LinearLayout和RelativeLayout变成ConstraintLayout呢？

Question

我正在尝试开始使用 ConstrainLayout，但发现它很难使用。我有一个像屏幕一样设置的布局，它使用LinearLayout和RelativeLayout，非常简单易实现。这是布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_stay_awake"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Stay awake"
            android:padding="10dp"/>
        <Switch
            android:id="@+id/switch_stay_awake"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"/>
    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_notification"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Enable Notification"
            android:padding="10dp"/>
        <Switch
            android:id="@+id/switch_notification"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"/>
    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Enable location"
            android:padding="10dp"/>
        <Switch
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"/>
    </RelativeLayout>

</LinearLayout>

这是它的样子:

现在我想构建相同的设置 UI，但使用 ConstrainLayout，这是我为这个设置 UI 使用的 ConstrainLayout。

<?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:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv_stay_awake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Stay awake"/>
    <Switch
        android:id="@+id/switch_stay_awake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent" />


    <TextView
        android:id="@+id/tv_notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable Notification"
        app:layout_constraintTop_toBottomOf="@+id/tv_stay_awake"/>

    <Switch
        android:id="@+id/switch_notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_stay_awake"/>


    <TextView
        android:id="@+id/tv_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable location"
        app:layout_constraintTop_toBottomOf="@+id/tv_notification"/>
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_notification"/>

</android.support.constraint.ConstraintLayout>

结果是这样的:

如您所见，Switch 按钮未与 TextView 对齐。我怎样才能将它们与同一行级别的 TextView 对齐，以便它看起来与我对 LinearyLayout 和 RelativeLayout 所做的一样？我知道我可以将 TextView 和 Switch 按钮放在每一行的 RelativeLayout 中，但如果我这样做，就没有理由使用 ConstrainLayout。

Answer 1

你可以试试这个。

在您的 Switch XML 代码中添加 app:layout_constraintBaseline_toBaselineOf="@+id/tv_notification"。

<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/tv_stay_awake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Stay awake"/>

    <Switch
        android:id="@+id/switch_stay_awake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_stay_awake"
        app:layout_constraintRight_toRightOf="parent"/>


    <TextView
        android:id="@+id/tv_notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable Notification"
        app:layout_constraintTop_toBottomOf="@+id/tv_stay_awake"/>

    <Switch
        android:id="@+id/switch_notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_notification"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_stay_awake"/>


    <TextView
        android:id="@+id/tv_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Enable location"
        app:layout_constraintTop_toBottomOf="@+id/tv_notification"/>

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv_location"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_notification"/>

</android.support.constraint.ConstraintLayout>

输出