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); } } } }