如何在ConstraintLayout中让子View尺寸相对于另一子View而非父布局?
解决ConstraintLayout中子View相对另一子View的百分比尺寸与偏移问题
要实现第二个View基于第一个View的百分比尺寸+内部偏移,核心是解决layout_constraintWidth_percent/layout_constraintHeight_percent默认参照父布局的问题,以下是两种可行方案:
方案一:使用ConstraintLayout 2.1+的参照目标属性(推荐)
ConstraintLayout 2.1及以上版本新增了layout_constraintWidth_referenced_ids和layout_constraintHeight_referenced_ids属性,可直接指定百分比尺寸的参照目标为指定View,而非父布局。
实现代码
<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/firstView" android:layout_width="250dp" android:layout_height="250dp" android:background="@color/white" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <View android:id="@+id/secondView" android:layout_width="0dp" android:layout_height="0dp" android:background="@color/black" <!-- 绑定到firstView的上下左右,确定布局范围 --> app:layout_constraintTop_toTopOf="@+id/firstView" app:layout_constraintStart_toStartOf="@+id/firstView" app:layout_constraintEnd_toEndOf="@+id/firstView" app:layout_constraintBottom_toBottomOf="@+id/firstView" <!-- 指定基于firstView的百分比尺寸 --> app:layout_constraintWidth_percent="0.4" app:layout_constraintHeight_percent="0.6" app:layout_constraintWidth_referenced_ids="@+id/firstView" app:layout_constraintHeight_referenced_ids="@+id/firstView" <!-- 内部偏移设置 --> app:layout_constraintHorizontal_bias="0.2" app:layout_constraintVertical_bias="0.3" /> </androidx.constraintlayout.widget.ConstraintLayout>
注意事项
如果你的项目ConstraintLayout版本低于2.1,需要先升级依赖:
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
方案二:使用Guideline辅助(兼容低版本)
如果无法升级ConstraintLayout版本,可以通过添加Guideline来标记firstView的百分比位置,再将secondView约束到这些Guideline上,间接实现尺寸百分比。
实现代码
<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/firstView" android:layout_width="250dp" android:layout_height="250dp" android:background="@color/white" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!-- 垂直Guideline:距离firstView左侧40%宽度的位置 --> <androidx.constraintlayout.widget.Guideline android:id="@+id/widthGuide" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.4" app:layout_constraintStart_toStartOf="@+id/firstView" /> <!-- 水平Guideline:距离firstView顶部60%高度的位置 --> <androidx.constraintlayout.widget.Guideline android:id="@+id/heightGuide" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.6" app:layout_constraintTop_toTopOf="@+id/firstView" /> <View android:id="@+id/secondView" android:layout_width="0dp" android:layout_height="0dp" android:background="@color/black" <!-- 约束到firstView和Guideline,确定尺寸 --> app:layout_constraintStart_toStartOf="@+id/firstView" app:layout_constraintEnd_toStartOf="@+id/widthGuide" app:layout_constraintTop_toTopOf="@+id/firstView" app:layout_constraintBottom_toTopOf="@+id/heightGuide" <!-- 内部偏移设置 --> app:layout_constraintHorizontal_bias="0.2" app:layout_constraintVertical_bias="0.3" /> </androidx.constraintlayout.widget.ConstraintLayout>
内容的提问来源于stack exchange,提问作者derpda
相关产品推荐
相关产品推荐

