Android开源代码解读の地图照片应用Panoramio的实现详解（六）

本文介绍文件ViewImage.java和ViewMap.java。前者实现单张图片信息的浏览，后者实现自定义的地图，用于显示图片拍摄地点和用户当前所在地点。ViewImage实现的Activity界面如左下图，点击手机的菜单键时，弹出菜单选项界面如右下图：





上面Activity用到的布局文件view_image.xml如下：

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">

<LinearLayout
android:id="@+id/content"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
>

<FrameLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:padding="10dip">

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
>

<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/picture_frame"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:maxHeight="320dip"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dip"
android:singleLine="true"
android:ellipsize="end"
android:textColor="?android:attr/textColorPrimary"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:layout_alignLeft="@id/image"
android:layout_alignRight="@id/image"
android:layout_below="@id/image"
/>

<TextView
android:id="@+id/owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dip"
android:singleLine="true"
android:ellipsize="end"
android:textColor="?android:attr/textColorPrimary"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:layout_alignLeft="@id/title"
android:layout_alignRight="@id/title"
android:layout_below="@id/title"
/>
</LinearLayout>

</FrameLayout>

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="13dip"
android:textColor="?android:attr/textColorSecondary"
android:text="@string/copyright"
android:gravity="center"
android:paddingLeft="10dip"
android:paddingRight="10dip"
/>

</LinearLayout>

</ScrollView>

ViewImage根据从ImageList传递过来的URL等信息，开启后台线程从服务器加载中等大小图片信息，用到的UI组件主要有菜单选项，提示对话框等。

菜单选项的实现需要重写Activity的两个函数：onCreateOptionsMenu和onOptionsItemSelected，程序框架如下：

import android.app.Activity;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// 在这个函数内创建菜单选项
return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// 定义菜单项被选中时的响应事件
return super.onOptionsItemSelected(item);
}

}

对话框的实现需要重写Activity的onCreateDialog函数，并在函数中创建对话框。然后在需要显示的地方调用Activity的showDialog函数，显示onCreateDialog中创建的对话框。ViewImage的实现代码如下：

package com.google.android.panoramio;

import com.google.android.maps.GeoPoint;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;

/**
* 显示单张图片的Activity
*/
public class ViewImage extends Activity {
private static final String TAG = "Panoramio";

private static final int MENU_RADAR = Menu.FIRST + 1;

private static final int MENU_MAP = Menu.FIRST + 2;

private static final int MENU_AUTHOR = Menu.FIRST + 3;

private static final int MENU_VIEW = Menu.FIRST + 4;

private static final int DIALOG_NO_RADAR = 1;

PanoramioItem mItem;

private Handler mHandler;

private ImageView mImage;

private TextView mTitle;

private TextView mOwner;

private View mContent;

private int mMapZoom;

private int mMapLatitudeE6;

private int mMapLongitudeE6;

@Override
protected void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
super.onCreate(savedInstanceState);
setContentView(R.layout.view_image);

// 从ImageList传递过来的搜索区域信息
Intent i = getIntent();
mItem = i.getParcelableExtra(ImageManager.PANORAMIO_ITEM_EXTRA);
mMapZoom = i.getIntExtra(ImageManager.ZOOM_EXTRA, Integer.MIN_VALUE);
mMapLatitudeE6 = i.getIntExtra(ImageManager.LATITUDE_E6_EXTRA, Integer.MIN_VALUE);
mMapLongitudeE6 = i.getIntExtra(ImageManager.LONGITUDE_E6_EXTRA, Integer.MIN_VALUE);

mHandler = new Handler();

mContent = findViewById(R.id.content);
mImage = (ImageView) findViewById(R.id.image);
mTitle = (TextView) findViewById(R.id.title);
mOwner = (TextView) findViewById(R.id.owner);

//初始化时将内容设置为不可见，等待后台线程加载数据完成后再显示
mContent.setVisibility(View.GONE);
getWindow().setFeatureInt(Window.FEATURE_INDETERMINATE_PROGRESS,
Window.PROGRESS_VISIBILITY_ON);
new LoadThread().start();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
menu.add(0, MENU_RADAR, 0, R.string.menu_radar) //添加雷达菜单项
.setIcon(R.drawable.ic_menu_radar)
.setAlphabeticShortcut('R');
menu.add(0, MENU_MAP, 0, R.string.menu_map) //添加地图菜单项
.setIcon(R.drawable.ic_menu_map)
.setAlphabeticShortcut('M');
menu.add(0, MENU_AUTHOR, 0, R.string.menu_author) //添加作者信息菜单项
.setIcon(R.drawable.ic_menu_author)
.setAlphabeticShortcut('A');
menu.add(0, MENU_VIEW, 0, R.string.menu_view) //添加浏览器中浏览图片菜单项
.setIcon(android.R.drawable.ic_menu_view)
.setAlphabeticShortcut('V');
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case MENU_RADAR: {
// 启动radar应用
Intent i = new Intent("com.google.android.radar.SHOW_RADAR");
GeoPoint location = mItem.getLocation();
i.putExtra("latitude", (float)(location.getLatitudeE6() / 1000000f));
i.putExtra("longitude", (float)(location.getLongitudeE6() / 1000000f));
try {
startActivity(i);
} catch (ActivityNotFoundException ex) {
showDialog(DIALOG_NO_RADAR); //radar应用不存在，弹出提示对话框
}
return true;
}
case MENU_MAP: {
// 启动自定义的地图 ViewMap
Intent i = new Intent(this, ViewMap.class);
i.putExtra(ImageManager.PANORAMIO_ITEM_EXTRA, mItem);
i.putExtra(ImageManager.ZOOM_EXTRA, mMapZoom);
i.putExtra(ImageManager.LATITUDE_E6_EXTRA, mMapLatitudeE6);
i.putExtra(ImageManager.LONGITUDE_E6_EXTRA, mMapLongitudeE6);

startActivity(i);

return true;
}
case MENU_AUTHOR: {
// 在浏览器中显示作者信息
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse(mItem.getOwnerUrl()));
startActivity(i);
return true;
}
case MENU_VIEW: {
// 在浏览器中显示图片信息
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse(mItem.getPhotoUrl()));
startActivity(i);
return true;
}
}

return super.onOptionsItemSelected(item);
}

@Override
protected Dialog onCreateDialog(int id) {
switch (id) {
case DIALOG_NO_RADAR:
//构造提示对话框
AlertDialog.Builder builder = new AlertDialog.Builder(this);
return builder.setTitle(R.string.no_radar_title)
.setMessage(R.string.no_radar)
.setIcon(android.R.drawable.ic_dialog_alert)
.setPositiveButton(android.R.string.ok, null).create();
}
return null;
}

/**
* 用于加载medium大小位图的线程
*/
private class LoadThread extends Thread {

public LoadThread() {
}

@Override
public void run() {
try {
String uri = mItem.getThumbUrl();
uri = uri.replace("thumbnail", "medium"); //修改图片URL
final Bitmap b = BitmapUtils.loadBitmap(uri); //加载中等尺寸的位图

//通告UI线程更改界面
mHandler.post(new Runnable() {
public void run() {
mImage.setImageBitmap(b);
mTitle.setText(mItem.getTitle());
mOwner.setText(mItem.getOwner());
mContent.setVisibility(View.VISIBLE);
getWindow().setFeatureInt(Window.FEATURE_INDETERMINATE_PROGRESS,
Window.PROGRESS_VISIBILITY_OFF);
}
});
} catch (Exception e) {
Log.e(TAG, e.toString());
}
}
}

}

ViewMap继承自MapActivity，用于在自定义地图上显示当前用户位置和照片拍摄位置，实现的界面如下图：



在Android中使用Google的地图服务，需要实现MapView组件（或实现MapActivity），当程序中用到MapView时，需要在AndroidManifest.xml文件的application标签内添加类库使用说明：

<uses-library android:name="com.google.android.maps" />

同时添加权限许可说明如下：

<uses-permission android:name="android.permission.INTERNET"/>

具体代码如下所示：

package com.google.android.panoramio;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.MyLocationOverlay;
import com.google.android.maps.Overlay;
import com.google.android.maps.Projection;

import android.content.Intent;
import android.graphics.Canvas;
import android.graphics.Point;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.FrameLayout;

import java.util.ArrayList;
import java.util.List;

/**
* 自定义的地图，显示照片中所在地和用户现在所在地点
*/
public class ViewMap extends MapActivity {
private MapView mMapView;

private MyLocationOverlay mMyLocationOverlay;

ArrayList<PanoramioItem> mItems = null;

private PanoramioItem mItem;

private Drawable mMarker; //照片拍摄位置标识点

private int mMarkerXOffset; //标识点的X坐标

private int mMarkerYOffset; //标识点的Y坐标

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

//代码实现布局
FrameLayout frame = new FrameLayout(this);
mMapView = new MapView(this, "MapViewCompassDemo_DummyAPIKey");
frame.addView(mMapView,
new FrameLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
setContentView(frame);

mMyLocationOverlay = new MyLocationOverlay(this, mMapView);

//加载资源文件
mMarker = getResources().getDrawable(R.drawable.map_pin);

// 给mMarker设置绘制在Overlay上的边界
final int intrinsicWidth = mMarker.getIntrinsicWidth();
final int intrinsicHeight = mMarker.getIntrinsicHeight();
mMarker.setBounds(0, 0, intrinsicWidth, intrinsicHeight);

mMarkerXOffset = -(intrinsicWidth / 2);
mMarkerYOffset = -intrinsicHeight;

// 获取从ViewImage传递过来的数据
Intent i = getIntent();
mItem = i.getParcelableExtra(ImageManager.PANORAMIO_ITEM_EXTRA);
int mapZoom = i.getIntExtra(ImageManager.ZOOM_EXTRA, Integer.MIN_VALUE);
int mapLatitudeE6 = i.getIntExtra(ImageManager.LATITUDE_E6_EXTRA, Integer.MIN_VALUE);
int mapLongitudeE6 = i.getIntExtra(ImageManager.LONGITUDE_E6_EXTRA, Integer.MIN_VALUE);

//给MapView添加两层Overlay
final List<Overlay> overlays = mMapView.getOverlays();
overlays.add(mMyLocationOverlay);
overlays.add(new PanoramioOverlay());

//设置MapView的缩放级别和中心点
final MapController controller = mMapView.getController();
if (mapZoom != Integer.MIN_VALUE && mapLatitudeE6 != Integer.MIN_VALUE
&& mapLongitudeE6 != Integer.MIN_VALUE) {
controller.setZoom(mapZoom);
controller.setCenter(new GeoPoint(mapLatitudeE6, mapLongitudeE6));
} else {
//Locaiton获取失败，设置默认缩放级别为15，并给消息队列中添加一个Runnable对象
//当Location修复时，将在新的线程中将地图移动到指定中心点
controller.setZoom(15);
mMyLocationOverlay.runOnFirstFix(new Runnable() {
public void run() {
controller.animateTo(mMyLocationOverlay.getMyLocation());
}
});
}

mMapView.setClickable(true);
mMapView.setEnabled(true);
mMapView.setSatellite(true);
addZoomControls(frame); //给地图添加缩放控制组件
}

@Override
protected void onResume() {
super.onResume();
//尝试使能Location服务，该函数注册为LocationManager.GPS_PROVIDER和
//LocationManager.NETWORK_PROVIDER的观察者
mMyLocationOverlay.enableMyLocation();
}

@Override
protected void onStop() {
//停止Location更新
mMyLocationOverlay.disableMyLocation();
super.onStop();
}

/**
* 获取缩放控制组件，并添加到MapView视图的下方
*/
@SuppressWarnings("deprecation")
private void addZoomControls(FrameLayout frame) {
View zoomControls = mMapView.getZoomControls();

FrameLayout.LayoutParams p =
new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT, Gravity.BOTTOM + Gravity.CENTER_HORIZONTAL);
//将地图缩放组件放到地图MapView的下方
frame.addView(zoomControls, p);
}

@Override
protected boolean isRouteDisplayed() {
return false; //不支持路线信息显示
}

/**
* 显示照片拍摄地点图钉资源的Overlay
*/
public class PanoramioOverlay extends Overlay {
@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
if (!shadow) {
Point point = new Point();
//获取投影类，在屏幕像素点和经纬度坐标点之间转换
Projection p = mapView.getProjection();
//将经纬度点信息GeoPoint对象转换成MapView视图上的坐标点Point对象
p.toPixels(mItem.getLocation(), point);
super.draw(canvas, mapView, shadow);
//在指定的x和y坐标点上绘制drawable对象mMarker
drawAt(canvas, mMarker, point.x + mMarkerXOffset, point.y + mMarkerYOffset, shadow);
}
}
}

}