Android用户页面设计（1）

Android 用户界面布局管理

Android 系统按照 MVC （模型( model ) —— 视图( view ) —— 控制器( controller ) ）设计模式将应用程序的界面设计与功能控制设计分离，类似于前后端分离，可以单独修改用户界面和实现功能的控制代码。

在 Android Studio 中前端的界面布局文件是在生成的应用程序框架项目的 res 资源目录下的 layout 子目录中，文件名为 activity_main.xml（创建新项目时可以改名字）。如果要调用资源文件，就使用 R.txt 的R类，把 res 目录中的资源与 id 编号进行映射，用 id 号进行管理。

布局文件的规范

1. 布局文件作为项目的资源存放在 res\layout 目录下，是 .xml 文件，默认文件名为 activity_main.xml。

2. 布局文件的根节点通常是一个布局方式，在根节点内可以添加组件作为结点。

3. 布局文件的根节点必须包含一个命名空间，为了与其他项目进行分离。
   如下：
   xmlns:android="http://schemas.android.com/apk/res/android"

4. 如果要实现 Java 程序中控制界面的组件，则必须为界面文件的组件定义一个id，也就是通过 id 把资源文件以及组件引用过来进行控制。

组件定义格式：
android:id = "@+id/<组件id>"

布局方式

线性布局 —— LinearLayout
相对布局 —— RelativeLayout
帧布局 —— FrameLayout
表格布局 —— TableLayout
绝对布局 —— AbsolateLayout（在 android 1.6 中已经被抛弃）

线性布局

线性布局就是将放入其中的组件按照垂直或水平方向来布局，也就是控制放入其中的组件横向或纵向排列。

属性	作用
andrioid : orientation = ""	设置组件的排列方式，两个属性 horizontal（水平排列）和 vertical（垂直排列）
android : gravity = ""	设置管理器内部组件的位置，常用的选值为 center_horizontal,center_vertical,center 等等
android : background = ""	设置属性的背景，可以是背景图片或者背景颜色

水平线性布局效果图

垂直线性布局效果图

相对布局

相对布局是指按照组件之间的相对位置来进行布局，如A组件在B组建的左边，右边，上方或下方等。

属性	作用
android : layout_alignLeft,Right,Bottom,Top	指定该组件位于某个组建的左边，右边，下边，上边对齐
android : layout_alignParentLeft,Right,Bottom,Top	指定该组件位于布局管理器左边，右边，底部，顶部对齐
android : layout_centerHorizontal	指定该组件位于布局管理器水平居中的位置
android : layout_centerVertical	指定该组件位于布局管理器垂直居中的位置
android : layout_centerInParent	指定该组件位于布局管理器的中央位置
android : layout_toRightOf,toLeftOf,above,below	指定该组件位于某个组件的右侧，左侧，上方，下方
android : layout_marginLeft,Right,Bottom,Top	指定该组件左边缘，右边缘，下边缘，上边缘的距离 、

帧布局

帧布局就是多个组件层叠排序，后面的组件覆盖前面的组件。（个人理解）

属性	作用
android : foreground	设置该帧布局容器的前景图像
android : foregroundGravith	定义回执前景图像的gravity属性，即前景图像显示的位置

效果图

表格布局

android提供的表格布局，见名知意就是表格的形式，我们需要在表格里面去添加组件，以此来实现UI界面。

效果图

注意：合理的界面的布局结构应是宽而浅，而不是窄而深。

布局文件常用的重要属性值

设置组件大小的属性值

• wrap_contont：强制性地使视图扩展以显示全部内容，完整显示其内部的文本和图像，根据组件内容的大小来决定组件的大小，是变量。
• match_parent：Android2.2 以上和 fill_parent 通用，填充在容器的所有空间。
• fill_parent：强制性地使构件扩展，以填充布局单元内尽可能多的空间，就是强制性让它布满整个屏幕。

设置组件大小的单位

• px ( pixels ) ：像素，即屏幕上的发光点。
• dp ( 或dip，全称为 device independent pixels )：设备独立像素，一种支持多分辨率设备的抽象单位，和硬件相关。
• sp ( scaled pixels )：比例像素，设置字体大小。

设置组件的对齐方式

• 在组件中由 "android : gravity" 属性控制组件的对齐方式，其属性有上 ( top )，下 ( bottom )，左 ( left )，右 ( right )，水平方向居中 ( center_horizontal )，垂直方向居中 ( center_vertical )等。

TextView常用属性

设置属性的时候，最好不要固定组件的高度和宽度

属性	作用
layout_width	组件宽度
layout_height	组件高度
layout_weight	组件所占权重(建议使用时 width = "0dp")
layout_marginStart(Left)	左边距(一般使用 dp)
layout_marginEnd(Right)	右边距(一般使用 dp)
text	文本内容
textColor	字体颜色
textStyle	(normal —— 无效果，bold —— 加粗，italic —— 斜体)
textSize	字体大小(一般使用 sp)
gravity	调整位置
margin	外边距 (外面的 view 无法完全靠近这个 view 的边界)
padding	内边距 (view —— 里面的内容，至少和边界有一段设定好的距离)

layout_weight 的原理：
R = C+B*P（R 是子布局最终大小），其中，C 表示子布局声明的大小，B 表示剩余布局大小，P 表示子布局占据父布局剩余布局的比例。

UI 组件美化

1. 调整内外间距（按照自己想法来）

这是我做的答题页面：

2. 样式 drawable 文件

shape 中属性

设置圆角按钮

在 res 根目录下的 drawable 子目录下新建 .xml 文件（命名规范就行，按照自己需求来）
我这里分别对矩形的四个角进行了弧形修饰，并设置了边框的粗细和颜色（跟上面说的一样，据自己需求来），如下图：

设置按钮选中状态

也是同样的操作，新建一个.xml文件，设置相应功能，在antivity_main.xml 中应用

设置按钮透明状态

透明度的计算方式

透明度范围分为 0 - 255，0 就是全透明，255 就是不透明，用16进制表示为 （透明）00 –> FF（不透明） 例如：50%透明度，50%也就是256的一半，因为是从0开始算的，所以是 127，转换成16进制就是 7F。透明度 和 不透明度是两个概念， 它们加起来是1，或者100%。

例如需要计算30%透明度，那么它对应的不透明度则是100% - 30% = 70%，不透明度为 70%，根据公式进行计算 255*70% = 178.5，四舍五入 179，然后利用计算器转为 16 进制为 B3。

Android 中的颜色常常遵循 RGB/ARGB 标准，使用时通常以 "#" 字符开头，以十六进制表示。

常用的颜色格式为：

#RGB
#ARGB
#RRGGBB
#AARRGGBB

ARGB 依次代表透明度（alpha）、红色（red）、绿色（green）、蓝色（blue）。
以颜色值 "#FF99CC00" 为例，其中，FF 是透明度，99 是红色值， CC 是绿色值， 00 是蓝色值

这里是我设置的内容，做个参考

设置渐变色按钮

android:angle是渐变角度
android:angle＝“ 0 ” 时，是从左到右，按照开始颜色到结束颜色来渲染的

android:angle＝“ 90 ” 是从下到上来渲染的

android:angle＝“ 270 ” 是从上到下来渲染的

android:angle＝“ 180 ” 是从右到左来渲染的

android:angle＝“ 360 ” 和 android:angle＝“ 0 ” 是一样的

我根据我自己的背景设置了一个渐变色的.xml文件（根据上面的表来配置属性）

注意：修改按钮颜色时可能会遇到这种情况

我们在布局中添加按钮，并对其进行改变背景为 @color/teal_200 的操作，按钮颜色并未发生变化，如下图

可以看见根目录 res 下的 themes.xml 文件中显示 android studio 的默认主题模式如下：

我们只需要对 themes.xml 文件的主题进行修改即可（这里我是改为的是 Bridge）

可以观察到按钮颜色能够被修改了（OK！！！）