Android入门——基本UI设计

实验一:基本UI设计

实验平台

• 软件环境：Android-studio2.0
• 运行平台：android4.2（API：17）

实验要求

实现一个Android 应用，界面呈现如下效果：

• 该界面为应用启动后看到的第一个界面
• 各控件的要求
  
  • 标题字体大小20sp，与顶部距离20dp，居中；
  • 图片与上下控件的间距均为20dp，居中；
  • 输入框整体距左右屏幕各间距20dp，上下两栏间距10dp，内容（包括提示内容）如图所示内容字体大小18sp；
  • 四个单选按钮整体居中，字体大小18sp，间距10dp，默认选中的按钮为第一个；
  • 两个按钮整体居中，与上方控件间距20dp，按钮间的间距5dp，文字大小18sp。
  • 按钮背景框左右边框与文字间距10dp，上下边框与文字间距5dp，圆角半径10dp，背景色为#3F51B5
• 使用的组件：TextView、EditText、LinearLayout、TableLayout、Button、ImageView、
  RadioGroup、RadioButton

实验基础知识梳理

安卓应用开发中，首先要掌握一些基本概念，从实验出发，首先介绍两个组件概念:
布局：让控件在界面中按照设计的方式排列，本身不会包含内容，只是对控件位置的控制。
控件：显示内容的组件，比如按钮的文字，或者图片等等，它包含了具体的内容并可以显示出来。
常用布局控件：LinearLayout、RelativeLayout、TableLayout、FrameLayout。
常用的控件：TextView、ImageView、EditText、Button、RadioButton。

实验代码

• 设置orientation为vertical，使所有组件都为纵向排列，并且界面为适配屏幕；
  
• 设置文本横向占满整个屏幕，纵向的大小和文字大小一致，为20sp,这样就可以使得文本内容 完全显示，且不会占用过多的屏幕；设置文本显示方式为居中，并且字体颜色为黑色，这里 使用了color资源，在最后会介绍它的代码实现。
  
• 使用组件ImageView显示图片，该图片为居中样式，丏大小为适应屏幕；在使用src时，首 先需要把图片放在mipmap目录下，这样才能正确显示。当然，图片也可以放在drawable 下；
  
• 这部分用于显示密码输入的文本框，用到了EditText组件，在标注的地方，我们设置了字体 颜色为黑色；为了使用户输入的密码丌可见，将inputType设置为“textPassword”,这样当 用户输入密码后，密码以小黑点的形式展现；这里使用了style和string资源，也在最后介绍 其实现；
  
• 该部分用于显示四个选项，都是居中的形式，这里设置了排列方式为横向，这里需要给每个 Button设置一个id。
  
  
• 在设置“登录”和“注册”按钮时，需要先自定义背景边框，这部分在实验文档有详细说明， 在此就直接贴出代码。这里使用了dimen资源；
  
• 这部分为引入布局文件和注册，实验文档也有详细说明，在此直接给出代码；
  
• style资源的实现，在values的文件夹下打开styles.xml,加入以下设置字体大小的代码；在 main_layout使用方式为@style/textStyle.
  
• dimen资源的实现，在values的文件夹下打开dimens.xml,加入以下代码修改按钮大 小，引用方式为@dimen/button_width.
  
• color资源的实现，在colors.xml里加入以下代码，用于设置字体颜色，000000为黑色， FFFFFF为白色。
  
• string资源的实现，在strings.xml中加入以下代码，就可以在 main_layout中使用@string/ 用户名。
  

实验总结

此次实验重点在于对布局的理解和对一部分控件的使用，这些控件只是Android 开发的基本，后面会发其他控件的使用，并运用到具体的开发中。

工程完整代码请戳：Lab1