Android手把手编写儿童手机远程监控App之四大组件详解

概述

上节讲解java基础知识，文中涉及类的继承、多态、重载、接口等知识，这在Android开发中必须掌握的基础知识。 Android 的四大组件是构建一个应用的核心基础，每个组件负责不同的功能模块，更是整个应用架构的核心。四大组件包括：

• Activity：界面展示与用户交互
• Service：后台任务处理
• BroadcastReceiver：事件广播机制
• ContentProvider：跨应用数据共享 通俗的理解，Activity 前台接待（和用户打交道），Service 后台员工（干活但不露脸），BroadcastReceiver通知系统（接收各种消息），ContentProvider 数据库管理员（管理数据共享）

Activity

Activity 是 Android 四大组件中最核心、最常用的一个。是用户与界面交互的载体。你看到都是Activity。第四节讲解嘟宝工程详解项目只有一个HelloWorldActivity作为app启动页面。HelloWorldActivity类继承自AppCompatActivity，而AppCompatActivity又继承自Activity。AppCompatActivity类为解决andorid ui碎片而生，本质上是对 Activity 的增强兼容版本。

Activity常用控件

Activity常用控件有很多包括TextView文本控件、EditText输入框控件、Button按钮控件、ImageView控件、RecyclerView列表控件、LinearLayout线性布局控件，由于嘟宝是后台程序，对UI设计不多。我们来介绍常用控件的用法。 app启动自动打开HelloWorldActivity页面，其源码如下：

package com.zilong.dubao;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class HelloWorldActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hello_world);
    }
}

app运行图片：

图中，只有标题嘟宝,内容是hello world。HelloWorldActivity是根据在onCreate函数中调用setContentView来显示内容的，R.layout.activity_hello_world，该内容指向是一个文件，它的路径是：res>layout>activity_hello_world.xml 打开资源文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!!!" />
</LinearLayout>

LinearLayout 是线性布局空间、TextView是文本控件，内容是hello world。HelloWorldActivity显示内容是根据activity_hello_world.xml决定的。TextView有四个属性：

• android:id="@+id/textView"，id值，必须唯一，通过id代码中修改其属性
• android:layout_width指明它的宽度，宽度是根据内容决定
• android:layout_height="wrap_content"指明它的高度，有内容决定
• android:text="Hello World!!!" 控件显示的内容

TextView控件

修改activity_hello_world.xml。

• 将TextView颜色改成红色
• 再增加一个TextView，内容是你好嘟宝，字体颜色绿色，文字加粗、字号14，宽度整个屏幕，背景色为黑色。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#F44336"
        android:text="Hello World!!!" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:textColor="#4CAF50"
        android:textSize="36dp"
        android:textStyle="bold"
        android:text="你好嘟宝" />
</LinearLayout>

运行结果：

我们发现id为textView1、textView2是水平显示，可以通过LinearLayout 布局控件修改垂直显示。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#F44336"
        android:text="Hello World!!!" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:textColor="#4CAF50"
        android:textSize="36dp"
        android:textStyle="bold"
        android:text="你好嘟宝" />
</LinearLayout>

显示效果如下：

button控件

Button（按钮） 是 Android 中最基础、最常用的交互控件之一，主要用于响应用户点击操作。 HelloWorldActivity源码

package com.zilong.dubao;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class HelloWorldActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hello_world);
        Button btn = findViewById(R.id.btn_submit);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 点击事件
                v.setEnabled(false);
            }
        });

    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#F44336"
        android:text="Hello World!!!" />
    <Button
        android:id="@+id/btn_submit"
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="提交"/>

</LinearLayout>

运行效果： 当点击按钮提交时，它变成灰色。看下button属性配置

<Button
        android:id="@+id/btn_submit"
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="提交"/>

其中 android:layout_margin="5dp"，外边距是5dp。在onCreate函数中，添加按钮事件响应:

  Button btn = findViewById(R.id.btn_submit);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 点击事件
                v.setEnabled(false);
            }
        });

findViewById通过R.id.btn_submit(按钮的id值)查找到按钮，,onClick回调函数中，v代表按钮自己。

ImageView控件

ImageView 用来显示图片的控件，它可以展示本地资源（drawable）、网络图片、Bitmap 图像（比如摄像头帧） HelloWorldActivity源码

package com.zilong.dubao;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class HelloWorldActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hello_world);
        Button btn = findViewById(R.id.btn_submit);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 点击事件
                ImageView imageView =findViewById(R.id.img);
                imageView.setImageResource(R.drawable.dubao2);
            }
        });

    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:padding="10dp"
        android:scaleType="fitCenter"
        android:src="@drawable/dubao1"/>
    <Button
        android:id="@+id/btn_submit"
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="提交"/>

</LinearLayout>

运行效果如下图： 当我们点击提交按钮，ImageView 图片被改名。以下是ImageView 的属性设置：

<ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:padding="10dp"
        android:scaleType="fitCenter"
        android:src="@drawable/dubao1"/>

• android:padding="10dp"是内边距设置10dp
• android:scaleType="fitCenter"图片居中，由于图片尺寸不同，它会根据长宽居中显示
  • center 居中不缩放
  • centerCrop 裁剪填满（常用）
  • fitCenter 等比例缩放
  • fitXY 拉伸填满（可能变形）

Activity生命周期

新建页面MainActivity

• 创建页面MainActivity
• 在HelloWorldActivity通过按钮打开MainActivity
• 在MainActivity布局中创建按钮 创建页面路径右键com.zilong.dubao>New>Activity>Empty Activity 如下图： MainActivity代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btn = findViewById(R.id.btn_change);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 点击事件
                ImageView imageView =findViewById(R.id.img);
                imageView.setImageResource(R.drawable.dubao2);
            }
        });
    }
}

activity_main.xml内容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:padding="10dp"
        android:scaleType="fitCenter"
        android:src="@drawable/dubao1"/>
    <Button
        android:id="@+id/btn_change"
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="更换图片"/>

</LinearLayout>

HelloWorldActivity源码

public class HelloWorldActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hello_world);
        Button btn = findViewById(R.id.btn_submit);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 点击事件
                Intent intent =new Intent(HelloWorldActivity.this,MainActivity.class);
                startActivity(intent);

            }
        });

    }
}

运行效果如图： 点击按钮打开打开MainActivity,页面会弹出MainActivity页面。页面内容是一张图片，一个按钮，点击按钮更换图片。 打开MainActivity页面的代码如下：

  Intent intent =new Intent(HelloWorldActivity.this,MainActivity.class);
  startActivity(intent);

Intent构造函数，第一个参数指定的是HelloWorldActivity实例自身，第二个参数就是MainActivity class。

生命周期

Activity 生命周期是 Android 中最核心、最常考、最实用的知识点之一，本质是： 系统如何创建、显示、暂停、销毁一个界面。 记忆口诀： 创 → 显 → 交互 → 暂停 → 停止 → 销毁

• onCreate()创建 Activity
• onStart()界面可见，但不可交互，还没获得焦点
• onResume()进入前台，可交互，用户可以点击、输入
• onPause()可能被遮挡（弹窗、跳转）
• onStop()完全不可见，页面在后台
• onDestroy()页面销毁 如下场景应用
• 启动 Activity时，依次调用onCreate → onStart → onResume
• 按 Home 键，依次调用onPause → onStop
• 返回键退出，依次调用onPause → onStop → onDestroy
• 从后台返回，依次调用onRestart → onStart → onResume

MainActivity代码，

package com.zilong.dubao;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Log.d("MainActivity","onCreate被调用");

        Button btn = findViewById(R.id.btn_change);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 点击事件
                ImageView imageView =findViewById(R.id.img);
                imageView.setImageResource(R.drawable.dubao2);
            }
        });
    }

    @Override
    protected void onStart() {
        super.onStart();
        Log.d("MainActivity","onStart被调用");
    }

    @Override
    protected void onResume() {
        super.onResume();
        Log.d("MainActivity","onResume被调用");

    }

    @Override
    protected void onPause() {
        super.onPause();
        Log.d("MainActivity","onPause被调用");

    }

    @Override
    protected void onStop() {
        super.onStop();
        Log.d("MainActivity","onStop被调用");

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        Log.d("MainActivity","onDestroy被调用");

    }
}