【约束布局】使用 Design 模式编辑 ConstraintLayout 约束布局 ( 添加 Guideline 引导线 | 添加 FragmentContainerView )

韩曙亮

发布于 2023-03-30 19:22:22

9610

发布于 2023-03-30 19:22:22

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

一、使用 Design 模式编辑 ConstraintLayout 约束布局

一、使用 Design 模式编辑 ConstraintLayout 约束布局

向约束布局 ConstraintLayout 中添加两个 Fragment , 垂直方向各占 50 % , 一个在屏幕上半部分 , 一个占据屏幕下半部分 ;

1、添加 Guideline 引导线

向约束布局中添加一条 Guideline 引导线 , 点击布局中的 Guidelines 按钮 ,

在弹出的下拉菜单中 , 选择 Horizontal Guideline 水平引导线 ,

此时在下方的界面中 , 就会出现一条 Guideline 引导线 , 默认显示的单位是像素 ,

双击左侧的三角按钮 , 就可以切换像素值 / 百分比显示 , 百分比显示效果如下 :

将其拖动到 50% 处 , 该 Guideline 引导线作为 Fragment 的分割线 , 同时 Fragment 的底部可以依赖该引导线 ;

2、添加 Fragment1

要想向约束布局中添加 Fragment , 首先要创建 Fragment 的类 , 这里创建两个 Fragment 类 :

Fragment1 :

package kim.hsl.livedatademo

import androidx.fragment.app.Fragment

class Fragment1: Fragment() {
}

Fragment2 :

package kim.hsl.livedatademo

import androidx.fragment.app.Fragment

class Fragment2: Fragment() {
}

在布局文件的 Design 模式下 , 将 FragmentContainerView 拖动到界面上半部分 ,

拖动鼠标松开时 , 会弹出对话框 , 让我们选择要插入那个 Fragment , 之前创建了两个 Fragment , 分别是

Fragment1
Fragment2

这里先插入 Fragment1 ,

选择 Fragment1 后 , 成功插入 , 右侧提示没有水平依赖和垂直依赖 ;

生成的代码如下 :

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragmentContainerView1"
        android:name="kim.hsl.livedatademo.Fragment1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteX="204dp"
        tools:layout_editor_absoluteY="182dp" />

拖动鼠标为其添加依赖 :

将右侧的布局宽高设置为 0dp , 也就是默认 match_parent 充满布局 ;

生成的代码如下 :

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragmentContainerView1"
        android:name="kim.hsl.livedatademo.Fragment1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />