实验一 基本 UI 界面设计

安卓实验报告

【实验目的】

1. 熟悉 Android Studio 开发工具操作
2. 熟悉 Android 基本 UI 开发,并进行 UI 基本设计

【实验内容】

1. 实现如图 Android应用,实现如下显示效果(暂不要求控件点击事件效果)

   界面分析：
   整体界面布局为LinearLayout

       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                     android:orientation="vertical"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent">
       </LinearLayout>

   界面最顶部是一个TextView

   <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Welcome To First Android Class!"
           android:layout_gravity="center"
           android:textColor="#00ff00"
           android:textSize="24sp"/>

   下面是一张图片，由ImagView实现

   <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/crab"
           android:layout_gravity="center"/>

   用户名、密码部分可以用TableView来完成，密码输入框设置android:inputType="textPassword"，

   <TableLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_margin="5dp">
           <TableRow>
               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="User:"/>
               <EditText
                   android:layout_width="0dp"
                   android:layout_height="wrap_content"
                   android:layout_weight="1"
                   android:hint="Input your user account here"/>
           </TableRow>
           <TableRow>
               <TextView
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:text="Password:"/>
               <EditText
                   android:layout_width="0dp"
                   android:layout_height="wrap_content"
                   android:layout_weight="1"
                   android:inputType="textPassword"/>
           </TableRow>
   </TableLayout>

   为了下面两个按钮居中，用LinearLayout进行包裹，嵌套在根布局中

   <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center">
           <Button
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="Login"/>
           <Button
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="Register"/>
   </LinearLayout>

   最下方的进度条由ProcessBar实现，注意设置style

   <ProgressBar
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:max="100"
           style="?android:attr/progressBarStyle"
           android:layout_gravity="center"/>

2. 扩展部分

   界面分析：
   整体还是采用LinearLayout

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:orientation="vertical"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent">
   </LinearLayout>              

   顶部的文字和按钮用RelativeLayout来布局，设置背景颜色android:background="#fc01fb"，按钮设置布局android:layout_alignParentRight="true"

   <RelativeLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="#fc01fb">
           <TextView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="个人信息"
               android:layout_alignParentLeft="true"/>
           <Button
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="提交"
               android:layout_alignParentRight="true"
               android:layout_margin="3dp"
               android:id="@+id/submit_button"/>
   </RelativeLayout>

   图片和右侧表格、单选按钮使用LinearLayout嵌套TableLayout实现，单选按钮组件为RadioButton

   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">
       <ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/avatar"/>
       <TableLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:orientation="vertical">
           <TableRow>
               <EditText
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:hint="学号"/>
           </TableRow>
           <TableRow>
               <EditText
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:hint="名字"/>
           </TableRow>
           <TableRow>
               <RadioGroup
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:orientation="horizontal">
                   <RadioButton
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:text="男"/>
                   <RadioButton
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:text="女"/>
               </RadioGroup>
           </TableRow>
       </TableLayout>
   </LinearLayout>

   列表选项为Spinner，数据项在arrays.xml文件中定义

   <Spinner
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:entries="@array/info"/>

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <string-array name="info">
           <item>移动</item>
           <item>软院</item>
           <item>管理</item>
           <item>政务</item>
           <item>环境</item>
       </string-array>
   </resources>

   日期选取由DatePicker实现、

   <DatePicker
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       style="@android:style/Widget.DatePicker">
   </DatePicker>

【实验结果】

单击扩展按钮可跳转到扩展界面，在扩展界面单击提交可返回原界面

【实验参考】

《第一行代码：Android》第三章 郭霖