2.01布局_UI组件_Android

布局_UI组件_Android
Android布局
声明布局（2种方式）
声明布局
xml编写布局
加载 XML 资源
id
XML 标记内部的 ID
@+id 和 @id区别：
Android常量
布局参数 Layout属性
布局位置
px 与 dp 区别
内边距和外边距
常用布局
线性布局 - LinearLayout
相对布局 - RelativeLayout
帧布局 - FrameLayout
网格布局 GridLayout

TOC

布局_UI组件_Android

Android布局

布局(layout)可定义应用中的界面结构（例如 Activity 的界面结构）。布局中的所有元素均使用 View和 ViewGroup 对象的层次结构进行构建。

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

布局的结构

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

Android中在xml中编写ui代码

声明布局（2种方式）

声明布局

• 在 XML 中声明界面元素，Android 提供对应 View 类及其子类的简明 XML 词汇，如用于微件和布局的词汇。
  例如：

<?xml version="1.0" encoding="ut3f-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:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

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

//创建容器
ConstraintLayout constraintLayout = new ConstraintLayout(this);
//创建视图
TextView view = new TextView(this);
view.setText("Hello World!");
constraintLayout.addView(view);

这种方法编写的ui需要在：Tools > Layout Inspector 中打开实时ui。

xml编写布局

• 类似html的嵌套元素
• 每个布局文件都必须只包含一个根元素，并且该元素必须是视图对象或 ViewGroup 对象
• 定义根元素后，可以子元素的形式添加其他布局对象或控件，从而逐步构建定义布局的视图层次结 构
• 放在Android 项目的 res/layout/ 目录中

加载 XML 资源

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

public class MainActivity extends AppCompatActivity {

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

在res/layout/中编写app页面的ui,然后在Java的Activity中使用onCreate回调,处理页面.

id

XML 标记内部的 ID

android:id="@+id/组件的id名"

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

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

//在xml文件中定义
<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:textSize="24sp"/>
//在Activity类中引用
TextView textView = (TextView) findViewById(R.id.tv);

@+id 和 @id区别：

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

Android常量

尺寸大小

• wrap_content 指示您的视图将其大小调整为内容所需的尺寸。
• match_parent 指示您的视图尽可能采用其父视图组所允许的最大尺寸。

布局参数 Layout属性

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

对应代码

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 指示您的视图尽可能采用其父视图组所允许的最大尺寸。

布局位置

• 视图可以通过调用 getLeft() 方法和getTop() 方法来获取视图的坐标位置 ，也可以通过getWidth() 和getHeight() 获取视图的尺寸，这些方法返回的值是相对于其父视图的位置。
• 位置和尺寸的单位是像素（ px ）

@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();
}

px 与 dp 区别

• px 即像素，1px代表屏幕上一个物理的像素点；
  • 给视图设置px单位，不同分辨率下，尺寸不一样
• dp (dip) Density independent pixels ，设备无关像素。它与“像素密度”密切相关 ;
  • dpi像素密度： 每英寸包含的像素数

    假设有一部手机，屏幕的物理尺寸为1.5英寸x2英寸，屏幕分辨率为240x320，则我们
    可以计算出在这部手机的屏幕上，每英寸包含的像素点的数量为240/1.5=160dpi（横
    向）或320/2=160dpi（纵向），160dpi就是这部手机的像素密度，像素密度的单位
    dpi是Dots Per Inch的缩写，即每英寸像素数量.

密度类型	代表的分辨率（px）	屏幕密度（dpi）	换算（px/dp）	比例
低密度（ldpi）	240x320	120	1dp=0.75px	3
中密度（mdpi）	320x480	160	1dp=1px	4
高密度（hdpi）	480x800	240	1dp=1.5px	6
超高密度（xhdpi）	720x1280	320	1dp=2px	8
超超高密度（xxhdpi）	1080x1920	480	1dp=3px	12

内边距和外边距

常用布局

线性布局 - LinearLayout

LinearLayout 是一个视图容器，用于使所有子视图在单个方向（垂直或水平）保持对齐。
指定布局方向：

• android:orientation="horizontal":水平布局
• android:orientation="vertical:垂直布局

布局权重 android:layout_weight
通过给子视图设置权重值，来分配子视图所占空间的权重（比例），如图三个子视图权重分别设置 为1均分页面空间

相对布局 - 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

最简单的一种布局，没有任何定位方式，当我们往里面添加控件的时候，会默认把他们放到这块区 域的左上角，帧布局的大小由控件中最大的子控件决定，如果控件的大小一样大的话，那么同一时刻就只能看到最上面的那个组件，后续添加的控件会覆盖前一个

网格布局 GridLayout

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

一个组件若是跨了好几个组件,但是使用的时候,默认是使用第一个网格的需要设置填充(类似合并单元格)

android:layout_gravity="fill"