Android物联网应用程序开发-项目二 智慧城市界面的实现-任务4：摄像头监控界面开发

Android物联网应用程序开发资源转化系统教材辽宁轻工职业学院辽宁轻工职业学院任务实现知识准备任务目标目录

辽宁轻工职业学院任务4摄像头监控界面开发项目2智慧城市界面的实现辽宁轻工职业学院使用LinearLayout布局管理器和WebView控件实现摄像头监控界面开发。在该界面中，可以通过上、下、左、右按钮调整摄像头的方向，Button按钮用于选择是否进行拍照。辽宁轻工职业学院【任务目标】1.掌握LinearLayout布局管理器的使用方法2.掌握WebView控件的使用方法1.LinearLayout布局的使用辽宁轻工职业学院【知识准备】LinearLayout布局(线性布局)在布局管理器中最常用的一种布局方式。对于放入其中的组件可按照垂直(vertical)或水平(horizontal)方向来布局,即控件的横向和纵向排列。但Android的线性布局不会换行，当组件排列到窗体边缘后，后面的组件将不会被显示出来。线性布局的基本语法格式如下。<LinearLayoutxmlns:android="/apk/res/android"

属性列表>

组件列表</LinearLayout>1.LinearLayout布局的使用辽宁轻工职业学院【知识准备】LinearLayout常见的XML属性列表XML属性说明android:orientation设置布局管理器内组件的排列方式，其可选值为horizontal(水平排列)和vertical(垂直排列)，默认值为vertical。android:gravity设置布局管理器内组件的对齐方式。其值包括top、bottom等，这些属性值也可同时指定。android:scaleType用于设置所显示的图片填充方式。Android提供了包括矩阵、拉伸等7种填充方式android:layout_width设置组件的基本宽度，其可选值包括fill_parent、match_parent和wrap_contentandroid:layout_height设置组件的基本高度，其可选值包括fill_parent、match_parent和wrap_contentandroid:background设置组件的背景，可以是背景图片，也可以是背景颜色

2.WebView控件的使用辽宁轻工职业学院【知识准备】WebView(网络视图)控件能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页。通过它可以轻松实现显示网页功能。WebView控件是专门用来浏览网页的，它的使用方式与其他控件一样，我们可以通过在XML布局文件中添加<WebView>标记来完成。其WebView控件的基本语法格式如下。<WebViewandroid:id="@+id/webView1"android:layout_width="match_parent"android:layout_height="match_parent"/>2.WebView控件的使用辽宁轻工职业学院【知识准备】WebView提供的常用方法XML属性说明loadUrl(Stringurl)加载URL信息，Url可以是网络地址，也可以是本地网络文件。goBack()向后浏览历史页面goForward()向前浏览历史页面loadData(Stringdata,StringmimeType,Stringencoding)用于将指定的字符串数据加载到浏览器中loadDataWithBaseURL(StringbaseUrl,Stringdata,StringmimeType,Stringencoding,StringhistoryUrl)用于基于URL加载指定的数据stopLoading()用于停止加载当前页面reload()用于刷新当前页面辽宁轻工职业学院【任务实现】在Eclipse下创建一个Android项目，命名为AndroidDemo2.4，实现摄像头监控界面开发。1.修改res/layout目录下的布局文件，首先添加一个相对布局管理器，在该布局管理器中添加ImageView控件和线性布局管理器，代码如下：<RelativeLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:background="@drawable/bg_environment"//设置背景图片

android:layout_height="fill_parent"><ImageView辽宁轻工职业学院【任务实现】android:id="@+id/imageView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:layout_marginLeft="20dp"android:layout_marginTop="30dp"android:src="@drawable/btn_monitoring_select"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/bg_frame_descend_setting"android:padding="30dip"android:layout_marginTop="20dp"android:layout_marginRight="20dp"android:layout_marginBottom="20dp"android:layout_toRightOf="@+id/imageView1"android:orientation="horizontal"></LinearLayout>辽宁轻工职业学院【任务实现】2.在内嵌的LinearLayout线性布局管理器中再添加两个线性布局管理器。<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/bg_frame_descend_setting"//设置背景图片

android:padding="30dip"//设置距边缘的距离为30dipandroid:layout_marginTop="20dp"android:layout_marginRight="20dp"android:layout_marginBottom="20dp"android:layout_toRightOf="@+id/imageView1"辽宁轻工职业学院【任务实现】android:orientation="horizontal">//设置线性布局管理器为水平的线性布局管理器

<LinearLayoutandroid:layout_width="0.0dp"android:layout_height="fill_parent"android:gravity="center"//设置该组件居中显示

android:layout_weight="2"//该组件的权重为2></LinearLayout>辽宁轻工职业学院【任务实现】3.在第一个线性布局管理器中添加一个<WebView>控件，其代码如下：

<LinearLayoutandroid:layout_width="0.0dp"android:layout_height="fill_parent"android:gravity="center"android:layout_weight="2">

<WebViewandroid:id="@+id/webView1"//设置WebView组件的IDandroid:layout_width="match_parent"//自动调整该组件的宽度android:layout_height="match_parent"/>//自动调整该组件的高度

</LinearLayout>辽宁轻工职业学院【任务实现】4.在第二个线性布局管理器中，添加一个相对布局管理器，同时在该相对布局管理器中添加四个ImageView控件，用来控制摄像头的方向(上、下、左、右)代码如下：<LinearLayoutandroid:layout_width="0.0dp"android:layout_height="fill_parent"android:gravity="center"android:layout_weight="1"android:orientation="vertical"><RelativeLayoutandroid:layout_width="150dp"android:layout_height="150dp"android:background="@drawable/btn_direction_bg">

//第一个ImageView组件显示向左旋转摄像头的图片<ImageView辽宁轻工职业学院【任务实现】android:id="@+id/imageView2"android:layout_width="32dp"android:layout_height="32dp"android:layout_alignParentLeft="true"android:layout_centerVertical="true"android:layout_marginLeft="10dp"android:src="@drawable/btn_left_press"/>//第二个ImageView组件显示向下旋转摄像头的图片<ImageViewandroid:id="@+id/imageView3"android:layout_width="32dp"android:layout_height="32dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="10dp"辽宁轻工职业学院【任务实现】android:src="@drawable/btn_down_press"/>//第三个ImageView组件显示向上旋转摄像头的图片<ImageViewandroid:id="@+id/imageView4"android:layout_width="32dp"android:layout_height="32dp"android:layout_alignParentTop="true"android:layout_centerHorizontal="true"android:layout_marginTop="10dp"android:src="@drawable/btn_up_press"/>//第四个ImageView组件显示向右旋转摄像头的图片<ImageViewandroid:id="@+id/imageView5"android:layout_width="32dp"android:layout_height="32dp"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:layout_marginRight="10dp"android:src="@drawable/btn_right_press"/></RelativeLayout>辽宁轻工职业学院