首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在ConstraintLayout中垂直拉伸中间视图

在ConstraintLayout中垂直拉伸中间视图,可以通过以下步骤实现:

  1. 首先,在布局文件中使用ConstraintLayout作为根布局。
  2. 在布局文件中定义三个视图,分别是上方视图、中间视图和下方视图。
  3. 使用约束布局的约束属性,将上方视图的底部约束到父布局的顶部,将下方视图的顶部约束到父布局的底部。
  4. 将中间视图的顶部约束到上方视图的底部,底部约束到下方视图的顶部。
  5. 设置中间视图的高度为0dp,这样中间视图的高度将会自动根据约束进行拉伸。

以下是一个示例代码:

代码语言:txt
复制
<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">

    <View
        android:id="@+id/topView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/middleView"/>

    <View
        android:id="@+id/middleView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@+id/topView"
        app:layout_constraintBottom_toTopOf="@+id/bottomView"/>

    <View
        android:id="@+id/bottomView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/middleView"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在这个示例中,上方视图(topView)的底部约束到父布局的顶部,中间视图(middleView)的顶部约束到上方视图的底部,底部约束到下方视图(bottomView)的顶部,下方视图的顶部约束到父布局的底部。中间视图的高度设置为0dp,这样中间视图的高度将会根据约束进行拉伸。

这种布局方式适用于需要在垂直方向上拉伸中间视图的场景,例如聊天界面中的消息列表,可以根据消息数量自动调整中间视图的高度。对应的腾讯云产品可以参考腾讯云移动推送(https://cloud.tencent.com/product/tpns)来实现消息推送功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Android从零单排系列三十四】《Android布局介绍——ConstraintLayout

开发者可以使用约束条件(layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等)来定义视图与其他视图或边界的关系,从而精确控制视图在布局的位置和大小.../> 设置约束条件:使用约束条件来定义视图之间的位置关系。可以将视图与其他视图或父容器的边界进行连接,并指定视图之间的水平和垂直关系等。...你可以通过预览功能(Android Studio的布局编辑器)来查看布局效果,并根据需要进行微调和修改。...> 在上面的示例,有三个视图(一个TextView和一个Button),它们使用ConstraintLayout进行布局。...开发者可以使用约束条件(layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等)来定义视图与其他视图或边界的关系,从而精确控制视图在布局的位置和大小

38920

强大的ConstraintLayout:使用ConstraintLayout打造响应式UI

ConstraintLayout里,串成一条线的特效称为Chain,打包垂直居中的配置为layout_constraintVertical_chainStyle="packed" 最终实现核心代码大致如下...在2.1的前提之下,1.2实际上是说:在尽可能保证中间视频预览区域比例为1:1的基础上,去拉伸底部面板,直到底部面板的高度到达最大值,再拉伸。 3.2....常规实现 在做这个需求的时候,笔者想来想去思前想后,没有想到如何在布局实现这种动态效果。笔者尝试了LinearLayout、RelativeLayout,都失败了。...虽然情况1、情况2界面能预期展示,但实际上,这个场景下的约束关系,并不是我们想要的约束关系。...要求:『图标 + 上层主标题 + 下层副标题』组成的整体,在ConstraintLayout内,整体居中(即水平、垂直方向都居中),需要注意的是,上层主标题和下层副标题的宽度都是可变的。

3K21
  • Android入门教程 | 使用 ConstraintLayout 构建自适应界面

    ConstraintLayout 可使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局。...约束条件 创建约束条件时,请注意以下规则: 每个视图都必须至少有两个约束条件:一个水平约束条件,一个垂直约束条件。 只能在共用同一平面的约束手柄与定位点之间创建约束条件。...因此,视图垂直平面(左侧和右侧)只能约束在另一个垂直平面上;而基准线则只能约束到其他基准线上。 每个约束句柄只能用于一个约束条件,但您可以在同一定位点上创建多个约束条件(从不同的视图)。...指定位置的字眼,Top、Bottom、End、Start,它们组合使用可用来确定相对位置:app:layout_constraint{}_to{}Of 相对父 layout 的定位 将子 view 对齐到父...> 引导线约束 Guideline 在 ConstraintLayout 添加引导线,可以方便定位。

    2.5K10

    【约束布局】ConstraintLayout 屏障 Barrier 约束 ( 简介 | 屏障适用场景 | 位置说明 | 相关属性 | 可视化操作 | 代码示例 | 总结 )

    屏障 Barrier 约束 简介 ---- 屏障 Barrier 简介 : ① 屏障 Barrier 概念 : 屏障 Barrier , 包含了多个组件 , 基于这些组件在某个方向 ( : 上,..., 注意是 1 条线 , 不是 4 条 ; ③ 可见性 : Barrier ( 屏障 ) 是不可见的 , 仅用于约束视图组件 ; ④ 位置 : Barrier ( 屏障 ) 没有位置定义 ,...引导线 : 用于组件的垂直方向的约束 ; III ....示例 : 组件 C , 在水平方向上 , C 组件的左侧必须在 A , B 两个组件的右侧 ; ① 屏障线 : 中间的白色虚线是屏障线 ; ② 屏障组件 : 该屏障 Barrier 包含...A,B 两个视图 ; ③ 屏障方向 : 该屏障的方向是右侧 , 其屏障线的位置是 A,B 两个组件 , 最右侧的组件的右边缘位置 ; 3 .

    1.5K10

    详解Android ConstraintLayout 约束布局的用法

    2017年Google发布了 Android Studio 2.3 正式版,在 Android Studio 2.3 版本中新建的Module默认的布局就是 ConstraintLayout 。...因为在上面的布局中有两个重要的属性没有写出来,但是却有默认的属性值,那就是水平、垂直的偏移比例。...layout_constraintHorizontal_bias //控件的水平偏移比例 layout_constraintVertical_bias //控件的垂直偏移比例 如果在布局文件没有明确的写出偏移比例...我们可以试试,更改Button 的偏移值试试看,比如,水平偏移0.3 , 垂直偏移0.7 , 看看效果: ?...可以看到很明显,Button 在水平方向向右偏移比例为 30% , 在垂直方向向下偏移比例为 70% 。 基线约束控键 该控键帮助你对齐任意两个widget的文字部分,与widget的大小无关。

    3.9K20

    【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )

    Guideline 引导线 属性 简介 : Guideline 引导线在 Constraintlayout 约束布局 , 需要为其设置两个属性 , 分别是 使用 “android:orientation...) , 的左右约束 , “app:layout_constraintLeft_toLeftOf” 直接约束与引导线即可 ; ① 垂直引导线 : 垂直引导线 用于组件 水平方向 的约束 , 主要约束...代码示例 : 如下代码是将组件的放在两条引导线的交点上 , 组件的左上角位置就是引导线交点 ; ① 水平约束 : 下面代码的 guideline5 是 垂直方向的引导线 , 用于 被约束组件的 水平方向的约束...; ② 垂直约束 : 下面代码的 guideline6 是 水平方向的引导线 , 用于 被约束组件的 垂直方向的约束 ; <!...代码示例 : 在布局定义了 6 条引导线 , 分别是 水平引导线 和 垂直引导线 与 3 种对应的引导线设置方式 ; <?

    3.8K10

    带你领略 ConstraintLayout 1.1 的新功能前言带你领略 ConstraintLayout 1.1 的新功能

    带你领略 ConstraintLayout 1.1 的新功能 约束布局(ConstraintLayout)通过使用 Android Studio 的可视化编辑器来为您生成绝大多数的 UI,进而达到简化...profile.visibility = GONE profile.visibility = VISIBLE 圆形约束 在约束布局,大多数约束由屏幕尺寸指定——水平和垂直。...在约束布局 1.1 版本,有一个新的类型约束 constraintCircle,它允许您指定沿着一个圆形进行约束。您不必提供水平和垂直边距,而是指定圆的角度和半径。...在这个例子,你将按如下方式指定中间的 fab: <android.support.design.widget.FloatingActionButton android:id="@+id/middle_expanded_fab...如果你想尝试试验性的优化上述<em>中</em>的 dimensions 和 chains,你可以在 <em>ConstraintLayout</em> <em>中</em>通过如下代码来启用它们: <android.support.constraint.<em>ConstraintLayout</em>

    1.7K20

    未来布局之星——ConstraintLayout

    切换视图 点击菜单栏的的Show Design、Show Blueprint和Show Design + Blueprint按钮可以对操作视图进行切换,如下图所示: ?...切换视图 添加约束 百闻不如一见,先来看看添加约束的操作,如下图所示: ?...Button控件约束 将按钮下边圆圈拖至ConstraintLayout底部,则按钮移动至底部;再将按钮上边圆圈拖动至ConstraintLayout顶部,垂直方向上有两个约束的按钮控件就会实现垂直居中...除了居中,约束还可以设置控件两边到边界之间的距离比例,通过在右侧属性面板,拖动水平和垂直方向的进度条来调整两边距离的比例。 ?...这种相对于父容器的模式在ConstraintLayout很少会使用。

    1.9K20

    Kotlin学习日志(六)控件使用

    此时的函数体代码还有两个值得注意的地方: (1)因为视图View是基本的视图类型,并不存在文本属性,所以需要把这个视图对象的变量类型转换为按钮Button,然后才能得到按钮对象的文本,Kotlin的类型转换通过关键字...setScaleType : 设置图形的拉伸类型,在Kotlin可直接给属性scaleType赋值,如下表所示: scaleType类的拉伸类型 说明 ScaleType.FIT_XY 拉伸图片使之正好填满视图...(图片可能被拉伸变形) ScaleType.FIT_START 拉伸图片使之位于视图上部 ScaleType.FIT_CENTER 拉伸图片使之位于视图中间 ScaleType.FIT_END 拉伸图片使之位于视图下部...ScaleType.CENTER 保持图片原尺寸,并使之位于视图中间 ScaleType.CENTER_CROP 拉伸图片使之充满视图,并位于视图中间 ScaleType.CENTER_INSIDE...使图片位于视图中间(只压不拉),当图片尺寸大于视图时,centerInside等同于fitCenter:当图片尺寸小于视图时,centerInside等同于center 然后代码来演示一遍 布局文件

    1.8K30

    带你领略 ConstraintLayout 1.1 的新功能

    profile.visibility = GONE profile.visibility = VISIBLE 圆形约束 在约束布局,大多数约束由屏幕尺寸指定——水平和垂直。...在约束布局 1.1 版本,有一个新的类型约束 constraintCircle,它允许您指定沿着一个圆形进行约束。您不必提供水平和垂直边距,而是指定圆的角度和半径。...在这个例子,你将按如下方式指定中间的 fab: <android.support.design.widget.FloatingActionButton android:id="@+id/middle_expanded_fab...然后,您可以将 ConstraintSet 应用于 <em>ConstraintLayout</em>,更新所有约束以匹配 ConstraintSet <em>中</em>的约束。...如果你想尝试试验性的优化上述<em>中</em>的 dimensions 和 chains,你可以在 <em>ConstraintLayout</em> <em>中</em>通过如下代码来启用它们: <android.support.constraint.<em>ConstraintLayout</em>

    1.5K20

    【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )

    , 其 解决了 开发 复杂布局 , 出现的布局嵌套过多问题 , 减少了界面绘制的时间 ; 2.意义 : 使用 ConstraintLayout , 视图层级会变得非常精简 , 并在 Android Studio...约束布局 更加灵活 , 并且 ConstraintLayout 能在 Android Studio 布局编辑器中进行编辑 ; 5.可视化操作 : 在 布局编辑器 工具 , 可以设置所有的属性 , 该...约束 简介 ( 1 ) 约束个数要求 ConstraintLayout 布局 单个组件 约束个数要求 : 1.约束要求 : 在 ConstraintLayout 设置 View 的位置 , 至少为...) : 如下图 , 没有为 C 组件设置 垂直约束 , 在布局编辑器 其 在 A 组件的下方显示 , 但是 在设备上运行时 , C 组件 左右 与 A 组件对齐 , 但是其显示在 屏幕的 最顶端 ,...因为 C 组件没有垂直方向的约束 ; 4.约束错误信息 : 尽管 组件 缺少一个约束 , 不会引起编译错误 , 但是 布局编辑器 会在工具栏 显示 “missing constraints

    5.1K41

    ConstraintLayout 之 Guideline、Barrier、Chains和Groups

    Barrier可以是垂直或水平的,并且可以创建到引用视图的顶部、底部、左侧或右侧。 以下示例可以看出,当调整TextView的大小时,Barrier调整其大小和受限视图移动。 ?...要创建链,需要选择要组成链的一部分元素,然后右键单击“链”-“创建水平/垂直链”。 ? constraintlayout_android_chains.gif 然后您就可以查看链的不同模式了。...constraint_layout_chain_modes.png 创建链时与其他略有不同,因为所有视图都具有对它们定义的约束,并且链的第一个项指定了chainSyle。...不要把这与Android的普通ViewGroups混淆。ConstraintLayout的一个组仅包含对视图ID的引用,而不将组合视图嵌套。...2017.12.27更新 ConstraintLayout发布了1.1.0 beta3版本。这个版本添加了Circular Positioning。

    1.4K50

    FAQ | 为大屏幕设备构建应用的常见问题解答

    此外开发者还需要考虑可折叠设备的形态,高级布局支持等。...布局和输入都很重要,尤其是当您开始考虑更大屏幕的设备时,如需创建适合不同屏幕尺寸的 自适应布局,最好的方法是将 ConstraintLayout 用作界面的基本布局。...使用 ConstraintLayout,您可以根据布局中视图之间的空间关系指定每个视图的位置和大小。这样一来,当屏幕尺寸改变时,所有视图都可以一起移动和拉伸。...当设备处于半折叠形态的时候,设备还可能处于两种折叠状态,一种是桌面模式 (水平折叠边),类似把半折叠形态的手机放在桌子上;另一种是图书模式 (垂直折叠边),类似把半折叠形态的手机拿在手上,像在看书一样。...这些都是需要考虑的非常重要的事项,如何在不同折叠形态下操作起来符合人体工学设计。

    3.5K10

    css笔记 - transform学习笔记(二)

    2 + 'px',第二个坐标是(border-width + padding +height) / 2 + 'px'; transform-style 被嵌套元素在3D空间如何显示 规定被嵌套元素如何在...方法可能的配置 skew:翻转给定的角度,xdeg水平翻转度数,ydeg垂直翻转度数。...垂直方向拉伸变形 同上 2 skew(n-deg) 延伸,只写一个也起作用,不过是只默认作用于x轴水平拉伸。...,同skew的区别是:水平拉伸不带斜线角度 2 scaleY(y) 纵向缩放 同上 正值时竖向拉伸,同skew的区别是:垂直拉伸不带斜线角度 3D scaleZ(z) 纵深方向缩放 同上 2d图形设置没有多大的区别...x-axis 定义该视图在x轴上的位置、 y-axis 定义该视图在y轴上的位置 perspective-visibility 定义元素在不面对屏幕时是否可见 混合写法 多个属性值之间用逗号隔开即可。

    1.7K10

    伸缩布局(CSS3)

    CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开可以发挥极大的作用。...让子元素在父容器中间显示 space-between 项目位于各行之间留有空白的容器内。...左右的盒子贴近父盒子,中间的平均分布空白间距 space-around 项目位于各行之前、之间、之后都留有空白的容器内。...相当于给每个盒子添加了左右margin外边距 4、align-items调整侧轴对齐(垂直对齐) 子盒子如何在父盒子里面垂直对齐(单行) 值 描述 白话文 stretch 默认值。...项目被拉伸以适应容器。 让子元素的高度拉伸适用父容器(子元素不给高度的前提下) center 项目位于容器的中心。 垂直居中 flex-start 项目位于容器的开头。

    4.4K50

    可折叠设备的桌面模式

    △ Duo 应用在优化前后的对比 在这篇文章,您会了解到一个简单而又高效的方式来使您的应用在可折叠设备上运行时适配布局。...这是一个简单的媒体播放器案例,它会自动调节尺寸以避免让折叠处出现在画面中间,并且调整播放控制组件的位置,从屏幕完全展开时嵌入画面,变为当屏幕部分折叠时显示为单独的面板。...第三个视图是一个 ReactiveGuide。它被放置在另外两个视图中间,并且以 Guideline 的形式作为另外两个视图的划分。...如果您要实现横屏功能,那么大多数时候,边界会以一个在屏幕垂直居中的矩形来表示,它和屏幕一样宽,并且高度与铰链相同 (对于可折叠设备而言值为 0,对于双屏幕设备而言会是两个屏幕之间的距离)。...* 这里的计算默认会包含内边距。

    2.4K30
    领券