1.UI

UI – User Interface – 用户界面 – 系统与用户信息交换的媒介
软件设计 = 编码设计 + UI设计
Android UI = 布局 + 控件

2.布局layout

View：微件。用户可交互内容。常见的有TextView(文本框)、Button(按钮)等。
ViewGroup：布局。不可见容器。常见的有LinearLayout(线条布局)、ConstraintLayout(约束布局)等。
布局与微件的视图层次结构示意图：(跟文件夹与文件差不多)

布局的声明方式：

　　　　文件 activity_main.xml中：

<?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="300dp"
        android:layout_height="300dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

<TextView
　　　　...
         /> 代表了创建一个微件View - 文本框(TextView)，并在(...)部分设置了它的样式。

　　接下来需要实例化这个View。在文件MainActivity.java中：

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

注意：

　　每个布局文件有且只有一个根元素。并且必须是View或ViewGroup。
　　根元素下可以添加子元素控件，逐步定义布局视图层次结构。
　　声明布局后要以.xml形式保存在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>

加载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);
        }

3.属性

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮"/>

4.ID

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>

//通过ID值创建视图对象实例
TextView textView = (TextView) findViewById(R.id.tv);

5.布局参数

布局参数LayoutParams：给视图设定在布局中的位置和大小。

设置方式：

　　xml：

    <TextView
        android:id="@+id/tv"
        android:layout_width="100dp"    //宽
        android:layout_height="200dp"    //高
        android:layout_marginLeft="10dp"    //左边距
        android:layout_marginTop="20dp"    //上边距
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>

java：

        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);

获取布局位置
- 　　视图：getLeft(),getTop()获取视图的坐标位置(相对于其父视图)；getWidth(),getHeight()获取视图的尺寸。

相对测量单位：

　　wrap_content：指示视图将其大小调整为内容所需的尺寸(内容多大视图多大)
　　match_parent：指示视图尽可能采用父视图组所允许的最大尺寸(父视图允许多大就多大)

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:text="Hello,I am a TextView"
        android:textSize="24sp"/>

注意：在Android编程中描述尺寸大小尽量用dp，或wrap_content、match_parent而非px。

　　px：像素，1px指屏幕上一个物理像素点。
　　dp：设备无关像素。与像素密度有关。

密度类型	代表的分辨率 (px)	屏幕密度 (dpi)	换算 (px/dp)	比例
低密度(ldpi)	240×320	120	1dp=0.75px	3
中密度(mdpi)	320×480	160	1dp=1px	4
高密度(hdpi)	480×800	240	1dp=1.5px	6
超高密度(xhdpi)	720×1280	320	1dp=2px	8
超超高密度 (xxhdpi)	1080×1920	480	1dp=3px	12

6.内边距与外边距

<?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:background="#ffc"    //浅黄色背景
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="300dp"    //红宽
        android:layout_height="300dp"    //红高
        android:layout_marginLeft="40dp"    //外左边距
        android:layout_marginTop="40dp"    //外上边距
        android:background="#DD001B"    //红色
        android:paddingLeft="40dp"    //内左边距
        android:paddingTop="40dp">    //内上边距

        <View
            android:layout_width="180dp"    //绿宽
            android:layout_height="180dp"    //绿高
            android:background="#139948"/>    //绿色
    </LinearLayout>

</LinearLayout>

外边距		内边距
layout_margin	外边距	padding	内边距
layout_marginTop	外上边距	paddingTop	内上边距
layout_marginBottom	外下边距	paddingBottom	内下边距
layout_marginLeft	外左边距	paddingLeft	内左边距
layout_marginRight	外右边距	paddingRight	内右边距