五、 实际的界面 UI 布局组件层级分析
1 . Layout Inspector 中查看实际的 UI 布局层次 : 图中蓝色被选中的部分是开发者定义的布局组件 , 其它都是系统自动生成的 ;
2 . UI 布局代码 : 该布局使用了约束布局 , 只嵌套了 1 11 层
<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/sample_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!-- 预览 Camera 采集的图像数据 --> <SurfaceView android:id="@+id/surfaceView" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:id="@+id/textViewUrl" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFFFFF" android:text="推流地址 : " android:padding="5dip" android:gravity="center" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0"/> <Button android:id="@+id/button_play" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="开始推流" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1"/> </androidx.constraintlayout.widget.ConstraintLayout>
