手机平台应用开发实验报告1

实验报告

（2018年秋季学期）

课程名称	手机平台应用开发	任课老师	郑贵锋
年级	2016	专业（方向）	软件工程
开始日期	2018.9.26	完成日期	2018.10.10

---

---

一、实验题目

• 基本的UI界面设计
• 基础的事件处理

---

二、实现内容

第四周

实现一个Android应用，界面呈现如图中的效果。

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

第五周

要求

1. 点击搜索按钮：
   • 如果搜索内容为空，弹出Toast信息“搜索内容不能为空”。
   • 如果搜索内容为“Health”，根据选中的RadioButton项弹出如下对话框。
     
     点击“确定”，弹出Toast信息——对话框“确定”按钮被点击。
     点击“取消”，弹出Toast 信息——对话框“取消”按钮被点击。
     否则弹出如下对话框，对话框点击效果同上。
     
2. RadioButton选择项切换：选择项切换之后，弹出Toast信息“XX被选中”，例如从图片切换到视频，弹出Toast信息“视频被选中”

---

三、实验结果

(1)实验截图

1. 应用启动后看到的第一个界面

2. 布局

3. 切换单选项

4. 搜索空内容Toast消息

5. 搜索"Health"以外内容的弹出对话框，点击“取消”

6. 搜索"Health"以及选中视频时的弹出对话框，点击“确定”

(2)实验步骤以及关键代码

1. 标题格式以及位置设定代码，以容器作为参照

        android:layout_margin="20dp"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

2. 图片水平居中方法与标题类似，控制与上下控件间距时将参照物设为上下控件

        android:src="@mipmap/sysu"
        android:layout_margin="20dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/topic"

3. 输入框，通过把宽度设为0来使得它自动适应

        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:inputType="textPersonName"
        android:textAlignment="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button"
        app:layout_constraintTop_toBottomOf="@+id/image"

4. 按钮在布局方面与输入框类似，圆角的格式通过shape.xml实现

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#3F51B5" />

    <corners android:radius="180dp" />

    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />

</shape>

        android:background="@drawable/shape"

5. 四个单选按钮的格式和布局的实现可以通过使用style.xml简化代码

    <style name="MyRadioButton" >
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/black</item>
        <item name="android:textSize">18sp</item>
        <item name="android:layout_margin">5dp</item>
    </style>

6. 搜索

        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                if(TextUtils.isEmpty(searchContent.getText().toString())) {
                    Toast.makeText(MainActivity.this, "搜索内容不能为空", Toast.LENGTH_SHORT).show();
                }
                else if(searchContent.getText().toString().equals("Health")){
                    // 获取选中的radioButton
                    RadioButton temp = findViewById(radioGroup.getCheckedRadioButtonId());
                    // 创建对话框
                    AlertDialog.Builder tip = new AlertDialog.Builder(MainActivity.this);
                    tip.setTitle("提示");
                    tip.setMessage(temp.getText().toString()+"搜索成功");
                    tip.setPositiveButton("确定", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialogInterface, int i) {
                            Toast.makeText(MainActivity.this, "对话框“确定”按钮被点击",Toast.LENGTH_SHORT).show();
                        }
                    });
                    tip.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialogInterface, int i) {
                            Toast.makeText(MainActivity.this, "对话框“取消”按钮被点击",Toast.LENGTH_SHORT).show();
                        }
                    });
                    tip.show();
                }
                else {
                        // 弹出框代码与搜索"Health"类似，setMessage改为搜索失败
                    });
                    tip.show();

                }
            }
        });

7. 切换选中项的Toast消息

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener(){
            public void onCheckedChanged(RadioGroup group, int checkedID){
                String res = "";
                RadioButton rb1 = findViewById(R.id.rb1);
                RadioButton rb2 = findViewById(R.id.rb2);
                RadioButton rb3 = findViewById(R.id.rb3);
                RadioButton rb4 = findViewById(R.id.rb4);
                if(rb1.getId() == checkedID){
                    res = rb1.getText().toString();
                }
                else if(rb2.getId() == checkedID){
                    res = rb2.getText().toString();
                }
                else if(rb3.getId() == checkedID){
                    res = rb3.getText().toString();
                }
                else if(rb4.getId() == checkedID){
                    res = rb4.getText().toString();
                }
                Toast.makeText(MainActivity.this, res + "被选中",Toast.LENGTH_SHORT).show();
            }
        });

(3)实验遇到的困难以及解决思路

第四周

1. 虚拟机没办法运行程序，重启后仍然报错，按照提示删除文件也没有用，根据网上的建议在重装后恢复正常。
   

2. 比较复杂的可能是圆角按钮的设置？但是很容易就找到教程。

第五周

1. 课程说明文件讲的挺详细的，主要是理解setOnClickListener和setOnCheckedChangeListener两个监听器的使用方法，创建对话框以及获取被选中radiobutton的方法。

---

四、实验思考及感想

对markdown在git上的使用有些不是很熟练，需要多些适应。

第四周的作业本身难度很低，因为和UWP挺像的，所以UI和布局这方面只需要理解里面标签的含义和控件用法就好。

第五周作业稍微难一些，但是内容都是基础，而且文档里面都有介绍。

Android Studio也很方便，就是虚拟机比较麻烦，容易崩。