常规&高级UI编程|青训笔记

234 阅读3分钟

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

一、Android UI组件

1.关于Android UI

UI:User Interface

  • 图形用户界面
  • UI界面由多个不同功能的UI组件构成
  • Android SDK提供了大量的UI组件

常规UI组件

image.png

高级UI组件

image.png

二、布局

LinearLayout

android:orientation——>布局内组件的排列方向
android:layout weight ——>布局内组件大小权重 android:divider ——>布局内组件间分割线
android:showDividers ——>布局内组件间分割线位置 android:dividerPadding ——>布局内分割线padding

  • 实例:

image.png

RelativeLayout

android:layout centerInParent——> 组件位于父容器中央位置
android:layout centerHorizontal ——>组件位于父容器水平中央位置
android:layout centerVertical ——>组件位于父容器垂直中央位置
android:layout alignParentTop ——>组件与父容器顶部对齐
android:layout alignParentLeft ——>组件与父容器左部对齐 android:layout alignParentRight ——>组件与父容器右部对齐
android:layout alignParentBottom ——>组件与父容器底部对齐
android:layout above ——>组件位于某组件上部 android:layout below ——>组件位于某组件下部 android:layout toLeftOf ——>组件位于某组件左部 android:layout toRightOf ——>组件位于某组件右部 android:layout alignTop ——>组件与某组件顶部对齐 android:layout alignLeft ——>组件与某组件左部对齐 android:layout alignRight——> 组件与某组件右部对齐 android:layout alignBottom——> 组件与某组件底部对齐

  • 实例

image.png

ConsrationLayout

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 ——>组件尾部与某组件尾部对齐

FrameLayout

android:foreground 设置前景图像
android:foregroundGravity 设置前景图像Gravity

三、渲染

  • 布局解析

image.png

  • 渲染总结

image.png

四、交互

  • 定义 :将触摸事件传递到某个具体View&处理的整个过程

  • 解决的问题: 触摸事件由哪个对象发出、经过哪些对象、最终到达哪个对象

  • View的交互
    获取View对象:findViewByld 交互事件监听器 View.OnLongClickListener、ViewOnClickListener

  • 触摸事件: MotionEvent ——> ACTION_DOWN ACTION UP ACTION_MOVE

  • 顺序: Activity-> ViewGroup-> View

  • 事件分发 dispatchTouchEvent

  • 核心方法 oninterceptTouchEvent onTouchEvent

五、动画

帧动画

  • 作用对象: 视图控件(View)

ImageViewTextView等 不可作用于View的属性,如:宽度、高度

  • 原理 将动画分解为“帧”的形式,每一帧=一张图片 按指定顺序和间隔播放一组图片 可简单类比为GIF
  • 优点:使用简单、方便
  • 缺点:功能单一、容易OOM
  • 应用场景 连续性动画

补间动画

  • 作用对象: 视图控件(View)

ImageViewTextView等 不可作用于View的属性,如:宽度、高度

  • 原理: 通过确定开始视图样式和结束视图样式,中间样式由系统根据差值器确定来形成完整动画
  • 动画类型 透明度动画旋转动画 缩放动画平移动画
  • 优点:简单、方便
  • 缺点:只能控制视图效果,无法控制属性
  • 应用场景 转场动画、 视图基础动画

属性动画

  • 作用对象:任意Java对象
    不在局限于视图控件(View)
  • 原理:从而实现该对象在该属性上的动画效果在指定时间间隔内,通过不断对值的改变&不断将值赋给对象的属性。
  • 特点:作用对象进行了扩充:不限于View对象
    动画效果丰富:不只是补间动画对应的4种动画效果,其他动画效果也
  • 应用场景: 可以实现与属性相关、复杂的动画

自定义UI

image.png 注:图片均出自课程PPT