这是我参与「第四届青训营 」笔记创作活动的第2天
介绍Android UI
UI即User Interface,由于Android系统是图形用户界面操作系统，其界面由多个不同功能的UI组件构成
基础UI组件
1、文本框-TextView
主要作用显示文本
使用：
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
2、输入框EidtText
主要作用输入文本
使用：
<EditText
android:id="@+id/et"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EdiText"/>
3、按钮Button
按钮
使用：
<Button
android:id="@+id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
设置点击事件
方式一：
XML中定义android:onClick属性，属性值为Activity中的一个public void functionName(View view)的一个自定义函数，如android:onClick="click"。
方式二：
public class MyActivity extends Activity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.content_layout_id);
final Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//设置点击监听事件
}
});
}
}
4、图片按钮ImageButton
图片样式的按钮
使用
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/image1"
/>
</LinearLayout>
5、单选框RadioButton
单选，一组中有且仅有一个单选框处于被选中状态
使用
<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton android:id="@+id/radio_pirates"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/pirates"
android:onClick="onRadioButtonClicked"/>
<RadioButton android:id="@+id/radio_ninjas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ninjas"
android:onClick="onRadioButtonClicked"/>
</RadioGroup>
布局
1、LinearLayout(线性布局)
LinearLayout是一种线型的布局方式。LinearLayout布局容器内的组件一个挨着一个地排列起来：不仅可以控制个组件横向排列，也可控制各组件纵向排列。
属性：
| 属性 | 使用 |
|---|---|
| orientation | 布局中组件的排列方式，有horizontal(水平)，vertical(竖直，默认) |
| gravity | 控制组件所包含的子元素的对齐方式，可多个组合，如(left,buttom) |
| layout_gravity | 控制该组件在父容器里的对其方式 |
| layout_width | 布局的宽度，通常不直接写数字的，用wrap_content(组件实际大小)，fill_parent或者match_parent填满父容器 |
| layout_height | 布局的高度，通常不直接写数字的，用wrap_content(组件实际大小)，fill_parent或者match_parent填满父容器 |
| id | 为该组件设置一个资源id，在java文件中可以通过findViewById(id)找到该组件 |
| background | 为该组件设置一个背景图片，或者直接哟弄颜色覆盖 |
2、RelativeLayout(相对布局)
RelativeLayout是一种相对布局，控件的位置是按照相对位置来计算的，后一个控件在什么位置依赖于前一个控件的基本位置，是布局最常用，也是最灵活的一种布局。
属性：
第一类属性 属性值为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 如果对应的兄弟控件找不到的话，就以父控件作为参照物
第二类属性 属性值必须为id的引用名“@id/id-name”
android：layout_below 在某控件下方
android：layout_above 在某控件上方
android：layout_toLeftOf 在某控件的左边
android：layout_toRightOf 在某控件的右边
android：layout_alignTop 本控件的上边缘和某控件的上边缘对齐
android：layout_alignLeft 本控件的左边缘和某控件的左边缘对齐
android：layout_alignBottom 本控件的下边缘和某控件的下控件对齐
android：layout_alignRight 本控件的右边缘和某控件的有边缘对齐
第三类：属性值为具体的像素值，如30dip，40px
android：layout_marginBottom 离某控件底边缘的距离
android：layout_marginLeft 离某控件左边缘的距离
android：layout_marginRight 离某控件右边缘的距离
android：layout_marginTop 离某控件上边缘的距离
EditText的android：hint
设置EditText未输入内容（为空）的提示信息
android：gravity
对该view的设定，相对于控件内部的位置变化更改。
比如Bottom的Text，设置为right就是距离父控件。
android：layout_gravity
相对于父控件，改view的位置变化
android：layout_alignParentRight
当前控件的有段和父控件的右端对齐，属性只能为true或false，默认为false。
android：scaleType
该属性主要为控制图片的size。
3、FrameLayout
FrameLayout对象好比一块在屏幕上提前预定好的空白区域，可以将一些元素填充在里面，如图片。所有元素都被放置在FrameLayout区域的最左上区域，而且无法为这些元素制指定一个确切的位置，若有多个元素，那么后面的元素会重叠显示在前一个元素上。
属性：在RelativeLayout属性上，有两个特殊属性
android:foreground 设置帧布局容器的前景图像（始终在所有子控件之上）
android:foregroundGravity 设置前景图像显示的位置
4、ConstraintLayout
ConstraintLayout 是一个使用“相对定位”灵活地确定微件的位置和大小的一个布局，在 2016 年 Google I/O 中面世，它的出现是为了解决开发中过于复杂的页面层级嵌套过多的问题——层级过深会增加绘制界面需要的时间，影响用户体验，以灵活的方式定位和调整小部件。
