UI入门

# UI入门

## 什么是UI

UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网常用的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。

## 什么是原生XML UI
所谓的原生XMLUI 指的是 安卓原生UI ,安卓的原生UI 使用的文件为XML文件,以标签的方式编写,由java解析后成为我们能看到的手机APP界面.

## XML 扫盲认知

### XML 文件说明
XML 指可扩展标记语言（eXtensible Markup Language）。
资料：[xml菜鸟教程](https://www.runoob.com/xml/xml-tutorial.html)
例子
```xml
<?xml version="1.0" encoding="utf-8"?>

<a>
	
	
		<c>
		</c>
	
	
	
	
	
	<b1>
		
		<c>
		</c>
		
	</b1>
	
	
	<d />
</a>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">

<include layout="@layout/layout_test" />
</androidx.constraintlayout.widget.ConstraintLayout>
````
#### EasyClick 标准格式
说明：原生UI项目里才有下图所示的资源文件。

![](/media/202401/2024-01-23_165509_5429760.49729133950115045.png)

原生UI模版自动创建的main.xml布局
```xml
<?xml version="1.0" encoding="UTF-8" ?>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout>
 <LinearLayout android:layout_height="wrap_content"
 android:orientation="horizontal"
 android:gravity="center_vertical"
 android:layout_width="match_parent">
 <TextView android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:gravity="center_vertical"
 android:text="备注: "/>

</LinearLayout>
 </LinearLayout>
</ScrollView>
````
## EasyClick 官方标准解释
>s **第一行是必须有的。否则Android无法解析布局文件**
这表示是一个xml 格式的文件 编码UTF-8 。

```xml

<?xml version="1.0" encoding="UTF-8" ?> 
````

>s **第二行的标签**
形如下面的xml代码

```xml
<ScrollView
	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	 xmlns:android="http://schemas.android.com/apk/res/android"
	 xsi:noNamespaceSchemaLocation="layout.xsd"
	 android:layout_height="match_parent"
	 android:layout_width="match_parent" >
 
	<LinearLayout
		 android:layout_height="match_parent"
		 android:layout_width="match_parent"
		 android:orientation="vertical"
		 android:padding="20dp" >
		 
 </LinearLayout>
</ScrollView>
````
>d **说明：**1. 第一行：声明ScrollView布局的基本布局 ，必须有，可以换成其他布局:线性布局等。
2. 第二行：**xmlns:xsi** 解析格式 ，必须有，**不可更改**。
3. 第三行：**xmlns:android** 表示Android布局引用资源路径，必须有，**不可更改**。
4. 第四行：**xsi:noNamespaceSchemaLocation** 表示EasyClick 官方的解析布局的资源 ，必须有，**不可更改**。
5. 第五行：**android:layout_height** 布局的高度 ， 必须有,按需更改。
6. 第六行：**android:layout_width** 布局的宽度 ，必须有,按需更改。
7. **特别说明**： 子布局和子控件不需要 **第二行** 至 **第四行** 的内容。
8. EasyClick 中使用tag 属性代替Android的 id属性。
 
AndroidXML布局规范：[谷歌官方规范](https://developer.android.google.cn/guide/topics/ui)
其他资料参考：[安卓开发常用的布局](https://blog.csdn.net/diandianxiyu_geek/article/details/78923274)