Android UI : 手机信息页面布局

1、运行效果

Android UI : 手机信息页面布局_第1张图片

2、分析

(1)、布局的建立:要想实现手机信息页面图标的均匀分布,最外围创建一个线性布局,垂直对齐。内层建立四个相对布局,每个相对布局包含两个 TextView控件。
(2)、将准备好的应用图标复制到 res/drawable文件下。
(3)、在编写布局文件时,相同控件之间的宽高以及外边距都是相同的,如果每个控件都单独定义的话,会导致代码的大量重复。所以,为了代码的整洁和重复使用,可以将相同的代码抽取出来,单独放在 styles.xml文件中。
(4)、创建 values-zh-rCN、values-en-rUS文件夹,并在文件夹中创建 strings.xml文件。

3、案例实现

(1)、新建一个应用程序,用来展示手机信息界面,并将准备好的应用图标复制到 res/drawable文件下。
Android UI : 手机信息页面布局_第2张图片

(2)、程序界面对应布局文件 activity_mian.xml如下所示:
Android UI : 手机信息页面布局_第3张图片

Android UI : 手机信息页面布局_第4张图片

(3)、此时因为还没有为布局文件抽取样式, android:text会报错,当抽取完样式后,错误会自动消失。下面,将 values文件下的 styles.xml文件中的代码修改为下图所示:
Android UI : 手机信息页面布局_第5张图片

(3)、在res目录下新建values-zh-rCNvalues-en-rUS文件夹,并在这两个文件夹下创建相应的strings.xml文件。右击res目录-->New-->Directory,输入文件夹名values-zh-rCN,点击OK,接着在这个文件夹下再新建一个strings.xml菜单文件,右击values-zh-rCN文件夹-->New-->Values rescource file

      同理,以相同的方式建立 values-en-rUS文件夹, values-zh-rCN文件夹下的 strings.xml文件如下所示:

Android UI : 手机信息页面布局_第6张图片

values-en-rUS文件夹下的 strings.xml文件如下所示:
Android UI : 手机信息页面布局_第7张图片

(4)、编写与界面交互的代码
MainActivity中编写与用户交互的逻辑代码,MainActivity对应的代码如下所示:
Android UI : 手机信息页面布局_第8张图片

注意:
当将 MainActivity修改为继承 Activity类时,程序会报错并提示未加载相应的类,这时只需按 Ctrl+Enter,程序会显示需要添加的类,点击后系统就会为我们自动添加了。

4、运行效果

Android UI : 手机信息页面布局_第9张图片


你可能感兴趣的:(Android)