![物联网移动应用开发](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=1739324052-FLXZPolbHC63DrH3o4LLovzckuikx0X3-0-5ef8a5d82cc0477b30db83dad100ed91)
10 编辑Splash布局
向布局增加GUI组件有两种方法,一种是直接在布局文件中增加,另一种是使用设计编辑器增加。下面通过设计编辑器增加一个文本视图。
在设计编辑器左边有一个组件面板,其中有很多GUI组件,可以将其直接拖到设计编辑器中。如果查看组件面板中的Text栏,可以看到其中有一个TextView组件,单击这个组件,把它拖到设计编辑器中,如图3-5所示。
设计编辑器中的修改会反映到XML文件中,像这样把GUI组件拖到设计编辑器中可以很方便地更新布局。如果切换到代码编辑器,可以看到,通过设计编辑器增加文本视图组件,也会相应在文件中增加几行代码。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/44_04.jpg?sign=1739324052-wXBdMS4kR86hGQSceYSFrplv9bhDBjpd-0-9f9f36edd40a86dbac4c1ee3aafad056)
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_01.jpg?sign=1739324052-apXXO7fwBiRhe7jhcHIP2kiSrP8HhDsk-0-e00bc9b10ae176103dda08955cffd1bf)
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_02.jpg?sign=1739324052-F9L2WBIDPrTo3is0nejNlY2CfWE7GFpN-0-7f35f4d85ed6c1b0d0b137d03d9984ce)
图3-5 在设计编辑器添加GUI组件
一个GUI组件有多个属性,一些属性是共有的。例如以下几个。
android:id,这个属性为组件指定一个标识名。利用id属性,可以通过代码来控制组件完成工作,另外还可以控制组件在布局中的位置。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_03.jpg?sign=1739324052-L4WIA1WPWFM1IUmOUqA14Ewn6deooeNA-0-9d3d0a9a6354c5b96ae30a6f4f9b42f0)
android:text,告诉Android组件应当显示什么文本。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_04.jpg?sign=1739324052-jgiF0d5tX6Eau1NFmfRxA8YrCsOD9GtQ-0-c715c967b195adf3d603e570c6a5ea25)
android:layout_width,android:layout_height,这两个属性指定了组件的基本宽度和高度(是不能缺少的)。参数wrap_content表示它要足够大,刚好能放下文本的全部内容。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/45_05.jpg?sign=1739324052-zqsvvPdqL8uCW00YN4KGHqHs3XqVCq6w-0-5d227a027ead4bb9cbf055be8c098482)
要在启动界面中增加两个文本视图,一个是“欢迎使用智慧工厂应用”,另一个是“版本1.0”,两个文本居中显示在屏幕中间,上下排列。下面仔细分析一下布局代码,以便了解其究竟在做什么(如果你的代码看上去有些不同也没有关系,请跟着一步一步往下走即可)。进入app/src/main/res/layout文件夹并双击打开activity_splash.xml文件。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/46_01.jpg?sign=1739324052-D3TbZUghNtFTSnyiVEx5hKm1TjsrII7j-0-3d7fc3e08b918e7e2b482d6cc05ea7d4)
布局代码中的第一个元素是<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=1739324052-ZL5qOkItTxptTlQlBsyS4aiBclGwTVuD-0-46e7008a9cd9c4a004092ece3b271c71)
第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=1739324052-ymNMnppwng2PGvKyri7QCpmzxCdC7sGB-0-a229865bb2d2db53f9edb8e9d3b5bdd6)
在设计编辑器中可以看到预览界面,如图3-6所示。
![](https://epubservercos.yuewen.com/7AE700/19549638101507906/epubprivate/OEBPS/Images/47_02.jpg?sign=1739324052-rPxzF22yawSdgDrQp4PiqpH1EQNoXTrf-0-35252ed99acea2149516e6e1f70eed9c)
图3-6 在设计编辑器中预览