常见UI组件与编程 | 青训营笔记这是青训营第三堂课的笔记与总结。第三堂课主要介绍了常见的UI组件及其基本属性，讲解了部

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

以下是第三堂课的笔记和总结

注：不包含课上涉及源码的部分

常规&高级UI编程

UI组件

常用组件

TextView（文本组件）
ImageView（图片组件）
Button（按钮组件）
EditText（输入框组件）
CheckBox（复选框组件）
RadioButton（单选按钮）
...

通用属性和方法

属性：

id
height
width
margin
padding
...

方法：

setId
setLayoutParams
setPadding
...

高级UI组件

ScrollView（滑动组件）
ListView/RecyclerView（列表组件）
PullToRefresh（下拉刷新组件）
ViewPager（分页组件）
LinearLayout/RealtiveLayout（布局组件）
...

布局

常用布局

理论上所有布局都可以实现同一个目标UI，实际使用中应考虑不同布局的特点以及合理性，选择合适的布局。

LinearLayout（线性布局）

最常用的布局，适用于线性排列场景。
Relativelayout（相对布局）

使用相对位置排列组件，不需要多层嵌套，在复杂场景可以提高性能。
FrameLayout（多层布局/帧布局）

适用于层级排列场景。
ConstrainLayout（约束布局）

是拓展布局，通过约束组件位置排列组件，与相对布局类似，可用于创造大型复杂布局，推荐使用以提高性能。

常用属性（如LinearLayout）

android:orientation（布局内组件排列方向）

垂直、水平
android:layout_weight（布局内组件大小权重）

权重大的优先分派空间
android:divider

如线性布局，自带的分割线功能
android:showDiveders
android:dividerPadding
android:gravity
android:layout_gravity
...

渲染

加载布局的一般方法

编写xml布局文件。
编写逻辑层java文件/或kotlin，并在AndroidManifest中注册。
在步骤2文件中设置布局：

setContentView(R.layout.xxx_activity);

xxView = (xxView) findViewById(R.id.xx_view);

交互

组件进行交互一般步骤

获取View实例

如：Button button = findViewById(R.id.btn);（按钮组件）

添加相应的监听器

如

button.setOnClickListener(new View.OnClickListener(){
    @Override
    public void onClick(View v){
    xxx;// 点击按钮后发生的事情
    }
});

常用的交互事件监听器

onClick()

最常用的监听器，当用户轻触时，系统会调用此方法。
onLongClick()

当用户轻触并按住时（可自己设定，如500ms），系统会调用此方法。
onFocusChange()
onKey()

用于监听硬件按键
onTouch()

所有触摸屏幕的事件都可以监听

触摸事件（MotionEvent）

ACTION_DOWN（手指碰到屏幕时产生此事件）
ACTION_UP（手指离开屏幕时产生此事件）
ACTION_MOVE（手指在屏幕上移动时产生此事件）
ACTION_CANCEL（当事件提前终止时系统自动产生此事件）
ACTION_POINTER_DOWN（多点触摸）
ACTION_POINTER_UP（多点触摸）

触摸事件分发

用于将触摸事件分配给自己希望被分配的组件

boolean dispatchTouchEvent(MotionEvent ev)（事件分发）
boolean onInterceptTouchEvent(MotionEvent ev)（事件拦截）
boolean onTouchEvent(MotionEvent ev)（事件响应）

动画

帧动画

对象：视图控件（view）
原理：播放一组图片，每一帧就是一张图片（连环画）
特点：使用简单，但功能单一，容易内存溢出
应用：连续性动画

步骤：

xml文件声明：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"   
                android:oneshot="false">
    <item android:drawable="@drawable/picture_0" android:duration="100"/>
    <item android:drawable="@drawable/picture_1" android:duration="100"/>
    <item android:drawable="@drawable/picture_2" android:duration="100"/>
    <item android:drawable="@drawable/picture_3" android:duration="100"/>
    <item android:drawable="@drawable/picture_4" android:duration="100"/>
</animation-list>

java文件：

private void playAnimation(){
	mImageView.setImageResourse(R.drawable.xxx_anim);
    AnimationDrawable animationDrawable = (AnimationDrawable) mImageView.getDrawable();
    animationDrawable.start();
    ...
    animationDrawable.stop();
}

补间动画

对象：视图控件（view）
原理：确定开始和结束的视图样式，中间样式由系统根据差值自动生成。
特点：简单，无法控制属性
应用：转场、视图基础动画

步骤示例：

public void tweenedAnimation(View view){
    AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
    // 透明度动画，透明度由1渐变至0。
    RotateAnimation rotateAnimation = new RotateAnimation(0, 360, ...);
    // 旋转动画，从0旋转至360度。
    ScaleAnimation scaleAnimation = new ScaleAnimation(...);
    // 大小变换动画
    TranslateAnimation translateAnimation = new TranslateAnimation(...);
    // 移动动画
    AnimationSet animationSet = new Animation(true);
    animationSet.addAnimation(alphaAnimation);
    animationSet.addAnimation(rotateAnimation);
    animationSet.addAnimation(scaleAnimation);
    animationSet.addAnimation(translateAnimation);
    // 组合上述动画
    view.startAnimation(animationSet);
}

插值器

Interpolator：设置属性值从初始值过渡到结束值的变化规律。

如：AccelerateInterpolator：动画开始速率较慢，之后慢慢加速。

属性动画

对象：任何java对象
原理：在指定时间间隔内，不对改变或给对象赋值属性，实现动画效果。
特点：对象不限于view，动画效果丰富。
应用：与属性相关、复杂的动画。

总结

本次课程主要介绍了各种UI组件以及部分逻辑功能的实现方法。本节课程难度比较大，在课上，老师大量的对源码进行解读，涉及内容过深，不易理解，所以笔记部分只对要点进行了总结，以便将来进行复习回顾。此外，收获最大的是动画部分，老师课上的讲解解决了一个困扰我许久的问题，总体上收获颇深，特此做下笔记。