View 使用 - ConstraintLayout

本文详细介绍了如何使用ConstraintLayout解决布局嵌套问题,包括通过方向约束定位控件,设置对齐、角度、居中偏移和边距,以及控制尺寸的最大最小值。此外,还讲解了约束链、屏障、组、占位、流式布局、层布局等高级特性,帮助开发者更好地理解和运用ConstraintLayout。

一、概念

解决布局嵌套过多的问题,采用方向约束的方式对控件进行定位。

二、位置

2.1 对齐

至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置。

layout_constraintLeft_toLeftOf 我的左边,与XXX左边对齐。
layout_constraintLeft_toRightOf 我的左边,与XXX右边对齐。
layout_constraintRight_toRightOf 我的右边,与XXX右边对齐。
layout_constraintRight_toLeftOf 我的右边,与XXX左边对齐。
layout_constraintTop_toTopOf 我的顶部,与XXX顶部对齐。
layout_constraintTop_toBottomOf 我的顶部,与XXX底部对齐。
layout_constraintBottom_toBottomOf 我的底部,与XXX底部对齐。
layout_constraintBottom_toTopOf 我的底部,与XXX顶部对齐。
layout_constraintBaseline_toBaselineOf 我的文本基线,与XXX文本基线对齐。

2.2 角度

正上方是0°,顺时针角度为正。
layout_constraintCircle="@tvName" 目标控件ID
layout_constraintCircleRadius="70" 半径
layout_constraintCircleAngle="42" 角度(0~360)

2.3 居中偏移

在水平或垂直方向上的百分比位置,默认值为0.5居中。

layout_constraintHorizontal_bias="0.3"
layout_constraintVertical_bias="0.2"

<TextView
    app:layout_constraintTop_toBottomOf="@id/tv2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_bias="0.3"    //水平30%位置
    app:layout_constraintVertical_bias="0.2"/>    //垂直20%位置

2.4 边距

GoneMargin:当依赖的目标 View 可见性被设为 gone 时,该设置才会生效来占位。

android:layout_margin="0dp"
android:layout_marginStart="0dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:layout_marginEnd="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
外边距
android:padding="0dp"
android:paddingStart="0dp"
android:paddingLeft="0dp"
android:paddingTop="0dp"
android:paddingEnd="0dp"
android:paddingRight="0dp"
android:paddingBottom="0dp"
内边距
app:layout_goneMarginBottom="0dp"
app:layout_goneMarginEnd="0dp"
app:layout_goneMarginLeft="0dp"
ap
好的!下面是使用 **`ConstraintLayout`** 实现一个带有 **弧形上边缘** 的 `BottomSheet` 的完整 Kotlin 示例。 --- ### ✅ 实现目标 - 使用 `ConstraintLayout` 作为根布局 - 使用 `BottomSheetBehavior` - 设置顶部为弧形边缘 - Kotlin 实现 --- ### ✅ 1. 添加依赖(`build.gradle`) ```gradle implementation 'com.google.android.material:material:1.9.0' ``` --- ### ✅ 2. 布局文件:`activity_main.xml` ```xml <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/rootLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 其他内容可以放在这里 --> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="主界面内容" android:textSize="24sp" android:layout_marginTop="32dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <!-- BottomSheet --> <FrameLayout android:id="@+id/bottom_sheet" android:layout_width="match_parent" android:layout_height="300dp" app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="16dp" android:background="@android:color/white"> <TextView android:text="这是一个顶部为弧形的 BottomSheet" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </FrameLayout> </androidx.constraintlayout.widget.ConstraintLayout> ``` --- ### ✅ 3. Kotlin 实现代码:`MainActivity.kt` ```kotlin import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import com.google.android.material.bottomsheet.BottomSheetBehavior import com.google.android.material.shape.MaterialShapeDrawable import com.google.android.material.shape.ShapeAppearanceModel import com.google.android.material.shape.EdgeTreatment import com.google.android.material.shape.PathSegment import android.view.View import androidx.core.content.ContextCompat class MainActivity : AppCompatActivity() { private lateinit var bottomSheetBehavior: BottomSheetBehavior<View> override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val bottomSheet = findViewById<View>(R.id.bottom_sheet) bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet) // 创建弧形背景 val shapeDrawable = MaterialShapeDrawable() val shapeAppearanceModel = ShapeAppearanceModel() .toBuilder() .setTopEdge(ArcEdgeTreatment(30f)) // 设置弧形上边缘 .build() shapeDrawable.shapeAppearanceModel = shapeAppearanceModel shapeDrawable.fillColor = ContextCompat.getColorStateList(this, android.R.color.white) bottomSheet.background = shapeDrawable } // 自定义弧形边缘 class ArcEdgeTreatment(val radius: Float) : EdgeTreatment() { override fun getEdgePath(length: Float, center: Float, interpolation: Float, path: PathSegment) { val radiusPx = radius * interpolation path.reset() path.lineTo(0f, 0f) path.quadTo(center, -2 * radiusPx, length, 0f) } } } ``` --- ### ✅ 效果说明 - 使用 `ConstraintLayout` 作为根布局 - `BottomSheet` 使用 `FrameLayout`,并设置 `app:layout_behavior` - 使用 `MaterialShapeDrawable` + `ArcEdgeTreatment` 实现顶部弧形效果 - 支持拖动展开/折叠 --- ### ✅ 注意事项 - 修改 `ArcEdgeTreatment(30f)` 中的数值可以改变弧形的弯曲程度 - 你可以将 `FrameLayout` 替换为任何自定义布局来丰富内容 - 如果需要设置初始状态为展开或折叠,可调用 `bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值