笔记——android_uI页面设计基础_android界面设计

        一个不会Android的人，从哪里开始学呢？本章将带初学者进入Android的会客厅，当然先需要Java语言基础，并安装好Android Studio开发工具。

当我们打开手机里的一款App时，首先看到的便是App页面，本章将教初学者如何快速把握Android页面设计的核心，设计一个App页面，并能做一定的交互。

3.1 布局文件

页面文件在Android里叫布局文件，当我们在Android Studio工具里创建好一个项目后，布局文件所在位置是项目的【res】目录下的【layout】目录下，布局文件的后缀是 . xml，具体如图所示。

 创建Android项目时，默认会为我们自动生成一个布局文件，鼠标左键双击可以打开。布局文件打开后，它的界面看起来有点复杂，总的可分为代码图形化编辑区、代码图文结合编辑区、代码文本编辑区3部分。点击工具右上角部分的【Design】选项为代码图形化编辑区，后面用图形化编辑区表述，如图所示。

 点击工具右上角部分的【Split】选项为代码图文结合编辑区，后面用图文结合编辑区表述，如图所示。

 点击工具右上角部分的【Code】选项为代码文本编辑区，后面用文本编辑区表述，如图所示。

图形化编辑区【Design】是用图形化的方式来编写设计App页面的代码，图文结合编辑区也就是同时可以用纯文本和图形化方式编写设计App页面的代码，文本编辑区是用纯文字方式来编写设计页面的代码。图形化编辑区又分为5部分：效果区、控件栏、控件结构栏、属性设置栏和其他设置栏，如图所示。 

 

1）效果区：用于图形化方式实现App页面代码和展示实现的效果。可以以2种效果显示，一种人眼视角效果，另一种类似透视效果。白色的是人眼视觉效果，深青色的是透视效果，这个两个效果框可以在其他设置栏里设置，同时出现两个或其中一个都行。它的右下角有放大缩小等图标，点击可以实现相应操作。

（2）控件栏：里面分门别类存放着各种控件，控件是用来表现视觉效果或相关功能的类。在Android里，一般页面上的图片、文字、视频、列表等视觉效果的内容都放在控件栏里，比如【Button】控件表示按钮，【TextView】控件表示可以放入文本。

（3）控件结构栏：用于显示当前页面里控件的层次结构，比如页面里控件之间的包含关系等。

（4）属性设置栏：用图形化的方式给控件添加属性及其值，比如控件的宽度、高度、背景、文字等都可以用属性表示，其值可以灵活设置，比如多高、多宽、颜色等等。

（5）其他设置栏：比如有布局页面横竖屏设置、布局页面尺寸设置、放大、缩小等功能设置，这些都可以随意点击试试效果。

图文结合编辑区【Split】又分为2部分：文本编辑区和效果区，如图所示。

           文本编辑栏                                                                                 效果区

（1）文本编写区：用文本编写App页面代码，右边效果区会同步显示效果。

（2）效果区：展示当前页面效果，可以拖动其中的控件的位置，进而对其位置进行调整，左边代码编写区里的代码也会相应调整。顶部有一些选项，可以进行白色深青色效果切换、横竖屏效果切换、预览尺寸选择等等。它的右下角有放大缩小等图标，点击可以实现相应操作。

文本编辑区【Code】，只能用纯文本的形式编写代码。在Android Studio里编写代码时，工具会自动生成相应弹出框提示，可以选择相应的控件、属性、方法、类名等等，以便节省时间。当代码编写有基本的语法错误或未编写完时，工具会在对应地方报红色线条提示。一般都用图文结合编辑区【Split】编写代码，更为方便直观。

3.2 控件

在Android里，一般页面上的图片、文字、列表等视觉效果的内容都放在控件里，控件是用来表现视觉效果或相关功能的类，比如有图片控件、日期控件、视频控件、文字控件、按钮控件等等，有了控件，我们就能很轻松的对页面进行设计了。比如要在页面上设计一个按钮，只需要在控件栏里按住【Button】，直接拖拽到效果区即可，如果要对按钮的颜色大小文字等设置，只需要给控件添加相应的属性和属性值。

3.2.1 控件的分类

总的来说控件可以分为2大类：布局控件和具体控件。布局控件用于页面排版，具体控件负责具体的视觉内容。Android系统提供了很多控件，我们可以在控件栏找到它们，如图所示。

从图中我们可以看到，布局控件在控件栏分类列表的【Layouts】选项目录中，其他选项都可以视作具体控件。Android系统提供的控件非常多，不仅如此，我们还可以自己定义控件，自定义控件不是必须的，本节不做介绍。 

3.2.2 三个基本控件

通过上一节我们知道Android系统提供的控件非常多，对于初学者，我们不需要每个控件都逐一学习，只需要先掌握常用的几个控件就可以了，其他的根据项目需求再临时学习也可以。这里有三个基本的具体控件需要我们掌握：TextView控件、Button控件、ImageView控件，几乎每个App都会用到，布局控件在后面章节和项目页面设计一起介绍。

1.TextView控件

TextView控件是一个文本控件，主要用来显示文本内容。该控件位于【Design】界面控件栏里的Common选项中，具体位置和效果如图所示。

2.Button控件

Button控件是一个按钮控件，主要当作按键使用。该控件位于【Design】界面控件栏里的Common选项中，具体位置和效果如图所示。

 

3.ImageView控件

ImageView控件是一个图片控件，主要用来显示图片。该控件位于【Design】界面控件栏里的Common选项中，本效果里的图片是随意选择的一张图片，具体位置和效果如图所示。

 

3.2.3 控件的3种使用方式

控件的使用方式一般有3种：①在图形化编辑区【Design】直接把控件栏里的控件拖入效果区；②在文本编辑区手动按照控件语法格式编写xml文件形式代码；③在Java文件里用Java语言方式编写代码。下面介绍前2种方式的具体使用，第3种方式后面介绍。

第1种，在图形化编辑区【Design】直接把控件栏里的控件拖入效果区，如图所示。

 

 

 下面是往页面上（效果区，后面用页面表述）新拖入了3个控件，控件结构栏也同时新增3个控件，如图所示

拖入控件后如果这里有红色感叹号提示，点击工具上部的魔术棒图标即可。

当拖入控件到页面后，控件结构栏会有红色的感叹号提示，点击魔术棒图标即可。这是因为在创建项目时，系统会默认给布局文件自动添加一个根布局控件ConstraintLayout，拖入的这些控件都是放在它里面的，作为它的子控件。而在布局控件里的控件如果没有给它添加位置属性的话，就会有红色下划线或红色感叹号提示，点击魔术棒就是给它添加当前所在位置的属性，如果要去掉位置属性可以直接到代码里删除相应增加的代码或点击魔术棒图标左边的图标即可。每往页面上拖入一个控件，在文本编辑区也会自动生成对应的代码，ImageView拖入时，需要先选择一张图片，如图所示。 

 

不过在有些Android Studio版本里，根布局控件采用拖的方式是无效的，需要自己手写。

第2种，在文本编辑区按照控件语法手动编写xml文件形式代码。我们先看看布局控件和具体控件的语法格式，图是一个布局控件ConstraintLayout语法格式举例。

 

一个具体控件ImageView语法格式举例。

 

由前面的案例我们可以看出，具体控件是被包含在布局控件里的，或者说具体控件放在布局控件里面，又或者说具体控件是布局控件的下级控件。事实也是这样，因为具体控件不能排版，而布局控件专用于排版，具体控件只负责具体内容，页面的排版由布局控件负责。同时根据前面案例，我们可以总结出布局控件和具体控件的语法格式如下：

布局控件语法格式

< 控件名或控件路径
属性名 = ”属性值”
......
>
中间放其他控件
< / 控件名或控件路径 >
 
 
控件语法如下
 
< 控件名或控件路径
属性名 = ”属性值”
......
/ >

 

其中，所有符号都要是半角符号，或是英文输入法下的符号；属性可以有多个，每个属性之间换一行或空格；布局控件开头的< >和结尾的</>之间可以任意空格或添加其他控件；每个控件至少要有宽度属性“android:layout_width”和高度属性“android:layout_height”；每个控件里的属性不能重复；每个布局文件的根控件要添加xmlns:android="http://schemas.android.com/apk/res/android"属性；同时布局控件可以嵌套，一个布局控件里嵌套另一个布局控件。图3是ConstraintLayout布局控件格式举例说明。

是ImageView具体控件格式举例说明

 

3.2.4控件的继承关系

控件我们前面分成了布局控件和具体控件2种，布局控件是继承了抽象类ViewGroup的类，具体控件是直接继承了普通类View的类，而ViewGroup也继承了View，也就是说View是所有控件的父类，当然View类本身也实现了很多接口，具体继承关系如图所示

。

一个ViewGroup类型的控件里面可以包含有多个View或ViewGroup或View和ViewGroup，但一个View类型的控件里面不能有ViewGroup，只能有一个或多个View。接下来我们看一下在实际应用中的包含关系举例，图3.20是一个布局页面里有四个控件，分别为ConstraintLayout布局控件、Button具体控件、TextView具体控件和ImageView具体控件，从图左下角的控件结构栏里也可以看出。 

图中ConstraintLayout控件的父类是ViewGroup，TextView控件的父类是View，Button控件的父类是TextView，也就是View，ImageView控件的父类是View，它们的包含关系或上下级关系或继承关系抽离出来后，如图所示。 

图中ConstraintLayout是页面的布局控件，是ViewGroup类型，也是根布局，一个布局页面通常都要有一个根布局，ViewGroup相当于容器可以往它里面放入其它布局控件或具体控件，该例子中放入了Button、TextView和ImageView三个具体控件，就是ViewGroup里放入的3个View。Button控件继承了TextView控件，而TextView控件的父类是View，ImageView控件的父类也是View。 

 

3.3 样式设置   

App页面的视觉效果，比如颜色、位置、宽高、背景图片、形状等等，这些都可以称为样式，有2种方式可以实现，①是通过给布局文件里的控件添加相应属性来设置，②是在Java文件里通过控件的Java对象的相应方法来设置，本节介绍前一种方式，后一种方式在后面介绍。属性用于对控件进行设置，比如设置宽度、高度、颜色、功能等等，由属性名和属性值构成，如android:background="#AABBCC"，其中android:background是属性名，#AABBCC为属性值，其他为固定格式。有6个常用样式属性需要在入门阶段掌握，分别是背景、宽高、文字相关的属性。

3.3.1 背景样式属性

控件背景属性，用于给控件添加背景颜色和背景图片，具体如下：

其中，添加背景颜色推荐用android:background="RGB颜色值"表示，RGB颜色值为#开头的十六进制，有几千万种颜色值，可上网搜索“RGB”关键字，如#c2c2c2。添加背景图片用android:background="@mipmap/图片名前缀"，图片的命名规范应遵循小写字母命名，不能有中文、大写字母、空格命名、纯数字、特殊符号（下划线除外）命名，不能数字开头。图片大小最好不要超过1M，尺寸最好不要超过1000×1000，因为手机或移动设备内存运力有限，不然容易卡顿或闪退，还有些Android Studio版本mipmap目录下不能用后缀为非png格式的图片，如android:background="@mipmap/timg"。

例如，图3.22是给整个页面设置背景颜色为红色，给整个页面或布局设置背景颜色或图片时，不要单独添加一个控件来设置，直接用根布局控件即可，不然在设计时会带来很多麻烦，这里的根布局是ConstraintLayout，添加属性 android:background="#ff0000"即可，具体如图所示

是给具体控件Button设置背景颜色为红色，同样添加属性android:background="#ff0000"即可，具体如图所示。

 

接下来我们给整个页面设置背景图片，例如有一张图片ch.png，

 

把该图片复制粘贴到项目的res目录下的mipmap目录下，具体步骤如图

 

 

在手机里显示的图片选择mipmap-hdpi目录，这时可以看到mipmap目录下多了一个图片文件，

 

打开布局文件activity_main.xml，在布局控件ConstraintLayout 里添加android:background="@mipmap/ch"属性，整个页面都会铺满图片，

 

是给具体控件TextView设置背景图片ch.png，同样添加属性android:background="@mipmap/ch"到控件里即可，具体如图所示

 

不过需要注意的是，在高版的Android Studio工具里直接用android:background属性对Button控件进行背景设置是无效的，需要修改风格或自定义样式，本节不做介绍。

3.3.2 宽高样式属性

控件的宽度和高度属性，用于设置控件的宽度和高度，具体如下：

其中，属性值有2种，一种固定值，另一种弹性值。固定值格式为：数值dp，设置后控件的宽度或高度就被固定成该大小，如20dp。弹性值有2个：wrap_content和match_parent。wrap_content表示宽度或高度值跟随该控件里的内容或下级控件宽度大小，如果该控件里有一张背景图片，那么值就是图片的宽度或高度；如果该控件里有文字，那么值就是图片的宽度或高度；如果控件里同时有图片、文字、控件等，值就是几个中最大的那个。match_parent表示该控件的宽度或高度值跟随上级控件或父控件的值。

例如，图是设置Button控件的宽度和高度值，宽度设置为200dp，高度设置为100dp，采用的是固定值方式，具体如图所示。

 固定值设置Button宽高

接下来我们用弹性值方式设置Button控件的宽度和高度，宽度值用match_parent，高度值用wrap_content，具体效果如图所示。

 图中Button控件的宽度值是match_parent，呈现出的效果和整个页面一样宽，为什么？因为Button的上级控件ConstraintLayout的宽度值也为match_parent，再追到底，上级的上级的上级。。。。。。最终的值就是屏幕的宽度。而Button控件的高度值是wrap_content，按理说呈现的高度效果应该和文字一样高，但实际上有一点点边距，这是由于内置的默认样式保留了一点内边距。接下来我们把Button控件的宽度和高度都设置成wrap_content，就可以看到Button控件的宽度高度和控件里的文字差不多大小，如图

 

3.3.3 文字样式属性

控件文字属性常用的有3个属性，用于给控件添加文本内容，设置文字大小和文字颜色，具体如下：

例如，我们给Button控件添加文字“中国”，设置文字大小为40sp，文字颜色为#fff000(黄色)，如图所示。

 

可以看到，设置样式前和设置样式后效果明显不一样。TextView也和这一样，ImageView控件不能添加文字，所以不能设置文字样式。

本章就讲到这里，下一章等有空了再写。