如何将约束布局包含到另一个约束布局中，并在每个约束之间设置约束

我使用的是 ConstraintLyout v1.0.1。

我想在 xml 中包含一个子 ConstraintLayout，它对应于我的全局布局的一部分(它本身就是一个 ConstraintLayout)。我将布局拆分为两个 xml，以便在其他地方使用这个子部分

我试过这个，但是我不能控制在父级中放置子约束布局的位置。我想知道是否必须将所有内容放在同一个 xml 文件中，或者它们是否是使用单独文件的解决方案。

Tmp _ 1. xml

<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="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LABEL1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp"
/>
<TextView
android:id="@+id/label_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LABEL2"
app:layout_constraintStart_toStartOf="@id/label"
app:layout_constraintEnd_toEndOf="@id/label"
app:layout_constraintTop_toBottomOf="@id/label"
android:layout_marginTop="16dp"
/>


<include layout="@layout/tmp_2" />
</android.support.constraint.ConstraintLayout>

Tmp _ 2. xml

<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="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="@+id/view_80"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="80th element"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="10dp"
android:layout_marginStart="12dp"
/>
</android.support.constraint.ConstraintLayout>

结果是这样的

Actual result

但我希望是这样

Expected result

我试过这个，但它不工作

<include
app:layout_constraintTop_toBottomOf="@id/label_2"
layout="@layout/tmp_2" />
44584 次浏览
小开
最佳答案

Actually found a solution. Android Studio does not autocomplete constraintLayout parameters in an include tag but they do have an impact on it as long as you give that include a size.

<include
layout="@layout/tmp_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/label_2"
/>
小开

You could avoid the ConstraintLayout constraints at the include item. I just <include/> it as it is.

MainActivity Layout file:

<?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">


<include
android:id="@+id/toolbarLayout"
layout="@layout/layout_toolbar" />


<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="CONTENTS"
app:layout_constraintBottom_toBottomOf="@+id/footerLayout"
app:layout_constraintEnd_toEndOf="@+id/footerLayout"
app:layout_constraintStart_toStartOf="@+id/footerLayout"
app:layout_constraintTop_toTopOf="@+id/footerLayout" />


<include
android:id="@+id/footerLayout"
layout="@layout/layout_footer" />


</android.support.constraint.ConstraintLayout>

ToolBar Layout file:

<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">


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">


<TextView
android:id="@+id/toolbarTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/hidden"
android:textColor="@android:color/white"
tools:layout_editor_absoluteX="192dp"
tools:layout_editor_absoluteY="19dp" />


</android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>
小开

To inlude one constraint layout and constraint it according to one's need, one will have to give width and height to the included layout like this :

<include
android:id="@+id/shop_card_layout"
layout="@layout/shop_card_one"
android:layout_height="wrap_content"
android:layout_width="300dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="@id/heading_tv"
app:layout_constraintTop_toBottomOf="@+id/heading_tv" />
小开

To include one constraint layout to other contraint layout to use one more contrsaint layout to each parent of include layout... Like below:

<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"
android:background="@drawable/new_landing_bg"
tools:context=".activity.DesignTestActivity">


<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">


<include layout="@layout/common_footer_layout" />


</android.support.constraint.ConstraintLayout>

this is work on my xml layout. Enjoy code.

小开

We can use a layout tag if using Constraint layout. For Linear layout we can directly include the layout.

I had a different requirement where i am having a tab view below toolbar. I had set toolbar elevation to 0dp and added a view file below the tab view so that both the tab view and toolbar looks as a single unit.

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs_container"
style="@style/tab_layout_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:tabGravity="fill"
app:tabIndicatorFullWidth="false"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/text_black_app"
app:tabTextColor="@color/txt_gray_contact_lbl" />


<LinearLayout
android:id="@+id/layout_elevation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/tabs_container">


<include layout="@layout/gray_view_for_elevation" />
</LinearLayout>


<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="100"
app:layout_constraintTop_toBottomOf="@+id/layout_elevation_view" />


</androidx.constraintlayout.widget.ConstraintLayout>

This code is for Linear layout

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorWhite"
android:orientation="vertical">


<com.google.android.material.tabs.TabLayout
style="@style/tab_layout_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="@dimen/dp_4"
app:tabGravity="fill"
app:tabIndicatorFullWidth="false"
app:tabMode="scrollable"/>


<include
android:id="@+id/layout_elevation_view"
layout="@layout/gray_view_for_elevation" />


<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_gray" />


</LinearLayout>

My elevation view file

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


<View
android:layout_width="wrap_content"
android:layout_height="@dimen/dp_1"
android:background="#80bbbbbb" />


<View
android:layout_width="wrap_content"
android:layout_height="@dimen/dp_1"
android:background="#60bbbbbb" />


<View
android:layout_width="wrap_content"
android:layout_height="@dimen/dp_1"
android:background="#50bbbbbb" />

Hope this will help.


提交答案