ArcGIS for Android 之callout初級實作

    ArcGIS for Android 的callout會實作的功能就是當你單擊地圖上一個标注的時候，會彈出一個銜套在MapView之上的彈窗，裡面可以顯示該标注的一些資訊和屬性。

    今天，我将在這裡總結我這些天對callout的皮毛研究，能力有限，如有錯誤之處請回複提出。

首先是要在res檔案夾下建立一個xml檔案夾，裡面建立檔案calloutstyle.xml，然後用代碼對該callout的樣式進行設定。根據英文API中的介紹，做了一些簡單的翻譯：

<?xml version="1.0" encoding="utf-8"?>
  <resources>
      <calloutViewStyle
         titleTextColor="#000000"      <!-- some RGB color or a reference to a color />
         titleTextSize = 10;           <!-- size of the title text in scaled pixels  />
         titleTextStyle = 0;           <!—字型樣式/>
         titleTextTypeFace = 0;        <!—字型設定0-4/> 
          backgroundColor="#ffffff"    <!—資訊框的整個内在的背景顔色 />
          backgroundAlpha="255"        <!-- 0(透明) to 255(不透明) />設定透明度參數
          frameColor="#000000"         <!—架構的顔色（就是整個資訊框的四周邊緣顔色） />
          flat="true"                  <!-- draws a 3D frame（平面的還是3D的，這裡true是代表平面的） />
          style.getCornerCurve()="0"   <!--視窗角落的半徑曲率(max=40) />
          anchor="5" />                <!--  anchor的位置（0-8，根據ANCHOR_POSITION_XXX常量的選擇）/> 
   </resources>
           

接下來，便是要在res/layout下建立callout顯示的内部布局檔案：calloutdisplay.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" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/callTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="1dp"
            android:text="武夷山"
            android:textSize="15sp"
            android:textStyle="bold" >
        </TextView>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="180dp"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/callcollect"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/callcollect" />

            <Button
                android:id="@+id/callshare"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/callshare" />

            <Button
                android:id="@+id/callexit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/callexit" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/calladdre"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="位址：福建省南平市武夷山市" />

            <TextView
                android:id="@+id/calltype"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="類型：旅遊風景區" />

            <TextView
                android:id="@+id/callcontent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="詳情：大衆點評網述" />

            <TextView
                android:id="@+id/callnumb"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="電話：[phone]" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/calloutimg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:src="@drawable/mm11" >
            </ImageView>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>
           

布局檔案和樣式檔案都已經完成了。

那麼，接下來就是java代碼的實作了，我的思路是，在地圖上建立一個臨時的point，然後當單擊該point後，彈窗callout。

final GraphicsLayer graphicsLayer = new GraphicsLayer();
		com.esri.core.geometry.Point pt1 = new com.esri.core.geometry.Point(
				1.2905771616285184E7, 3035967.556712447);
		Graphic g1 = new Graphic(pt1, new SimpleMarkerSymbol(Color.BLACK, 10,
				STYLE.CIRCLE));
		graphicsLayer.addGraphic(g1);
		mMapView.addLayer(graphicsLayer);
		mMapView.setOnSingleTapListener(new OnSingleTapListener() {
			public void onSingleTap(float x, float y) {
				// TODO Auto-generated method stub
				
				int[] graphicIDs = graphicsLayer.getGraphicIDs(x, y, 25);
				if (graphicIDs != null && graphicIDs.length > 0) {
					LayoutInflater inflater = LayoutInflater
							.from(HelloWorldActivity.this);
					View view = inflater.inflate(R.layout.callout, null);
					Graphic gr = graphicsLayer.getGraphic(graphicIDs[0]);
					com.esri.core.geometry.Point location = new com.esri.core.geometry.Point(
							1.2905771616285184E7, 3035967.556712447);
					Callout callout = mMapView.getCallout();
                                        callout.setStyle(R.xml.calloutstyle);
					callout.setOffset(0, -15);
					callout.show(location, view);
				}
				Log.v(TAG, "OnSingleTapLinstener is running !");
			}
		});
           

通過上面的代碼，我是先初始化地圖時就建立一個黑色的圓點。然後設定地圖單擊監聽事件，當單擊到這個黑色點的時候，彈出callout。

那麼，接下來看看實作的效果：