ConstraintLayout 布局中使用 weight

本文介绍如何利用ConstraintLayout的weight属性,实现两个控件在屏幕上等宽度显示的技术细节。通过设置layout_constraintHorizontal_weight,使左右两个fragment各占屏幕一半宽度,达到美观且响应式的布局效果。

比如要使两个控件各占一半,就要使用 weight,这个时候关键点在于要两个控件互相关联:

<?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=".MainActivity">


    <fragment
        android:id="@+id/left_fragment"
        android:name="com.example.fragmenttest.LeftFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/right_fragment"
        app:layout_constraintTop_toTopOf="parent" />

    <fragment
        android:id="@+id/right_fragment"
        android:name="com.example.fragmenttest.RightFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/left_fragment"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

效果:

参考:https://blog.youkuaiyun.com/weixin_39178206/article/details/87879784 

ConstraintLayout 布局中,可以通过以下几种方法控制 `<include>` 布局的位置: ### 使用约束属性 可以利用 ConstraintLayout 的约束属性来指定 `<include>` 布局与父布局或其他视图的相对位置。例如,要将 `<include>` 布局的顶部与父布局的顶部对齐,左边和右边分别与父布局的左边和右边对齐,并且高度为父布局高度的 0.075 倍,可以这样设置: ```xml <androidx.constraintlayout.widget.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"> <include layout="@layout/base_title" android:id="@+id/edit_title" android:layout_height="0dp" android:layout_width="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintHeight_percent="0.075" /> </androidx.constraintlayout.widget.ConstraintLayout> ``` 上述代码中,`app:layout_constraintTop_toTopOf="parent"` 表示 `<include>` 布局的顶部与父布局的顶部对齐,`app:layout_constraintLeft_toLeftOf="parent"` 和 `app:layout_constraintRight_toRightOf="parent"` 分别表示左右对齐,`app:layout_constraintHeight_percent="0.075"` 用于设置高度比例[^1]。 ### 使用权重 在 ConstraintLayout 中也可以为 `<include>` 布局设置权重,使其与其他控件按比例分配空间。例如: ```xml <androidx.constraintlayout.widget.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" android:orientation="vertical"> <LinearLayout android:id="@+id/fragment" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toTopOf="@id/main_bottom_layout" app:layout_constraintVertical_weight="1" android:orientation="horizontal" /> <include android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@id/fragment" app:layout_constraintBottom_toBottomOf="parent" android:id="@+id/main_bottom_layout" layout="@layout/layout_bottom_bars" /> </androidx.constraintlayout.widget.ConstraintLayout> ``` 这里,`LinearLayout` 和 `<include>` 布局通过 `app:layout_constraintVertical_weight` 来分配垂直方向的空间,`LinearLayout` 的权重为 1,`<include>` 布局占据剩余空间[^2]。 ### 注意事项 在使用 ConstraintLayout 布局使用 `<include>` 引用布局时,可能会遇到约束属性不起作用的情况。例如: ```xml <include layout="@layout/layout_bottom" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" /> ``` 若出现这种情况,需要检查布局文件和约束属性的设置是否正确[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值