这是我参与「第四届青训营 -Android场」笔记创作活动的的第3天
常规&高级UI编程
主要内容
UI组件 布局 渲染 交互 动画 自定义UI
UI组件
图形用户界面
UI界面由多个不同功能的UI组件构成
Android SDK提供了大量的UI组件
| 组件 | JavaClass | Package |
|---|---|---|
| 文本组件 | Text View | android.widget.TextView |
| 图片组件 | ImageView | android.widget.ImageView |
| 按钮组件 | Button | android.widget.Button |
| 输入框组件 | EditText | android.widget.EditText |
| 复选框组件 | CheckBox | android.widget.CheckBox |
| 单选按钮 | RadioButton | android.widget.RadioButton |
常规组件大多由Android Framework中的android.widge这个package提供
常规view的属性和方法
常规UI组件的使用
TextView
android:id="@+id/tv_title"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="20dp"
android:layout_gravity="center"
android:gravity="center"
android:padding="10dp"
android:text="@string/app_name"
android:textSize="20sp"
android:textColor="@color/colorAccent"
android:visibility="visible"
android:background="@color/colorPrimary"
高级UI组件
| 组件 | JavaClass |
|---|---|
| 滑动组件 | ScrollView |
| 列表组件 | ListView/RecyclerView |
| 下拉刷新组件 | PullToRefresh |
| 分页组件 | ViewPager |
| 布局组件 | LinearLayout/RealtiveLAyout/... |
常规UI组件大多是View,高级UI组件大多是ViewGroup,比常规UI组件有多的功能
UI组件关系
View和ViewGroup的关系
部分View的继承关系
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/to"
EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="@string/message"
Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="@string/send"
布局
LinearLayout
| 属性 | 功能描述 |
|---|---|
| android:orientation | 布局内组件的排列方向 |
| android:layout_weight | 布局内组件大小权重 |
| android:divider | 布局内组件间分割线 |
| android:showDividers | 布局内组件间分割线位置 |
| android:dividerPadding | 布局内分割线padding |
示例
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical"
EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
EditText
android:layout_width=".match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
RelativeLayout
示例
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="math_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
EditText
android:id="@+id+name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
Spinner
android:id="@+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/times"
Spinner
android:id="@id/times"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentRight="true"
Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/times"
android:layout_alignParentRight="true"
FrameLayout
前景图像：永远处于FrameLayout最上层，不会覆盖图片
xmlns:android="http:/schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
TextView
android:layout_width="300dp"
android:layout_height="3000dp"
android:gravity="center"
android:background="@android:color/holo_blue_bright"
android:text="我是第一层"
TextView
android:layout_width="150dp"
android:layout_height="140dp"
android:gravity="center"
android:background="@android:color/holo_green_light"
android:text="我是第二层"
ConstraintLayout
示例
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
ImageView
android:id="@+id/iv_beauty"
android:layout_width="100dp"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/beauty"
app:layout_constrainLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
ImageView
android:id="@+id/iv_girl"
android:layout_width="100dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="@drawable/girl"
app:layout_constraintBottom_toBottomOf="@+id/iv_beauty"
app:layout_constraintLeft_toRightOf="@+id/iv_beauty"
app:layout_constraintTop_toTopOf="parent"
