
3.2 编辑Splash布局

10 编辑Splash布局
向布局增加GUI组件有两种方法,一种是直接在布局文件中增加,另一种是使用设计编辑器增加。下面通过设计编辑器增加一个文本视图。
在设计编辑器左边有一个组件面板,其中有很多GUI组件,可以将其直接拖到设计编辑器中。如果查看组件面板中的Text栏,可以看到其中有一个TextView组件,单击这个组件,把它拖到设计编辑器中,如图3-5所示。
设计编辑器中的修改会反映到XML文件中,像这样把GUI组件拖到设计编辑器中可以很方便地更新布局。如果切换到代码编辑器,可以看到,通过设计编辑器增加文本视图组件,也会相应在文件中增加几行代码。



图3-5 在设计编辑器添加GUI组件
一个GUI组件有多个属性,一些属性是共有的。例如以下几个。
android:id,这个属性为组件指定一个标识名。利用id属性,可以通过代码来控制组件完成工作,另外还可以控制组件在布局中的位置。

android:text,告诉Android组件应当显示什么文本。

android:layout_width,android:layout_height,这两个属性指定了组件的基本宽度和高度(是不能缺少的)。参数wrap_content表示它要足够大,刚好能放下文本的全部内容。

要在启动界面中增加两个文本视图,一个是“欢迎使用智慧工厂应用”,另一个是“版本1.0”,两个文本居中显示在屏幕中间,上下排列。下面仔细分析一下布局代码,以便了解其究竟在做什么(如果你的代码看上去有些不同也没有关系,请跟着一步一步往下走即可)。进入app/src/main/res/layout文件夹并双击打开activity_splash.xml文件。

布局代码中的第一个元素是<RelativeLayout>。<RelativeLayout>元素告诉Android布局中的各个GUI组件要在相对位置上显示,这种布局方式称为相对布局,它是Android的一种重要的布局方式。相对布局,意思是指该布局中的所有GUI组件之间的位置关系是相对放置的。例如,可以用这个元素指出你希望某一个组件出现在另一个组件的右边,或者希望这些组件以某种方式对齐或排列。
第7~13行是第一个TextView文本视图组件,14~20行是第二个文本视图组件。
第8行定义了第一个文本视图的id为“welcome_tv”。
第9、10行指定了宽度和高度。
第11行指定了将文本在父布局中垂直和水平居中。
第12行通过引用字符串资源文件strings.xml中名为welcome_tv的文本值,指定文本显示的内容。这里需要先在string.xml文件中增加一个字符串资源。

第13行指定了文本显示大小,以sp为单位。sp是缩放无关的抽象像素(scale-independent pixel,sp),其作为字体大小单位会随着系统的字体大小改变,建议在设置字体大小时使用sp作为单位。
第14~20行定义了第二个文本视图。
第15、16行指定了宽度和高度。
第17行指定了将文本在父布局中垂直和水平居中。
第18行指定了将该文本视图放置在welcome_tv文本视图下面。
第19行通过引用字符串资源文件strings.xml中名为version的文本值,指定文本显示的内容。这里需要先在string.xml文件中增加一个字符串资源。

在设计编辑器中可以看到预览界面,如图3-6所示。

图3-6 在设计编辑器中预览