![物联网移动应用开发](https://wfqqreader-1252317822.image.myqcloud.com/cover/36/36862036/b_36862036.jpg)
3.2 编辑Splash布局
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/44_03.jpg?sign=1739323184-CXcTxpaAtHo8nw7vOeE3LXgrYIBjOXyV-0-e548ecf32b552b39f77eb12326117f93)
10 编辑Splash布局
向布局增加GUI组件有两种方法,一种是直接在布局文件中增加,另一种是使用设计编辑器增加。下面通过设计编辑器增加一个文本视图。
在设计编辑器左边有一个组件面板,其中有很多GUI组件,可以将其直接拖到设计编辑器中。如果查看组件面板中的Text栏,可以看到其中有一个TextView组件,单击这个组件,把它拖到设计编辑器中,如图3-5所示。
设计编辑器中的修改会反映到XML文件中,像这样把GUI组件拖到设计编辑器中可以很方便地更新布局。如果切换到代码编辑器,可以看到,通过设计编辑器增加文本视图组件,也会相应在文件中增加几行代码。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/44_04.jpg?sign=1739323184-GpojwOuTKlzFPIXJYSDhxX4puZ5mUTZf-0-52531bc84d497484da3a74e447c460d1)
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_01.jpg?sign=1739323184-cTgLgdH78l11yShd3gWyYvcLiG5NZHc9-0-f3fb550f2aaf3ad209eb538cbce90fa2)
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_02.jpg?sign=1739323184-TpWW3nJUdg8vxObHsefzutNp8GrA36Sr-0-89b4d9f901947b05bbb7fd84e4ea7581)
图3-5 在设计编辑器添加GUI组件
一个GUI组件有多个属性,一些属性是共有的。例如以下几个。
android:id,这个属性为组件指定一个标识名。利用id属性,可以通过代码来控制组件完成工作,另外还可以控制组件在布局中的位置。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_03.jpg?sign=1739323184-j4HriDGz14wqNK9SRZsQU8Ry3ruEg72Z-0-071131351d9ea1e555b04374adc87a7b)
android:text,告诉Android组件应当显示什么文本。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_04.jpg?sign=1739323184-5EeMpJJoOvgNKCZKZICUamoIgWvzvlXu-0-6f2b62c756efb073f1c103f3da9dcffb)
android:layout_width,android:layout_height,这两个属性指定了组件的基本宽度和高度(是不能缺少的)。参数wrap_content表示它要足够大,刚好能放下文本的全部内容。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_05.jpg?sign=1739323184-IoiG3kDNNJ96DwdPMc7WgnXpVkwbecRq-0-7bd359e78c3e86ff27cebffd97412647)
要在启动界面中增加两个文本视图,一个是“欢迎使用智慧工厂应用”,另一个是“版本1.0”,两个文本居中显示在屏幕中间,上下排列。下面仔细分析一下布局代码,以便了解其究竟在做什么(如果你的代码看上去有些不同也没有关系,请跟着一步一步往下走即可)。进入app/src/main/res/layout文件夹并双击打开activity_splash.xml文件。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/46_01.jpg?sign=1739323184-H8Qcwh9WCG2tkU9u8xnjNpkb3vBcpuHy-0-4d945431f4c5284c86f0aaca1c3799f6)
布局代码中的第一个元素是<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文件中增加一个字符串资源。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/46_02.jpg?sign=1739323184-8QuXUzbIb0GpZsk0FQ5fa0tUZooWe1uf-0-f6e4b4e7bb24e1f221c08f2d87de4dce)
第13行指定了文本显示大小,以sp为单位。sp是缩放无关的抽象像素(scale-independent pixel,sp),其作为字体大小单位会随着系统的字体大小改变,建议在设置字体大小时使用sp作为单位。
第14~20行定义了第二个文本视图。
第15、16行指定了宽度和高度。
第17行指定了将文本在父布局中垂直和水平居中。
第18行指定了将该文本视图放置在welcome_tv文本视图下面。
第19行通过引用字符串资源文件strings.xml中名为version的文本值,指定文本显示的内容。这里需要先在string.xml文件中增加一个字符串资源。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/47_01.jpg?sign=1739323184-RTssAZkAQ8TDCVm7vkqrEGFnwwehvHdx-0-3dabc2f51ce05699adf4969082ca0c5b)
在设计编辑器中可以看到预览界面,如图3-6所示。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/47_02.jpg?sign=1739323184-MlnI7CGrGW0nd4p2enCa2etHfBeN0GbO-0-32e289a46b0109131583aad401884a3b)
图3-6 在设计编辑器中预览