Andriod开发学习——Android UI基础知识1.1

01 Android UI简介

1.1 UI

1. 用户界面（User Interface，简称 UI，亦称使用者界面）是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。
2. 软件设计可分为两个部分：编码设计与UI设计。

1.2 Android UI

1. Android应用界面包含用户可查看并与之交互的所有内容。
2. Android 提供丰富多样的预置 UI 组件，例如结构化布局对象和 UI控件，您可以利用这些组件为您的应用构建图形界。
3. Android 还提供其他界面模块，用于构建特殊界面，例如对话框、通知和菜单。
4. Android UI 都是由布局和控件组成的。

02 布局

1. 布局(layout)可定义应用中的界面结构（例如 Activity 的界面结构）。布局中的所有元素均使用 View和ViewGroup 对象的层次结构进行构建。
2. View 通常绘制用户可查看并进行交互的内容。
3. 而ViewGroup 是不可见容器，用于定义 View 和其他 ViewGroup 对象的布局结构。

2.1 布局的结构

定义界面布局的视图层次结构图示:

1. View 对象通常称为“微件”，可以是众多子类之一，例如 Button 或 TextView 。
2. ViewGroup对象通常称为“布局”，可以是提供其他布局结构的众多类型之一，例如LinearLayout 或 ConstraintLayout 。

2.2 声明布局

1. 在 XML 中声明界面元素，Android 提供对应 View 类及其子类的简明 XML 词汇，如用于微件和布局的词汇。
   当然也可使用 Android Studio 的 Layout Editor，并采用拖放界面来构建 XML 布局。如下图所示是app/res/layout下的activity_main.xml的Code。

<?xml version="1.0" encoding="utf-8"?>
<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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="168dp"
        android:layout_marginTop="356dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

这张图所示是app/res/layout下的activity_main.xml的Design。

2. 在运行时实例化布局元素。您的应用可通过编程创建 View 对象和 ViewGroup对象（并操纵其属性）。

ConstraintLayout constraintLayout = new ConstraintLayout(this);
TextView view = new TextView(this);
view.setText("Hello World!");
constraintLayout.addView(view);

• 提示 : 使用 Layout Inspector 调试布局，可以查看通过代码创建的布局

1. 在连接的设备或模拟器上[运行您的应用]。
2. 依次点击 Tools > Layout Inspector。
3. 在显示的 Choose Process 对话框中，选择要检查的应用进程，然后点击 OK。

2.3 编写XML

1. 利用 Android 的 XML 词汇，按照在 HTML 中创建包含一系列嵌套元素的网页的相同方式快速设计UI布局及其包含的屏幕元素。
2. 每个布局文件都必须只包含一个根元素，并且该元素必须是视图对象或 ViewGroup 对象。
3. 定义根元素后，可以子元素的形式添加其他布局对象或控件，从而逐步构建定义布局的视图层次结构。
4. 在 XML 中声明布局后，以 .xml 扩展名将文件保存在Android 项目的 res/layout/ 目录中。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			android:orientation="vertical" >
  <TextView android:id="@+id/text"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Hello, I am a Button" />
</LinearLayout>

2.4 加载 XML 资源

当编译应用时，系统会将每个 XML 布局文件编译成 View 资源。在Activity.onCreate() 回调内，通过调用 setContentView() ，并以R.layout.layout_file_name 形式向应用代码传递布局资源的引用 ，加载应用代码中的布局资源。

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
}

2.5 属性

每个 View 对象和 ViewGroup 对象均支持自己的各种 XML 属性 。某些属性是 View 对象的特有属性（例如，TextView 支持 textSize 属性），但可扩展此类的任一 View 对象也会继承这些属性。某些属性是所有 View 对象的共有属性，因为它们继承自 View 根类（例如 id 属性）。此外，其他属性被视为“布局参数”，即描述 View 对象特定布局方向的属性，如由该对象的父ViewGroup 对象定义的属性。

<TextView
	android:id="@+id/tv"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World!"
	android:textSize="24sp"/>
<Button
	android:id="@+id/btn"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="按钮"/>

2.6 ID

任何 View 对象均可拥有与之关联的整型 ID，用于在结构树中对 View 对象进行唯一标识。编译应用后，系统会以整型形式引用此 ID，但在布局 XML 文件中，系统通常会以字符串的形式在 id属性中指定该 ID。这是所有 View 对象共有的 XML 属性（由 View 类定义），并且您会经常使用该属性。

• XML 标记内部的 ID 语法是：

android:id="@+id/tv"

• 字符串开头处的 @ 符号指示 XML 解析器应解析并展开 ID 字符串的其余部分，并将其标识为 ID 资源。加号 (+) 表示这是一个新的资源名称，必须创建该名称并将其添加到我们的资源（在 R.java文件中）内。
• Android 框架还提供许多其他 ID 资源。引用 Android 资源 ID 时，不需要加号，但必须添加 android 软件包命名空间。

android:id="@android:id/empty"

添加 android 软件包命名空间后，我们现在将从 android.R 资源类而非本地资源类引用 ID.R.java 文件

• tips: @+id 和 @id区别：其实@+id就是在R.java文件里新增一个id名称，如果之前已经存在相同的id名称，那么会覆盖之前的名称。而@id则是直接引用R.java文件的存在的id资源，如果不存在，会编译报错。

注意：ID 字符串名称，在同一布局中必须是唯一的，不能重名，不同布局中可以同名；同时也可以通过ID值创建我们视图对象的实例。

<TextView
	android:id="@+id/tv"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World!"
	android:textSize="24sp"/>

TextView textView = (TextView) findViewById(R.id.tv);

2.7 布局参数 LayoutParams

• layout_*** 的布局属性

<TextView
	android:layout_width="100dp"
	android:layout_height="200dp"
	android:layout_marginLeft="10dp" //左边距
	android:layout_marginTop="10dp" //上边距
	android:text="Hello World!" />

• 布局参数作用是给我们的视图设定在布局中位置和大小
• ViewGroup 类会实现一个扩展 ViewGroup.LayoutParams 的嵌套类，里面包含一些设置视图view 的尺寸和位置的属性。
  视图层次结构图，包含每个视图关联的布局参数：
  

TextView tv = new TextView(this);
LinearLayout linearLayout = new LinearLayout(this);
LinearLayout.LayoutParams layoutParams =
(LinearLayout.LayoutParams)tv.getLayoutParams();
layoutParams.leftMargin = 30; //左边距
layoutParams.topMargin = 30;//上边距
layoutParams.width = 100;//宽
layoutParams.height = 200;//高
tv.setLayoutParams(layoutParams);
linearLayout.addView(tv);

• 一般而言，建议不要使用绝对单位（如像素）来指定布局宽度和高度。更好的方法是使用相对测量单位（如与密度无关的像素单位 (dp) 、 wrap_content 或 match_parent ），因为其有助于确保应用在各类尺寸的设备屏幕上正确显示。
• wrap_content 指示您的视图将其大小调整为内容所需的尺寸。
• match_parent指示您的视图尽可能采用其父视图组所允许的最大尺寸。

2.8 布局位置

• 视图可以通过调用 getLeft() 方法和 getTop() 方法来获取视图的坐标位置 ，也可以通过getWidth() 和 getHeight() 获取视图的尺寸，这些方法返回的值是相对于其父视图的位置。
• 位置和尺寸的单位是像素（ px ）。
• px 与 dp 区别
• px 即像素，1px代表屏幕上一个物理的像素点；
  给视图设置px单位，不同分辨率下，尺寸不一样。
• dp (dip) Density independent pixels ，设备无关像素。它与“像素密度”密切相关 ;
  dpi像素密度： 每英寸包含的像素数
  

2.9 内边距和外边距