2.01布局_UI组件_Android
Android布局
声明布局(2种方式)
声明布局
xml编写布局
加载 XML 资源
id
XML 标记内部的 ID
@+id 和 @id区别:
Android常量
布局参数 Layout属性
布局位置
px 与 dp 区别
内边距和外边距
常用布局
线性布局 - LinearLayout
相对布局 - RelativeLayout
帧布局 - FrameLayout
网格布局 GridLayout
布局_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的缩写,即每英寸像素数量.
- dpi像素密度: 每英寸包含的像素数
密度类型 | 代表的分辨率(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"