依赖
dependencies {
implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
}
layout_constraintHorizontal_bias计算:
左边距/(左边距+右边距);
例如:距离父容器左边40%的距离,距离右边的为30%;那么bias=0.4/(0.4+0.3)=4/7约等于0.57;
公司的ui在网页上看,按住option(苹果电脑),可以显示百分比距离;
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent",
这4个表示被约束到parent(父容器),顶部、底部、右边、左边;
约束好,也算是基本要求。有了这4个约束之后,才能继续往下实现居中、
或者百分比距离顶部,或者水平方向距离偏移多少
app:layout_constraintHorizontal_bias="0.08"//水平方向的边距比值
app:layout_constraintVertical_bias="0.05"//竖直方向的边距比值
app:layout_constraintWidth_percent="0.433";//宽度为父容器的43.3%,则应设置:
android:layout_width="0dp"
app:layout_constraintHeight_percent="0.313"//高度为父容器高度的31.3%要设置该属性,则应该
将:
android:layout_height="0dp"设置为0,
这是对ConstraintLayout布局的暂时理解,减少了层级嵌套,解决了适配;后期还有什么精彩的使用,再来补充;
- 实现的效果:
- ConstraintLayout 布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/black">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/blue"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHeight_percent="0.4"
app:layout_constraintWidth_percent="1"/>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.08"
app:layout_constraintVertical_bias="0.05"
android:background="@mipmap/icon_back"
tools:ignore="MissingConstraints" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="@string/video_title_name"
android:textColor="@color/white"
android:textSize="16sp"
app:layout_constraintVertical_bias="0.05"/>
<TextView
android:id="@+id/video_tv_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/video_size"
android:textColor="@color/white"
android:textSize="60sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="0.4"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/video_title_size_unit"
android:textColor="@color/white"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/video_tv_size"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/video_clear_hint"
android:textSize="14sp"
android:textColor="@color/white"
app:layout_constraintTop_toBottomOf="@id/video_tv_size"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.36"
/>
</android.support.constraint.ConstraintLayout>