UI布局和初级控件的使用

素颜马尾好姑娘i 2023-10-06 15:06 3阅读 0赞

### **Activity** ###

1、Activity是Android项目应程序中的交互接口。

2、可以简单理解为屏幕上的一个窗口，应用每打开一个新的屏幕窗口，都对应打开了一个Activity。

3、Activity仅仅是窗口这个容器，类似于一块黑板，在黑板上写什么内容，需要专门的绘制工具实现内容的绘制。

Android中，负责绘制和显示内容的是通过View和ViewGroup,以及其一系列的派生子类进行实现。

#### **View** ####

1、View指的是界面上显示的一个视图空间，比如按钮，输入框，单选框，复选框等都是视图。

2、所有的视图控件均继承自View类，即所有的视图空间都是View的子类。

所有的Android控件，又称为Widget，都是View的子类。

#### **ViewGroup** ####

在Android中，ViewGroup继承自View，表示的是容纳View的容器，主要的作用是装在和管理下一层的View对象或者ViewGroup对象。

#### **View和ViewGroup的关系** ####

如图是View和ViewGroup的关系图。

![a1f661b344c14896aee273179f58c26f.png][]

从上图中可以看到，View是被包裹在ViewGroup容器中的，而ViewGroup中既可以包含View，也可以包含ViewGroup，实现嵌套。

#### **Layout 布局** ####

翻译为界面布局，主要的作用是为应用程序提供界面架构。用于控制Activity中的控件的大小、位置、颜色等一些列属性。

在Android中，依据ViewGroup派生的一些容器，可以用来作为整个视图的布局。ViewGroup派生出了：AbsoluteLayout、FrameLayout、GridLayout、LinearLayout、RelativeLayout、SlidingDrawer等。

#### **LinearLayout 线性布局** ####

1、顾明思议按照水平方向或者垂直方向进行控件的摆放。

2、特有属性：

*  orientation：该属性用于指定布局中的排列方式，有两种：horizontal水平布局，vertical垂直布局。默认使用水平布局方式。
 *  layout\_weight：该属性表示权重，除去被显示占据的空间以外的空间，然后根据权重的大小来分配空间，使用权重通常会把分配该权重方向的宽度设置为0dp，如果未设置0dp，则该空间会占据指定的宽度。

3、常用属性：

*  id：为组件定义唯一指定标识符，不可重复，方便在Activity中通过id进行获取该控件；
 *  layout\_width：指定布局宽度，通常有两种选项：wrap\_content表示自动包裹，控件实际宽度。match\_parent：填充父容器宽度。
 *  layout\_height：指定布局高度，值选项同layout\_width一样。
 *  gravity：指定布局容器包含的子控件的对齐方式。可选值包括：left、right、center。
 *  layout\_gravity：该属性用于指定
 *  layout\_margin：外边距，布局或者控件距离外部元素的边距。通常设置一个具体的值。
 *  layout\_padding：内边距，布局或者控件距离内部子控件的边距，通常设置一个具体的值。

![c94e3efbeec344f5a45e2a80b440fe97.png][]

**RelativeLayout 相对布局**

子控件之间或者子控件和容器之间关于相对位置描述的布局。

关于RelatvieLayout的一些属性，可以分为两类：

1、相对于容器（父布局）的属性：

*  layout\_centerVertical：设置是否相对于父布局垂直居中，属性值为true
 *  layout\_centerHorizontal：设置是否相对于父布局水平居中，属性值为true
 *  layout\_centerInParent：设置是否相对于父布局居中（水平和垂直方向都均居中），属性值为true
 *  layout\_alignParentTop：设置在父布局的顶部，属性值为true
 *  layout\_alignParentBottom：设置在父布局的底部，属性值为true
 *  layout\_alignParentRight：设置在父布局的右侧，属性值为true
 *  layout\_alignParentLeft：设置在父布局的左侧，属性值为true
 *  layout\_alignParentStart：设置在父布局开始的位置，属性值为true
 *  layout\_alignParentEnd：设置在父布局结束的位置，属性值为true

2、子控件之间的相对位置属性：

*  layout\_above：组件位于某个组件的上方，属性值为另外一个控件的唯一资源id
 *  layout\_below：某个组件的下方，属性值同上
 *  layout\_toLeftOf：某个组件的左侧，属性值同上
 *  layout\_toRightOf：某个组件的右侧，属性值同上
 *  layout\_alignTop：和某个组件上方对齐，属性值为另外一个子控件的唯一资源id
 *  layout\_alignBottom：和某个组件下方对齐，属性值同上
 *  layout\_alignLeft：和某个组件左侧对齐，属性值同上
 *  layout\_alignRight：和某个组件右侧对齐，属性值同上

3、其他特殊属性

*  ignoreGravity：忽略容器中的某个组件，使其不受RelativeLayout的空置，属性值是某个控件的唯一资源id
 *  gravity：设置内部子控件的显示位置。属性值可以是center\_horizonta、top、bottom、left等其中的一个值或者两个值。

#### **FrameLayout 帧布局** ####

1、帧布局的特点是控件层叠显示，默认从布局容器的左上角摆放。

2、子控件摆放顺序：先添加的控件放在最底层，后添加的子控件放在上层。

3、可以通过layout\_gravity属性修改FrameLayout的子控件摆放位置。

4、使用场景：相较于LinearLayout和RelatvieLayout，FrameLayout适用场景较少，适合用于重叠布局显示的情景。

![55dde34fa2a24eed9260bbf7c5ada43b.png][]

**GridLayout 网格布局**

顾名思义网格布局就是将布局设置成网格，通过网格定位实现对控件的摆放。GridLayout将布局划分为行、列和单元格，同时也支持在行、列上进行交错排列。

1、属性及说明

*  orientation：设置子组件的排列方式，可选值为vertical和horizontal。默认水平方式排列，即horizontal
 *  gravity：设置子组件的排列方式，可选值：center、left、right、bottom等，同时使用两种时用|分隔开
 *  layout\_gravity：如果让某个组件填满行或者列，设置layout\_gravity为fill

2、特有属性和说明

*  rowCount：设置网络布局有几行
 *  columnCount：设置网络布局有几列
 *  layout\_row：子组件中，设置组件位于第几行
 *  layout\_column：子组件中，设置组件位于第几列
 *  layout\_rowSpan：子组件中，用于设置组件跨几行
 *  layout\_columnSpan：子组件中，用于设置组件跨几列

![20235bd45f264248be929fc3e2a72b92.png][]

**AbsoluteLayout 绝对布局**

1、通过坐标确定控件的摆放位置，通过宽度和高度显示控件。

2、绝对布局在日常开发中因为适配不方便，所以基本不使用，此处不再赘述，可自行学习使用。

#### **ConstraintLayout 约束布局** ####

为了解决布局嵌套过多的问题，在API9以后，提供了ConstraintLayout 约束布局。android studio 2.3版本后默认的布局样式，可以把ConstraintLayout看做是RelativeLayout布局的升级。

#### **初级控件** ####

#### **TextView 文本** ####

1、android中的文本控件、用于展示字体

2、常用属性：

*  autuLink：设置文本是否为URL链接/email/电话号码，使用该属性时，文本显示为可点击的链接。
 *  autoText：设置该属性时，文本将自动执行输入值的拼写纠正。
 *  cursorVisible：该属性用于设置光标为显示/隐藏，默认是显示。
 *  drawableTop：在展示的text文本正上方显示输出一个drawable。
 *  ellipsize：该属性用于设置当文字过长时，文本的展示样式。可选值：start，end，middle。分别表示在文本的开头，结尾和中间省略内容并显示为省略号...
 *  maxLines：设置文本的最大显示行数，与width或者layout\_width结合使用，超出部分自动换行，超出行数不显示。
 *  lineSpacingMultiplier：设置行间距的数值，该数值为标准数值的倍数，比如1.2表示1.2倍。
 *  phoneNumber：设置为电话号码的输入方式。
 *  textColorHighlight：被选中文字的底色，默认蓝色。
 *  textColorHint：设置提示信息文字的颜色，默认为灰色。
 *  textStyle：设置字形，可选值为\[bold(粗体) 0, italic(斜体) 1, bolditalic(又粗又斜) 2\] 可以设置一个或多个，用“|”隔开。

#### **Button 按钮** ####

*  drawable：设置图片资源
 *  text：设置显示的文本
 *  textColor：设置显示文本的颜色
 *  textSize：显示文本的字体大小
 *  background：设置背景，图片或者颜色
 *  onClick：点击事件

#### **EditText 输入框** ####

*  hint：内容为空时显示的文本
 *  inputType：限制输入类型，number整数类型，numberDecimal小数点类型，date日期类型，text文本类型（默认值），phone电话，textPassword密码，textVisiblePassword可见密码，textUri网址
 *  gravity：设置文本的位置，start、center、end三个可选值。
 *  digits：允许设置的字符范围，即限制可以设置哪些字符。
 *  drawableLeft：设置输入框左侧的drawable资源。
 *  drawablePadding：设置输入内容text与drawable的间隔，需配合drawableLeft、drawableRight、drawableTop、drawableBottom一起使用。
 *  监听事件：TextChangeListener，监听输入框内容变化
 *  scrollHorizontally：设置文本超出TextView的宽读时，是否出现横拉条。

#### **RadioButton 单选框按钮** ####

1、定义：单选框表示的是在一组选项当中，只能选择其中一个选项的控件。

2、声明格式：使用RadioGroup标签在xml中定义表示是一个单选框按钮，其中的选项内容使用RadioButton标签进行定义

3、属性：

*  checked：是否为选中状态，可选值为true和false
 *  text：选项标签中对应的文本信息

#### **ImageView 视图控件** ####

*  src：设置视图控件的图像引用来源，该值往往是res/drawable目录下的某个图片资源。
 *  scaleType：该属性表示视图控件的缩放类型，可选值包括：matrix（默认）、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fitXY
    
     *  center：保持原图的大小、显示在ImageView的中心。如果原图的size大于ImageView的size，超出部分做裁剪处理。
     *  cneterCrop：让图像填满整个ImageView，原图中心和ImageView中心进行对齐，等比例放大处理。
     *  centerInside：以原图完全显示为目的，将图片的内容完整居中显示。
     *  matrix：不改变原图大小，从ImageView左上角开始绘制原图，超过ImageView部分做裁剪处理。
     *  fitCenter、fitEnd、fitStart：将原图按比例放大(缩小)到ImageView控件的尺寸高度，分别居中、底部、顶部展示。

#### **ProgressBar 进度条** ####

*  Android系统中的进度条默认形状是圆形。
 *  可以通过style来修改进度条的样式。
 *  visbility：该属性设置进度条控件的可见性。可选值有三种：visible：肉眼可见、invisible：肉眼不可见但占据空间，gone：消失不占空间。

#### **AlertDialog 对话框** ####

*  系统中需要通过提示信息与用户进行交互时，可以使用对话框进行实现。
 *  对话框的位置显示在所有的界面元素之上，当对话框弹出时，其他控件无法操作和交互。
 *  在开发中，使用自定义的对话框完成功能实现。

#### **UI布局和基本控件总结** ####

#### **共同属性** ####

*  id：唯一资源编号
 *  width：宽度
 *  height：高度
 *  background：背景属性
 *  visible：布局或者控件的可见性，可选值包括：visible、invisible、gone

#### **特殊属性** ####

视不同控件会有不同的特殊属性。

#### **控件交互事件处理** ####

*  findViewById：在Activity中通过资源id解析到控件，需要强制类型转换成对应的控件类型；
 *  setOnClickListener：为某个控件设置处理点击事件；
 *  setOnLongClickListener：控件长按事件；

#### **布局和控件使用步骤** ####

1、Activity通过setContentView设置对应的layout布局文件(xml文件)；

2、在xml布局文件中进行UI布局和控件布局，为控件设置唯一资源id编号

#### **如何在尺寸各异的屏幕上正常显示布局效果？** ####

确保UI布局能在不同尺寸的屏幕上保持统一的展示效果，需要使用屏幕适配方案，对UI布局和各主流尺寸屏幕进行适配，简称为屏幕适配。

#### **屏幕适配基础知识** ####

*  屏幕尺寸：手机对角线的物理尺寸，简单说就是指屏幕大小，单位是英寸。比如小米9（6.39寸）、荣耀20（6.26寸）、OPPO Reno（6.4寸）、华为P30(6.1寸)、华为P30Pro（6.47寸）、小米10（6.67寸）
 *  屏幕分辨率：显示设备在屏幕的横向、纵向上的像素点数的总和。格式为宽X高。比如华为P30（2340 x 1080像素）、小米10（2340 x 1080像素）、小米Mix 3（2340 x 1080像素）。分辨率单位是像素，英文px；1px = 1像素点
 *  屏幕像素密度：dosts per ich，每英寸的像素点数，单位是简称dpi。

#### **屏幕尺寸、分辨率、像素密度的关系** ####

分辨率为宽x高，屏幕大小为英寸。像素密度与另外两者的关系公式为：

![f8ec0b1fc99c44c3b3823c6f26be3590.png][]

根据分辨率和屏幕大小尺寸两个方面的数据，结合上述三者关系的公式，最后可以计算得到像素密度的最终值。

![99a9117b74f34e7cb6bc66b14b6f9c54.png][]

如上图所示，根据最后的像素密度按从小到大进行密度类型的分类，五个等级分别对应：ldpi、mdpi、hdpi、xhdpi以及xxhdpi。

使用上述公司可以在由需要的时候，设置控件的尺寸及布局的尺寸，设置的时候单位是px。但是因为屏幕的分辨率不同，所以对不同的尺寸屏幕要想保持效果一致，就需要设置不同的px，这显然是灾难。因此，Android还有一个特有的单位：**密度无关像素**。

#### **密度无关像素** ####

density-independent pixel，简称为dip或者dp，其含义是表示与终端上的实际物理像素点无关，因此可以保证在不同像素密度的设备上显示相同的效果。所以：

**1、Android应用开发中要使用dp作为控件和布局尺寸，而不是px。**

**2、dp和px有一个转换的关系。UI设计师给到开发的设计图是px的单位，Android开发使用dp作为单位，因此需要对两者进行转换。**

![74490f8552dd4bdb9b39f22fdeb9702a.png][]

#### **独立比例像素** ####

在Android中还有一个概念为scale-independent pixel，简称为sp或者sip，可以翻译为独立比例像素。单位是sp。对于独立比例像素，有两点需要掌握：

1、应用场景：在Android的开发中，使用sp单位进行文字大小的设置，可以根据字体的大小首选项进行缩放。

2、常用：一般使用12sp、14sp、16sp等类似偶数的整数作为字体字号的大小。奇数和小数容易造成精度的丢失。

#### **Android屏幕碎片化适配方法** ####

#### **一、布局匹配** ####

结论：首选RelativeLayout（相对布局），禁止使用AbsoluteLayout（绝对布局）

常用的布局：Linearlayout（线性布局）、RelativeLayout（相对布局）、帧布局（FrameLayout）

#### **根据屏幕大小配置不同的布局文件** ####

当需要为不同的屏幕尺寸进行界面适配时，往往需要通过设计不同的布局来进行实现。让Android设备能自动的在不同的设备上加载不同的布局。

#### **A、屏幕尺寸** ####

1、规则：在>7英寸的屏幕上，显示“双面板”模式展示更多内容；<7英寸的屏幕上，使用“单面板”显示内容

2、操作：双面版布局文件在res下单独放置在**layout-large**目录中。

3、局限性：适合于Android 3.2版本之前。

#### **B、屏幕最小宽度：720宽度：宽度小于720，显示界面a效果，宽大于>720,显示b效果。** ####

1、规则：通过指定最小宽度来确定屏幕要加载的布局资源

2、操作实现：比如600dp宽度以上的屏幕使用另外一种布局，则将新的布局放在**res/layout-sw600dp**目录中。

3、**特点：**sw意为small width的缩写，但是**并不区分方向**，也就是说无论宽度还是高度，只要大于ndp，就采用swxxxdp中的布局。

#### **C、布局别名** ####

1、来源：布局别名是为了解决前文所述的3.2版本之前和3.2版本之后的不同适配方案。3.2之前使用尺寸限定符将大尺寸屏幕布局放在layout-large文件目录中；3.2之后使用最小宽度限定符将大尺寸屏幕布局放置在layout-swXXXdp目录中。

2、缺点：两个文件内容一致，但为了适配版本，会造成维护成本的增加。

3、解决方案：引入布局别名，通过引用来实现不同界面的适配。

举例main.xml布局文件，对应的适配文件为main\_twopanes.xml文件。

*  values-large/layout.xml：定义layout的item，并引用main\_twopanes.xml
 *  values-swXXXdp/layout.xml：定义layout的item，并引用main\_twopanes.xml

#### **D、屏幕方向** ####

1、使用场景：根据屏幕的方向进行布局的调整

2、操作方法：

*  在layout目录中定义屏幕方向上要展示的布局文件，往往是多个（常见于2个）。
 *  根据屏幕尺寸、方向等，使用布局别名进行适配。

#### **二、“布局组件”的屏幕适配** ####

在使用了正确的UI布局文件的情况下，还要保证界面上布局内的各个组件的展示效果能够达成统一的美观效果展示。

1、在设置控件的宽度、高度等尺寸时，使用wrap\_conent、match\_parent、weight来控制视图组件的宽度和高度。

2、禁止使用具体的尺寸数据来硬编码指定控件的尺寸。px。如果dp

3、涉及到控件间的相对位置，空隙，间隔等具体的距离时，尺寸的单位使用dp，禁止使用px像素单位。

#### **三、“图片组件”的屏幕适配** ####

为了让图片在不同尺寸和分辨率的手机上展示的效果能够一致，专门对图片做适配。

1、在准备应用布局中使用的图标或者icon时，设计提供多套供不同分辨率手机显示的图标文件，分别放置在drawable-ldpi、drawable-dpi、drawable-xdpi、drawable-xxdpi、drawable-xxxdpi目录当中。

2、对于需要匹配不同屏幕大小，需要适配控件的尺寸大小的情况，可以使用.9图来实现。例如：某个按钮，有一个背景图，该按钮大小不固定。此时如果设置固定尺寸的图片，会被拉伸，则需要使用.9图。

3、.9图的格式：.9图意为可以自动拉伸的位图，其后缀名为file.9.png，是一种被特殊处理的png图片，设计时可以指定图片的拉伸区域和非拉伸区域。.9图设置一套即可，放置在res目录中的drawable中即可被引用使用。

#### **四、“文字控件“的适配设置** ####

在应用开发过程中，涉及到设置UI布局中的文字字体的展示，一律使用单位sp进行表示。推荐使用偶数如12sp、14sp、16sp、18sp等等字体大小。

#### **五、"语言"适配** ####

1、方法：把UI中的字符串存储在外部文件，通过代码提取，存放在res/values/strings.xml文件中。

2、支持多种语言，在res中创建额外的values目录，通过连字符和iso国家代码为目录名称。如：values-en代表的是英文，values-jp代表的是日语。

[a1f661b344c14896aee273179f58c26f.png]: https://img-blog.csdnimg.cn/a1f661b344c14896aee273179f58c26f.png
[c94e3efbeec344f5a45e2a80b440fe97.png]: https://img-blog.csdnimg.cn/c94e3efbeec344f5a45e2a80b440fe97.png
[55dde34fa2a24eed9260bbf7c5ada43b.png]: https://img-blog.csdnimg.cn/55dde34fa2a24eed9260bbf7c5ada43b.png
[20235bd45f264248be929fc3e2a72b92.png]: https://img-blog.csdnimg.cn/20235bd45f264248be929fc3e2a72b92.png
[f8ec0b1fc99c44c3b3823c6f26be3590.png]: https://img-blog.csdnimg.cn/f8ec0b1fc99c44c3b3823c6f26be3590.png
[99a9117b74f34e7cb6bc66b14b6f9c54.png]: https://img-blog.csdnimg.cn/99a9117b74f34e7cb6bc66b14b6f9c54.png
[74490f8552dd4bdb9b39f22fdeb9702a.png]: https://img-blog.csdnimg.cn/74490f8552dd4bdb9b39f22fdeb9702a.png