Android UI 基础知识（1）——布局

UI

UI（User Interface）：使用者界面）是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。

Android UI

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

布局概念

布局(layout)：）。布局中的所有元素均使用 View和 ViewGroup 对象的层次结构进行构建。

布局	解释
View	绘制用户可查看并进行交互的内容
ViewGroup	不可见容器，用于定义View和其他ViewGroup对象的布局结构

架构结构：

布局声明

1. 在XML中声明界面元素

2. 在运行时实例化布局元素

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

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

编写XML

加载XML文件

Activity.onCreate()包含setContentView(R.layout.具体xml文件名);，利用这个方法向应用代码传递布局资源的引用。

View对象相关

属性

ID

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

android:id="@+id/属性名（字符串格式）";

android:id="@id/属性名（字符串格式）";

会添加到R.java文件中

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

ViewGroup相关

布局参数

ViewGroup子类LayoutParams的相关参数

ViewGroup.LayoutParams子类MarginLayoutParams的相关参数

布局的层次结构：

布局位置

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_marginTop="200dp"
        android:layout_marginLeft="70dp"
        android:background="#ffc"
        android:layout_width="300dp"
        android:layout_height="300dp">

    <TextView
        android:layout_marginLeft="100dp"
        android:layout_marginTop="200dp"
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="33sp" />
    </LinearLayout>

</LinearLayout>

代码分析
android:layout_marginTop="200dp"——LinearLayout距离上边界的距离
android:layout_marginLeft="70dp"——LinearLayout距离左边界的距离
android:background="#ffc"——LinearLayout的底色
android:layout_width="300dp"——LinearLayout的宽度
android:layout_height="300dp">——LinearLayout的高度（长度）

android:id="@+id/tv"——TextView的id以及id值
android:layout_marginLeft="100dp"——TextView距离左边界的距离
android:layout_marginTop="200dp"——TextView距离上边界的距离
android:layout_width="wrap_content"——TextView的宽度
android:layout_height="wrap_content"——TextView的长度
android:text="Hello World!"——TextView的文本内容
android:textSize="33sp" />——TextView文本字体大小

测试代码：

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        TextView tv=findViewById(R.id.tv);
        float w=tv.getWidth();//获取宽度
        float h=tv.getHeight();//或得高度
        float left=tv.getLeft();//获得左边距
        float top=tv.getTop();//获得上边距
        Log.e("ttit","width="+w);
        Log.e("ttit","height="+h);
        Log.e("ttit","left="+left);
        Log.e("ttit","top="+top);
    }
}

运行结果：

dp&&px
px：像素，屏幕上一个物理点
dpi：像素密度，每英寸包含的像素数
dp：设备无关像素

物理尺寸1.52
屏幕分辩率240320——px
每英寸像素点240/1.5=160（320/2=160）——dpi

px与尺寸有关
dp与尺寸无关

布局的内边距和外边距

常用布局

线性布局 - LinearLayout

1. 竖直

android:orientation="vertical"

2. 水平

android:orientation="horizontal"

4. 权重
   为每个视图设置 android:layout_weight
   

如果View或ViewGroup有固定的高度或宽度，那么权重的高度是基于已经减去固定长度的界面计算的。

相对布局 - RelativeLayout

兄弟元素

属性名称	属性含义
android:layout_below="@id/aaa"	在指定View的下方
android:layout_above="@id/aaa"	在指定View的上方
android:layout_toLeftOf="@id/aaa"	在指定View的左边
android:layout_toRightOf="@id/aaa"	在指定View的右边
android:layout_alignTop="@id/aaa"	与指定View的上边界一致
android:layout_alignBottom="@id/aaa"	与指定View的下边界一致
android:layout_alignLeft="@id/aaa"	与指定View的左边界一致
android:layout_alignRight="@id/aaa"	与指定View的右边界一致

相对于父元素位置

属性名称	属性含义
android:layout_alignParentLeft=“true”	在父元素内左边
android:layout_alignParentRight=“true”	在父元素内右边
android:layout_alignParentTop=“true”	在父元素内顶部
android:layout_alignParentBottom=“true”	在父元素内底部

相对于父元素对齐方式

属性名称	属性含义
android:layout_centerInParent=“true”	居中布局
android:layout_centerVertical=“true”	垂直居中布局
android:layout_centerHorizontal=“true”	水平居中布局

间隔

属性名称	属性含义
android:layout_marginBottom=""	离某元素底边缘的距离
android:layout_marginLeft=""	离某元素左边缘的距离
android:layout_marginRight =""	离某元素右边缘的距离
android:layout_marginTop=""	离某元素上边缘的距离
android:layout_paddingBottom=""	往内部元素底边缘填充距离
android:layout_paddingLeft=""	往内部元素左边缘填充距离
android:layout_paddingRight =""	往内部元素右边缘填充距离
android:layout_paddingTop=""	往内部元素右边缘填充距离

帧布局 - FrameLayout

悬浮组件（常用）

网格布局

名称	含义
android:columnCount	列数
android:rowCount	行数
android:layout_columnSpan	横跨的列数
android:layout_rowSpan	横跨的行数

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/GridLayoutl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:columnCount="4"
   
    android:rowCount="6">
    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#ffc"
        android:text="0"
        android:textSize="50dp"
        />
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退"
        />
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清除"
        />
    <Button android:text="1"/>
    <Button android:text="2"/>
    <Button android:text="3"/>
    <Button android:text="4"/>
    <Button android:text="5"/>
    <Button android:text="6"/>
    <Button android:text="7"/>
    <Button android:text="8"/>
    <Button android:text="9"/>
    <Button android:text="0"/>
    <Button android:text="."/>
    <Button android:text="="/>
    <Button android:text="+"/>
    <Button android:text="-"/>
    <Button android:text="*"/>
    <Button android:text="/"/>
</GridLayout>

结果展示：