安卓UI组件 | 青训营笔记

Wg
143 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第4天

常规UI组件

  1. android.widget包（大多数为View）
    • TextView：文本组件
    • ImageView：图片组件
    • Button：按钮组件
    • EditText：输入框组件
    • CheckBox：复选框组件
    • RadioButton：单选按钮
  2. 通用属性和方法：
    • 属性：id、height、width、margin（间距）、padding（内容与组件距离）
    • 方法：设置通用属性的方法



高级UI组件

  1. 组件名
    （大多数为ViewGroup，ViewGroup里面可以房View或者另一个ViewGroup）
    • ScrollView：滑动组件
    • ListView/RecyclerView：列表组件
    • PullToRefresh：下拉刷新组件
    • ViewPager：分页组件
    • LinearLayout/RealtiveLayout/... ：布局组件

布局方式详解

  • LinearLayout 线性布局

    1. 特定属性：
      • android:orientation：排列方向（竖直或水平）
      • android:layout_weight：组件大小的权重
      • android:divider：布局内组件间的分割线
      • android:showDividers：分割线位置
      • android:dividerPadding：分割线padding

  • RelativeLayout 相对布局

    1. 属性值为true或false的属性
      • android:layout_centerHrizontal：水平居中
      • android:layout_centerVertical：垂直居中
      • android:layout_centerInparent：相对于父控件完全居中
      • android:layout_alignParentBottom：贴紧父控件的下边缘
      • android:layout_alignParentLeft：贴紧父控件的左边缘
      • android:layout_alignParentRight：贴紧父控件的右边缘
      • android:layout_alignParentTop：贴紧父控件的上边缘
      • android:layout_alignWithParentIfMissing：如果对应的兄弟控件找不到的话，就以父控件作为参照物
    2. 属性值为id的属性
      • android:layout_below、above、toLeftOf、toRightOf：相对位置
      • android:layout_alignTop、alignBottom、alignLeft、alignRight：相对位置且边缘对齐
    3. 与相对组件的距离
      • android：layout_marginBottom、android：layout_marginLeft等

  • FrameLayout 帧布局

    1. 作用：以层级叠加方式排列组件，适用于层级排列场景
    2. 特定属性：
      • android:foreground：设置前景图像（永远显示在Framelayout最上面）
      • android:foregroundGravity：设置前景图像Gravity

  • ConstraintLayout 约束布局

    1. 作用：通过约束组件位置排列组件，适用于复杂场景
    2. 常用属性：（ = 另一个的组件id）
      • layout_constraintLeft_toLeftOf
      • layout_constraintLeft_toRightOf
      • layout_constraintRight_toLeftOf
      • layout_constraintRight_toRightOf
      • layout_constraintTop_toTopOf
      • layout_constraintTop_toBottomOf
      • layout_constraintBottom_toTopOf
      • layout_constraintBottom_toBottomOf
      • layout_constraintBaseline_toBaselineOf
      • layout_constraintStart_toEndOf
      • layout_constraintStart_toStartOf
      • layout_constraintEnd_toStartOf
      • layout_constraintEnd_toEndOf
    3. 角度定位
    例：
app:layout_constraintCircle="名"
app:layout_constraintCircleAngle="120"（角度）
app:layout_constraintCircleRadius="150dp"（距离）



渲染

  1. 步骤：布局加载 -> 布局解析 -> UI渲染
    • 布局加载：编写布局文件，注册Manifest，类中设置布局文件 (setContentView()创建了DecorView，最终通过其中的LayoutInflater加载XML文件)
    • 布局解析：LayoutInflater解析XML文件后生成View示例，并将View实例添加到了其ViewGroup中
    • 微信图片_20220729212338.png (生成View实例：根据XML中View类名来找相应View，并将XML中的描述属性解析为AttributeSet，并作为第二个参数传给了View构造器(工厂模式))
    • UI渲染： 微信图片_20220730010426.jpg

微信图片_20220730010448.jpg

微信图片_20220730010339.jpg

avatar
文章
阅读
粉丝