图片浏览器技术点分析以及实践指导书

1. 综合案例-图片浏览器

1.1 本章简介

本章主要通过开发一个”图片浏览器”的应用程序，主要是方便用户使用安卓手机的时候可以快速的浏览图片，并且对图片进行多点触控的缩小和放大、拖拽；本案例主要涉及到的知识点包括基本控件的使用，如TextView，Butoon、ImageView等；高级控件的使用，如 GridView、Gallery等；Activity之间的跳转以及数据的传递；事件的处理如GridView的点击事件，Gallery的滑动事件等；Adapter事件的处理等；图片事件的多点触控，图片的缩放，图片的拖拽；

1.1.1 安卓市场分析

通过对豌豆荚市场的搜索，可以看到目前安卓市场上关于图片浏览的开发应用非常多，下面就以目前下载量最大的一款软件“图乐相册”为例子来分析一下图片浏览器的功能和应用情况；图乐软件的功能流程以及显示效果如下图所示。

1读出所有图片资源

2单个文件夹图片

3对图片进行统一处理

4拼图

5滑动切换 6直接缩放

图 1-1 图乐软件的功能流程以及显示效果如下图

1.1.2 图片浏览器的示例图

Android系统自带一个GridView和Gallery两个控件，GridView网格显示，Gallery单个浏览，两者结合起来可以真正实现Gallery浏览图片效果。

本示例通过GridView和Gallery两个控件，模仿实现一个完整的仿Gallery图像集的图片浏览效果。本章的图片浏览器效果图如下：

1图片的整体显示

2图片的gallery滑动

3 图片的缩放

4图片的拖拽

图 1-2图片浏览器效果图

1.2 总体设计 1.2.1 需求分析

需求分析的功能列举如下：

1 从资源文件中读取图片并以缩略图的方式显示多个图片

2 点击缩略图片可以显示图片的大图，大图之间可以通过滑动的方式进行切换，左滑代表上一张图片，右滑代表下一张图片；

3 点击大图，可以对图片进行多点触控，可以对图片进行拖拽；

1.2.2 概要设计

图片浏览器是一款简易的对图片进行预览和显示的软件，本软件的功能设计如下： 1 从资源文件中读取图片并以缩略图的方式显示多个图片

2 点击缩略图片可以显示图片的大图，大图之间可以通过滑动的方式进行切换，左滑代表上一张图片，右滑代表下一张图片；

3 点击大图，可以对图片进行多点触控，可以对图片进行拖拽；

1.2.3 设计原理

本例子的文档结构如下图所示。

图 1-3 图片浏览器的结构设计图

1.3 图片浏览器的功能模块介绍 1.3.1 图片浏览器应用程序结构

图片浏览器应用程序涉及的功能和界面比较多，为了方便对代码的管理，对功能进行了模块的划分，将相关功能的Activity放在同一个包下，图片浏览器的应用程序功能如下表所示。

图片浏览器的应用程序结构如下图所示。(需要说明)

图 1-4图片浏览器的应用程序结构图

1.3.2 程序的布局文件

根据上面所描述的图片浏览器的应用程序结构图可以看出，程序的布局主要主要由main.xml(主页面)、gallery.xml(图片画廊页面)、imageinfo.xml(图片多点触控以及拖拽)三个布局文件组成；

main.xml(主页面)的布局关键代码如下图(图片需要注释)；程序清单: GridViewActivity\res\values\main.xml;

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="http://www.77cn.com.cn/apk/res/android"

android:id="@+id/myGrid" ->总体是Gridview布局 android:layout_width="fill_parent" android:layout_height="fill_parent"

android:gravity="fill_vertical|fill_horizontal"

android:numColumns="3" ->定义Gridview的列数 android:paddingTop="5dp"

android:stretchMode="columnWidth" android:verticalSpacing="6dp" />

图 1-5 main.xml(主页面)的布局图

gallery.xml(图片画廊页面)的布局关键代码如下图(图片需要注释)；程序清单: GridViewActivity\res\values\ gallery.xml;

<?xml version="1.0" encoding="utf-8"?> ->总体是线性布局 <LinearLayout xmlns:android="http://www.77cn.com.cn/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"

android:orientation="horizontal" android:padding="10dip" >

<RelativeLayout ->gallery是相对布局 android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#000000" android:padding="2dip" >

<com.homer.gridgallery.myGallery ->gallery进行了扩充 android:id="@+id/mygallery"

android:layout_width="fill_parent" android:layout_height="fill_parent" android:spacing="16dp" /> </RelativeLayout> </LinearLayout>

图 1-6 gallery.xml(图片画廊页面)的布局图

imageinfo.xml(图片多点触控以及拖拽)的布局关键代码如下图(图片需要注释)；程序清单: GridViewActivity\res\values\ imageinfo.xml;

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://www.77cn.com.cn/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView

android:id="@+id/imageView_showImg" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:layout_weight="0.85" android:background="#ffffff" android:scaleType="fitCenter" /> <TextView

android:id="@+id/foodinfotextView1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.05" android:text="TextView" /> </LinearLayout>

图 1-7 imageinfo.xml(图片多点触控以及拖拽)的布局图

1.3.3 图片的资源文件功能

本例中的图片资源从外面可以直接拷贝到GridViewActivity\res\drawable文件夹中，拷贝完成后在程序中定义图片资源数组；如 …… 此处隐藏：11015字，全部文档内容请下载后查看。喜欢就下载吧 ……