1. 程式人生 > >Android自定義百度地圖縮放圖示

Android自定義百度地圖縮放圖示

自定義實現Android百度地圖的縮放圖示,需要自定義一個縮放控制元件,實現效果如下:

這裡的縮放效果,實現了點選按鈕可以對地圖的放大縮小,通過手勢放大與縮小也控制縮放圖示的可用狀態。具體實現如下:

首先是drawable目錄下的兩個xml配置檔案:

zoom_selector_in.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/zoomin_press"/>
    <item android:state_enabled="false" android:drawable="@drawable/zoomin_disable"/>
    <item android:drawable="@drawable/zoomin_normal"/>
</selector>

zoom_selector_out.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/zoomout_press"/>
    <item android:state_enabled="false" android:drawable="@drawable/zoomout_disable"/>
    <item android:drawable="@drawable/zoomout_normal"/>
</selector>

layout中的zoom_controls_in_out.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">

    <Button
        android:id="@+id/btn_zoom_in"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:background="@drawable/zoom_selector_in" />

    <Button
        android:id="@+id/btn_zoom_out"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:background="@drawable/zoom_selector_out" />

</LinearLayout>

主配置檔案main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <com.baidu.mapapi.map.MapView
        android:id="@+id/mv_map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true" />
    <com.example.map.view.ZoomControlsView 
        android:id="@+id/zcv_zoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"/>
</RelativeLayout>
相關的xml檔案都在這裡了,下面是具體實現程式碼:

自定義縮放控制元件類ZoomControlsView.java

package com.example.map.view;
import com.baidu.mapapi.map.BaiduMap;
import com.baidu.mapapi.map.MapStatus;
import com.baidu.mapapi.map.MapStatusUpdateFactory;
import com.baidu.mapapi.map.MapView;
import com.example.map.activity.R;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.Button;
import android.widget.LinearLayout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;;

public class ZoomControlsView extends LinearLayout implements OnClickListener{
	private Button inBtn;//放大按鈕
	private Button outBtn;//縮小按鈕
	private BaiduMap baiduMap;//百度地圖物件控制器
	private MapStatus mapStatus;//百度地圖狀態
	private float minZoomLevel;//地圖最小級別
	private float maxZoomLevel;//地圖最大級別

	public ZoomControlsView(Context context, AttributeSet attrs) {
		super(context, attrs, 0);
		init();
	}
	
	public ZoomControlsView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}
	
	/**
	 * 初始化
	 */
	private void init(){
		//獲取佈局檢視
		LinearLayout view=(LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.zoom_controls_in_out, null);
		//獲取放大按鈕
		inBtn=(Button) view.findViewById(R.id.btn_zoom_in);
		//獲取縮小按鈕
		outBtn=(Button) view.findViewById(R.id.btn_zoom_out);
		//設定點選事件
		inBtn.setOnClickListener(this);
		outBtn.setOnClickListener(this);
		//新增View
		addView(view);
	}

	@Override
	public void onClick(View v) {
		this.mapStatus=this.baiduMap.getMapStatus();//獲取地圖狀態
		switch (v.getId()) {
		case R.id.btn_zoom_in:
			//改變地圖狀態
			this.baiduMap.setMapStatus(MapStatusUpdateFactory.zoomTo(mapStatus.zoom+1));
			controlZoomShow();//改變縮放按鈕
			break;
		case R.id.btn_zoom_out:
			//改變地圖狀態
			this.baiduMap.setMapStatus(MapStatusUpdateFactory.zoomTo(mapStatus.zoom-1));
			controlZoomShow();//改變縮放按鈕
			break;
		default:
			break;
		}
		//重新獲取狀態
		mapStatus=this.baiduMap.getMapStatus();
	}
	
	/**
	 * 設定Map檢視
	 * @param mapView
	 */
	public void setMapView(MapView mapView){
		//獲取百度地圖控制器
		this.baiduMap=mapView.getMap();
		//設定地圖手勢事件
		this.baiduMap.setOnMapStatusChangeListener(onMapStatusChangeListener);
		//獲取百度地圖最大最小級別
		maxZoomLevel=baiduMap.getMaxZoomLevel();
		minZoomLevel=baiduMap.getMinZoomLevel();
		controlZoomShow();//改變縮放按鈕
	}
	
	/**
	 * 控制縮放圖示顯示
	 */
	private void controlZoomShow(){
		//獲取當前地圖狀態
		float zoom=this.baiduMap.getMapStatus().zoom;
		//如果當前狀態大於等於地圖的最大狀態,則放大按鈕則失效
		if(zoom>=maxZoomLevel){
			inBtn.setBackgroundResource(R.drawable.zoomin_press);
			inBtn.setEnabled(false);
		}else{
			inBtn.setBackgroundResource(R.drawable.zoom_selector_in);
			inBtn.setEnabled(true);
		}
		
		//如果當前狀態小於等於地圖的最小狀態,則縮小按鈕失效
		if(zoom<=minZoomLevel){
			outBtn.setBackgroundResource(R.drawable.zoomout_press);
			outBtn.setEnabled(false);
		}else{
			outBtn.setBackgroundResource(R.drawable.zoom_selector_out);
			outBtn.setEnabled(true);
		}
	}
	/**
	 * 地圖狀態改變相關介面實現
	 */
	BaiduMap.OnMapStatusChangeListener onMapStatusChangeListener=new BaiduMap.OnMapStatusChangeListener() {
		
		/**
		 * 手勢操作地圖,設定地圖狀態等操作導致地圖狀態開始改變。 
		 * @param status 地圖狀態改變開始時的地圖狀態 
		 */
		@Override
		public void onMapStatusChangeStart(MapStatus arg0) {
			
		}
		
		/**
		 * 地圖狀態變化結束
		 * @param status 地圖狀態改變結束時的地圖狀態 
		 */
		@Override
		public void onMapStatusChangeFinish(MapStatus arg0) {
			
		}
		
		/**
		 * 地圖狀態變化中
		 * @param status 當前地圖狀態
		 */
		@Override
		public void onMapStatusChange(MapStatus arg0) {
			controlZoomShow();
		}
	};

}

MainActivity.java:
package com.example.map.activity;
import com.baidu.mapapi.SDKInitializer;
import com.baidu.mapapi.map.BaiduMap;
import com.baidu.mapapi.map.MapView;
import com.example.map.view.ZoomControlsView;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity{
	private MapView mvMap;//百度地圖控制元件
	private BaiduMap baiduMap;//地圖物件控制器
	private ZoomControlsView zcvZomm;//縮放控制元件
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//必須在setContentView前
		SDKInitializer.initialize(getApplicationContext());
		setContentView(R.layout.main_activity);
		initMap();//初始化
	}
	
	/**
	 * 初始化地圖
	 */
	private void initMap(){
		//獲取地圖控制元件
		mvMap=(MapView) findViewById(R.id.mv_map);
		mvMap.showZoomControls(false);//隱藏縮放控制元件
		//獲取地圖物件控制器
		baiduMap=mvMap.getMap();
		baiduMap.setBuildingsEnabled(true);//設定顯示樓體
		baiduMap.setMapStatus(MapStatusUpdateFactory.zoomTo(19f));//設定地圖狀態
		
		//獲取縮放控制元件
		zcvZomm=(ZoomControlsView) findViewById(R.id.zcv_zoom);
		zcvZomm.setMapView(mvMap);//設定百度地圖控制元件
		
	}
	
	
	
	@Override
	protected void onPause() {
		super.onPause();
		mvMap.onPause();
	}
	
	@Override
	protected void onResume() {
		super.onResume();
		mvMap.onResume();
	}
	@Override
	protected void onDestroy() {
		super.onDestroy();
		mvMap.onDestroy();//銷燬地圖
	}
	
}

這樣就實現了自定義的縮放圖示了