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

将ImageView与ConstraintLayout中的TextView对齐

可以通过使用ConstraintLayout的约束属性来实现。具体步骤如下:

  1. 在布局文件中,使用ConstraintLayout作为根布局,并添加一个ImageView和一个TextView。
代码语言: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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/your_image"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.5"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Your Text"
        app:layout_constraintStart_toEndOf="@id/imageView"
        app:layout_constraintTop_toTopOf="@id/imageView"
        app:layout_constraintBottom_toBottomOf="@id/imageView"/>

</androidx.constraintlayout.widget.ConstraintLayout>
  1. 在ImageView的约束属性中,使用app:layout_constraintStart_toStartOf="parent"将其左边缘与父布局的左边缘对齐,app:layout_constraintTop_toTopOf="parent"将其顶部与父布局的顶部对齐,app:layout_constraintBottom_toBottomOf="parent"将其底部与父布局的底部对齐,app:layout_constraintVertical_bias="0.5"将其垂直居中对齐。
  2. 在TextView的约束属性中,使用app:layout_constraintStart_toEndOf="@id/imageView"将其左边缘与ImageView的右边缘对齐,app:layout_constraintTop_toTopOf="@id/imageView"将其顶部与ImageView的顶部对齐,app:layout_constraintBottom_toBottomOf="@id/imageView"将其底部与ImageView的底部对齐。

这样,ImageView和TextView就会在ConstraintLayout中水平对齐,并且TextView的顶部和底部与ImageView对齐。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android ConstraintLayout详解「建议收藏」

最终你将会在Android Studio编辑构建一个相对复杂Layout。...例如你有两个不同尺寸widget但是你想要他们文字部分对齐。 《ConstraintLayout从入门到放弃》 太长;别读 5....我们可以在TextView顶部控键ImageView底部控键创建一个约束,如图: 移除约束:移除某个约束只需点击指定约束控键;移除全部约束需要点击如下按钮: 下一步,创建ImageView...它在UI编辑器右侧。附带有已选择widget各种相关属性,而且还显示了该视图是如何对齐约束。...使用Inspector面板来修改最右边buttontext为@string/upload以及左侧改为@string/discard 一个TextView和一个Plain Text放到layout

1.5K30

代码实验室--带你一步步理解使用 ConstraintLayout

学到什么 新布局管理器使用约束系统 创建约束以构建灵活且高效布局 新布局编辑器各种特性 你所需准备 Android Studio 2.2 preview 或者更新版本 样例代码 获取样例代码...这种手柄在此 codelab 也被称作锚点. 基准线约束手柄: 基准线约束 handle 帮助你对齐两个控件文本区域, 控件尺寸无关....在我们开始之前, 确保布局已经有一个 ImageView 和一个 TextView. 这里我们目标是创建已经在布局上 ImageView, 容器以及 TextView 之间约束....假定我们需要最终布局 TextViewImageView 下面. 为了实现, 我们可以如下所示创建一个 TextView 上锚点和 ImageView 底锚点之间约束....此时你可以通过添加其他元素方式探索一下各种 View 和 UI 生成器. 在下一节我们学习Inspector.

2.6K60

ConstraintLayout使用场景必知必会

image-20201231135427254 复杂元素相对居中 在整个View,针对某个固定元素,其它元素围绕它做各种对齐方式,在之前是很难直接完成,即使是使用-margin方式,也很难实现动态可变尺寸居中...百分比对齐ConstraintLayout,虽然不能使用-margin方式来完成传统布局一些错位效果,但是可以借助Space来实现类似的功能,例如借助Space来实现左边TextView在右边...TextView某一百分比(或者是dp)对齐场景。...角度布局 通过角度方式来对元素进行排列,在传统布局,只能通过FrameLayout,并通过动态计算方式,角度换算为边距方式来布局,但通过ConstraintLayout,则变非常简单。...Email和Password两个TextView宽度可能因为文字不一样而不同,需要他们整体取最大宽度后,右边元素进行对齐,如下所示。 ?

1.2K20

Constraintlayout约束布局三问

但是ConstraintLayout功能可多了去了,可以设置比例,设置在控件位置,可以设置view中心距离,还可以设置辅助线。..." 我底部父view底部对齐 居中效果 设置位置,左边父布局左边对齐,右边父布局右边对齐,就会形成左右一个平局拉力,也就居中显示父布局了。...app:layout_constraintHorizontal_bias="0.3" 通过该属性可以设置在父布局显示位置,按比例显示,比如0.3就代表在3/10位置。...在Constraintlayout,可以画辅助线,可以理解为一个实际view,一条线,但是不会显示。...比如有个需求,有两个textview,不知道哪个textview更长,我需要在更长textview右边显示一个imageview,就可以把两个textview设置为一个整体。

1.5K10

JetPack--DataBinding

MVP和MVVM,ViewModelPresenter很类似,只不过ViewModel和View层多了双向绑定,当ViewModel数据更改,View层能够知道,反之,View层数据改变,ViewModel...ViewModelLiveData可以被观测,进而在Activity中观测到值发生变化来更新ui,结合DataBinding,我们可以直接在xml设置ViewModel,进一步简化逻辑,使我们MVVM...构架更加低耦合 一、初识DataBinding DataBinding是一个可以xml转换为对象工具,我们知道对象属性是可以赋值,所以我们可以直接只用变量来赋值xml上属性,使得它更据灵活性...如果我们实体类star属性为int型,有一个静态全局函数根据传入star返回一个字符串,那么怎么调用它 package com.aruba.databinding; /** * Created...支持双向绑定,前面我们实现了单向绑定,当变量值发生变化,那么控件上也会更新,双向绑定和单向绑定对比,新增了如果控件属性值发生变化,那么变量值也会发生变化 1.BaseObservable 首先定义一个实体类

1.6K10

ConstraintLayout 使用详解,减少嵌套 UI, 提升性能

要想B竖直方向A平行的话,通过如下代码: app:layout_constraintTop_toTopOf=“@+id/txt_a”;B上边和A上边对齐 app:layout_constraintBottom_toBottomOf...如下: <ImageView ... /> <TextView app:layout_constraintTop_toTopOf="@+id/image" app:layout_constraintBottom_toTopOf...aligned none chain chain2 绝对对齐(也就是网格对齐方式) 默认方式,会排成一排,屏幕宽度不够放时,2边出去 和绝对对齐有点出入是,比如6个元素,第一排4个,第二排是2个,这...点击“恢复”后,又回到原来样子。注意2个布局,要改变约束元素id要保持一致,否则失效。...主要是 ConstraintLayout 各种用法进行总结。

1.2K20

Android视图绑定ViewBinding使用

分析 本文主要从以下方面对ViewBinding进行分析: 使用能解决什么问题; 使用流程; 之前方法比较; 原理; 1.使用能解决什么问题 顾名思义ViewBinding意思就是如何view代码绑定在一起...layout文件最外层View,此例是一个ConstraintLayout....而且其仅存在某一个配置下layout文件那些view对应字段标记为@Nullable ,例如本例: @NonNull public final TextView tvContent; 而且...简洁优雅: 绑定view模板代码自动生成到了其他类,使controlor类(Activity,Fragment)更加清晰了。 4.原理 通过上面分析,估计你对其原理也猜八九不离十了。...rootView, @NonNull ImageView imgShow, @NonNull TextView tvContent) { this.rootView = rootView

2.5K10

ConstraintLayout 想说爱你不容易 (二)

,单纯 _bias 偏向无效果; _bias 偏向权重无关系,所谓偏向,是水平或竖直某一端距边缘剩余空间占比; _bias 默认为 0.5 居中展示,整体范围是 [0.0, 1.0]; <Button...,以此控件作为圆形中心; app:layout_constraintCircleAngle 用来设置两个控件相对角度,其范围是 [0, 360],以顺时针方向,竖直向上为 0,数学坐标系一致;... widget 权重,ConstraintLayout 也可以通过 _weight 设置权重效果;其中使用权重时需优先设置好 Chains 链式结构; <View android:id="@...Gone Margins 隐藏外边距 在应用<em>中</em>,margins 为外边距,在使用 <em>ConstraintLayout</em> 关联布局时,添了 _goneMargin 属性;即控件 B 是以控件 A...作为关联基础,当控件 A 动态隐藏时,可以通过 _goneMargin 设置控件 B <em>的</em>新<em>的</em>外边距;其中 _goneMargin 属性需要设置在非隐藏控件 B <em>中</em>; <<em>TextView</em> android

84621

Android视图绑定ViewBinding使用

分析 本文主要从以下方面对ViewBinding进行分析: 使用能解决什么问题; 使用流程; 之前方法比较; 原理; 1.使用能解决什么问题 顾名思义ViewBinding意思就是如何view代码绑定在一起...()方法可以获得layout文件最外层View,此例是一个ConstraintLayout....,例如不小心一个TextView错误赋值给一个Button变量,都会报错,这一错误很容易出现,关键在错误还出现在运行时,而不是编译时!...而且其仅存在某一个配置下layout文件那些view对应字段标记为@Nullable ,例如本例: @NonNull public final TextView tvContent; 而且...简洁优雅: 绑定view模板代码自动生成到了其他类,使controlor类(Activity,Fragment)更加清晰了。 4.原理 通过上面分析,估计你对其原理也猜八九不离十了。

2.6K20

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

它与 RelativeLayout 相似,其中所有的视图均根据同级视图父布局之间关系进行布局,但其灵活性要高于 RelativeLayout,并且更易于 Android Studio 布局编辑器配合使用...第一个Start表示自身起始位置(默认是左边)。第二个toStartOf表示对齐参照物起始位置。 app:layout_constraintTop_toTopOf也类似。参照物顶部对齐。...指定位置字眼,如Top、Bottom、End、Start,它们组合使用可用来确定相对位置:app:layout_constraint{}_to{}Of 相对父 layout 定位 子 view 对齐到父...> 基线对齐 一个视图文本基线另一视图文本基线对齐。...因此,它与使用 Wrap Content(上面)之间区别在于,宽度设为 Wrap Content 会强行使宽度始终内容宽度完全匹配;而使用 layout_constraintWidth_default

2K10

【翻译】MotionLayout实现折叠工具栏(Part 1)

第二个控件则是包含了标题( ID 为 title )文本 TextView ,它需要移动同时改变自身大小尺寸。 让我们首先看看这两个状态下图片 ImageView 高度差。...我们使用是一个标准 ImageView 控件,当其位于 ConstraintSet 下 Constraint 元素时,其主要属性变成可以是 ConstraintLayout.LayoutParams...任何一个属性,也可以是 View 任何一个属性,但即使像 ImageView 这类作为 View 子类控件,我们仍然需要使用一个 CustomAttribute 符号,这里实际上和 ObjectAnimator...我们所做另一件事情则是改变边距大小( margins ),以及如何让 TextView 文本位置相对于 ImageView 图片位置而固定。...在折叠状态下它会垂直居中,而在展开状态下它会对齐在底部,因此 TextView 会更多相对于 ImageView 大小尺寸来进行相关设定。

1.8K31
领券