如何将此LinearLayout和RelativeLayout转换为ConstraintLayout?

3

我想开始使用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>

这是它的展示效果: enter image description here

现在我想利用ConstrainLayout来构建相同的设置UI,以下是我为此设置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>

结果如下图所示:enter image description here

从图片中可以看出,开关按钮与文本视图未对齐。如何将它们与文本视图在同一行水平对齐,使其与我使用LinearLayout和RelativeLayout创建的效果相同?我知道可以将每行的TextView和Switch按钮放入一个RelativeLayout中,但如果这样做,就没有使用ConstrainLayout的理由。

1个回答

4
您可以尝试这样做。
在您的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>

输出

输入图片描述


现在我想在每个设置之间添加一条分隔线,有没有不引入新视图的方法来实现它? - s-hunter
我没有其他办法。如果我想要做这个,我会添加一个新的“View”作为分割线。 - KeLiuyue

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接