NO.8 AndroidUI界面设计课程笔记 | 青训营

86 阅读2分钟

本文主要记录AndroidUI界面课程笔记,主要包括组件、布局、渲染、交互、动画、自定义UI六个部分,如有错漏,感谢指正!

UI

01.UI组件

常规组件

image.png

常规UI组件大多由Android Framework中的android.widget这个package提供

image.png

使用

image.png

高级组件

image.png

常规UI组件大多是View,高级UI组件大多是ViewGroup、比常规UI组件有多的功能

02.布局

大小 位置 层级

1.LinearLayout

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

2.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

3.FrameLayout

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

4.ConstraintLayout

  • 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

image.png

03.渲染

布局加载

setContentView

  1. 编写布局文件
  2. 注册Manifest
  3. 设置布局文件

布局解析

LayoutInflater:LayoutInflater解析了XML文件,并根据XML文件生成了View实例,并将View实例添加了到了其ViewGroup中

createView根据XML中View类名来找到相应View,并将XML中的描述属性解析为AttributeSet,并作为第二个参数传给了View构造器

页面绘制起点

为什么Activity在onResume()之后才显示?

  • onCreate(): setContentView() 创建了DecorView,并将layout中的View添加至DecorView中
  • onResume(): ActivityThread.handleResumeActivity()
  1. WindowManagerlmpl.addView
  2. 创建ViewRootImpl
  3. 3ViewRootlmpl.setView
  4. 4ViewRootImpl.requestLayout(),触发页面绘制

UI渲染

image.png

04.交互

获取View实例-findViewById

常用交互事件监听器

image.png

屏幕触摸事件MotionEvent

所有的交互事件都来自于对屏幕触摸信号的处理,View.0nClickListener0等常用点击事件是对交互事件的二次封装

image.png

当用户触摸屏幕时,系统将建立一系列的MotionEvent对象,MotionEvent包含关于发生触摸的位置和时问等细节信息,MotionEvent对象被传递到相应的捕获函数中,例如onTouchEvent()

捕获触摸事件

image.png

触摸事件分发

image.png

view事件的响应

  1. 在onTouchEvent0的ACTION DOWN设置了一个延时Runnable,用于处理onLongClickListener
  2. 在onTouchEvent0的ACTION DOWN中,判断onI.ongClick是否执行,未执行则移除,然后执行onClickListener

image.png

05.动画

帧动画

image.png

补间动画

image.png

插值器 Interpolator: 是一个接口。设置属性值从初始值过渡到结束值的变化规律

属性动画

image.png

总结

image.png

两类动画的根本区别在于:是否改变动画本身的属性

  • 视图动画:不改变动画的属性,在动画过程中仅对图像进行变换来达到动画效果。无论动画结果在哪,该View的位置和响应区域都是在原地,不会根据结果而移动;
  • 属性动画:改变了动画属性 因属性动画在动画过程中对动态改变了对象属性,从而达到了动画效果

06.自定义UI

例子link.juejin.cn/?target=htt…

image.png