代码之家 › 专栏 › 技术社区 › Reejesh PK

如何在约束布局中链接组?

android-constraintlayout xml android

Reejesh PK · 技术社区 · 8 年前

This is the layout I am going to do using Constraint Layout.

我想创建上面的布局,而不需要任何视图嵌套,这是使用约束布局的优点之一。

这是一个简单的布局。但我希望在布局中添加垂直链接。

如果我添加垂直链接,每个视图都将展开。但我的条件是文本视图和视图(水平线)应该作为一个组放在一起。

我要把那群人绑起来。我尝试了以下方法:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activities.Settings">

    <include
        android:id="@+id/toolbarLayout"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/cancelPolicy"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_small"
        android:text="@string/canc_pol"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/toolbarLayout" />

    <View
        android:id="@+id/cancelPolicyLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/cancelPolicy" />

    <android.support.constraint.Group
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintTop_toTopOf="@id/toolbarLayout"
        app:layout_constraintBottom_toTopOf="@id/termsAndCondGroup"
        android:id="@+id/cancelPolicyGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="cancelPolicy,cancelPolicyLine" />


    <TextView
        android:id="@+id/termsAndCond"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_small"
        android:text="@string/t_and_c"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/cancelPolicyLine" />

    <View
        android:id="@+id/termsAndCondLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/termsAndCond" />

    <android.support.constraint.Group
        app:constraint_referenced_ids="termsAndCond,termsAndCondLine"
        app:layout_constraintTop_toBottomOf="@id/cancelPolicyGroup"
        app:layout_constraintBottom_toTopOf="@id/privatePolicyGroup"
        android:id="@+id/termsAndCondGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/privatePolicy"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_small"
        android:text="@string/priv_pol"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/termsAndCondLine" />

    <View
        android:id="@+id/privatePolicyLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/privatePolicy" />

    <android.support.constraint.Group
        android:id="@+id/privatePolicyGroup"
        app:layout_constraintTop_toBottomOf="@id/termsAndCondGroup"
        app:layout_constraintBottom_toTopOf="@id/aboutGroup"
        app:constraint_referenced_ids="privatePolicy,privatePolicyLine"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/about"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_small"
        android:text="@string/about"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/privatePolicyLine" />

    <View
        android:id="@+id/aboutLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/about" />

    <android.support.constraint.Group
        android:id="@+id/aboutGroup"
        app:layout_constraintTop_toBottomOf="@id/privatePolicyGroup"
        app:layout_constraintBottom_toBottomOf="@id/guidelineBottom"
        app:constraint_referenced_ids="about,aboutLine"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


    <android.support.constraint.Guideline
        android:id="@+id/guidelineTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0" />

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

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

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

    </android.support.constraint.ConstraintLayout>

但只有这两组人被拴在了一起,他们的观点仍然是一样的。 This is What i got. 我想知道我们是否可以在不嵌套布局的情况下链接视图组。

2 回复 | 直到 8 年前

Reejesh PK 8 年前

最后,我终于明白了:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activities.Settings">

    <include
        android:id="@+id/toolbarLayout"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/cancelPolicy"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_small"
        android:text="@string/canc_pol"
        app:layout_constraintBottom_toTopOf="@id/cancelPolicyLine"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toTopOf="@id/cancelPolicyGroup"
        app:layout_constraintVertical_chainStyle="packed" />

    <View
        android:id="@+id/cancelPolicyLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintBottom_toBottomOf="@id/cancelPolicyGroup"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/cancelPolicy" />

    <android.support.constraint.Group
        android:id="@+id/cancelPolicyGroup"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:constraint_referenced_ids="cancelPolicy,cancelPolicyLine"
        app:layout_constraintBottom_toTopOf="@id/termsAndCondGroup"
        app:layout_constraintTop_toBottomOf="@id/toolbarLayout"
        app:layout_constraintVertical_chainStyle="spread" />

    <TextView
        android:id="@+id/termsAndCond"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_small"
        android:text="@string/t_and_c"
        app:layout_constraintBottom_toTopOf="@id/termsAndCondLine"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toTopOf="@id/termsAndCondGroup"
        app:layout_constraintVertical_chainStyle="packed" />

    <View
        android:id="@+id/termsAndCondLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintBottom_toBottomOf="@id/termsAndCondGroup"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/termsAndCond" />

    <android.support.constraint.Group
        android:id="@+id/termsAndCondGroup"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:constraint_referenced_ids="termsAndCond,termsAndCondLine"
        app:layout_constraintBottom_toTopOf="@id/privatePolicyGroup"
        app:layout_constraintTop_toBottomOf="@id/cancelPolicyGroup" />

    <TextView
        android:id="@+id/privatePolicy"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_small"
        android:text="@string/priv_pol"
        app:layout_constraintBottom_toTopOf="@id/privatePolicyLine"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toTopOf="@id/privatePolicyGroup"
        app:layout_constraintVertical_chainStyle="packed" />

    <View
        android:id="@+id/privatePolicyLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintBottom_toBottomOf="@id/privatePolicyGroup"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/privatePolicy" />

    <android.support.constraint.Group
        android:id="@+id/privatePolicyGroup"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:constraint_referenced_ids="privatePolicy,privatePolicyLine"
        app:layout_constraintBottom_toTopOf="@id/aboutGroup"
        app:layout_constraintTop_toBottomOf="@id/termsAndCondGroup" />

    <TextView
        android:id="@+id/about"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_small"
        android:text="@string/about"
        app:layout_constraintBottom_toTopOf="@id/aboutLine"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toTopOf="@id/aboutGroup"
        app:layout_constraintVertical_chainStyle="packed" />

    <View
        android:id="@+id/aboutLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintBottom_toBottomOf="@id/aboutGroup"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/about" />

    <android.support.constraint.Group
        android:id="@+id/aboutGroup"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:constraint_referenced_ids="about,aboutLine"
        app:layout_constraintBottom_toBottomOf="@id/guidelineBottom"
        app:layout_constraintTop_toBottomOf="@id/privatePolicyGroup" />


    <android.support.constraint.Guideline
        android:id="@+id/guidelineTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineBottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.6" />

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

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

</android.support.constraint.ConstraintLayout>

我只是把高度设为0,并将我的视图放置在这些组中,使这些组在整个布局中分散开来。我得到这个: Output

对于任何试图在整个屏幕中传播视图的人,只需将垂直的指导线设置为 app:layout_constraintGuide_percent="1"

vikas singh 8 年前

试试这个。。。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/toolbarLayout"
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/cancelPolicy"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="canc_pol"
        app:layout_constraintBottom_toTopOf="@+id/cancelPolicyLine"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@+id/toolbarLayout" />

    <View
        android:id="@+id/cancelPolicyLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@+id/cancelPolicy" />

    <android.support.constraint.Group
        android:id="@+id/cancelPolicyGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="cancelPolicy,cancelPolicyLine"
        app:layout_constraintBottom_toTopOf="@id/termsAndCondGroup"
        app:layout_constraintTop_toTopOf="@id/toolbarLayout"
        app:layout_constraintVertical_chainStyle="spread" />


    <TextView
        android:id="@+id/termsAndCond"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="t_and_c"
        app:layout_constraintBottom_toTopOf="@+id/termsAndCondLine"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@+id/termsAndCondGroup" />

    <View
        android:id="@+id/termsAndCondLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@+id/termsAndCond" />

    <android.support.constraint.Group
        android:id="@+id/termsAndCondGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="termsAndCond,termsAndCondLine"
        app:layout_constraintBottom_toTopOf="@id/privatePolicyGroup"
        app:layout_constraintTop_toBottomOf="@id/cancelPolicyGroup" />

    <TextView
        android:id="@+id/privatePolicy"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="priv_pol"
        app:layout_constraintBottom_toTopOf="@+id/privatePolicyLine"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@+id/privatePolicyGroup" />

    <View
        android:id="@+id/privatePolicyLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@+id/privatePolicy" />

    <android.support.constraint.Group
        android:id="@+id/privatePolicyGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="privatePolicy,privatePolicyLine"
        app:layout_constraintBottom_toTopOf="@id/aboutGroup"
        app:layout_constraintTop_toBottomOf="@id/termsAndCondGroup" />

    <TextView
        android:id="@+id/about"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="about"
        app:layout_constraintBottom_toTopOf="@+id/aboutLine"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@+id/aboutGroup" />

    <View
        android:id="@+id/aboutLine"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#c0c0c0"
        app:layout_constraintEnd_toEndOf="@id/guidelineRight"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@+id/about" />

    <android.support.constraint.Group
        android:id="@+id/aboutGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="about,aboutLine"
        app:layout_constraintBottom_toBottomOf="@id/guidelineBottom"
        app:layout_constraintTop_toBottomOf="@id/privatePolicyGroup" />


    <android.support.constraint.Guideline
        android:id="@+id/guidelineTop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0" />

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

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

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

</android.support.constraint.ConstraintLayout>

像这样的输出。。。