android中點中overlay彈出帶尾巴的氣泡的實現

來源:互聯網
上載者:User


就是上面的樣子
做這個過程中我碰到兩個問題:
1:如何做帶尾巴的氣泡View
2:如何把這個View添加到MapView中.
1:如何做帶尾巴的氣泡View
我是採用背景圖的方式來實現的.當然,普通的PNG在View 縮放的時候會失真,尤其是那個尖尖的尾巴.
後來採用9.png的格式,才完成了不變形的效果.9.png格式的Png可以用SDK\Tools\draw9patch.bat來處理,只要把普通的png的邊上標誌一下就可以了,具體draw9patch.bat如何使用這裡就不說了,網上有很多文檔,自己查查就知道了.
我產生的9.png就是下面這個樣子,注意四周的黑線.就是9png展開時的標識

有了這個png,直接放到你的工程下的res/drawable目錄就可以了,
然後在res/layout目錄下建立你的view的xml檔案,比如叫overlay_pop.xml,我的是這樣的:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" 
 android:background="@drawable/bubble_background" <!--這就是那個9.png-->
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content"
 android:paddingLeft="5px"
 android:paddingTop="5px"
 android:paddingRight="5px"
 android:paddingBottom="20px"    <!--注意加上padding,否則view裡面的東西就畫到邊框上了-->
   >
    <TextView android:id="@+id/map_bubbleTitle" 
       android:ellipsize="marquee" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"
       android:gravity="center_horizontal"
       android:singleLine="true" 
        /> <!--style可以沒有,我這裡第一個TextView表示標題,用的是大字型-->
    <TextView  android:id="@+id/map_bubbleText" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:singleLine="false" 
        /><!--style可以沒有,我這裡第二個TextView表示描述資訊,用的是大字型-->
</LinearLayout>
這樣popView就建立好了
2:如何把這個View添加到MapView中.
通常是在mapView中點擊某個位置,彈出popView
或者點擊某個Overlay彈出popView,這裡用點擊Overlay來說明,
overlay有onTap()方法,你可以實現自己的overlay,overideonTap()方法,彈出popView,
也可以使用setOnFocusChangeListener(),在listener中實現彈出popView,.
我是用的listener,因為setOnFocusChangeListener在失去焦點也會觸發,我可以再失去焦點的時候隱藏popView.
MapView是繼承自ViewGroup的,因此,MapView有addView()方法,同時還有MapView.LayoutParams
MapView.LayoutParams 可以根據GeoPoint來定位,我就是利用這個特性來定位彈出的popView的.
PointItemizedOverlay overlay = new PointItemizedOverlay(drawable); <!--這是我繼承自ItemizedOverlay的overlay,主要就是畫一個圖片,寫一個名稱,很簡單,這裡不貼具體代碼了-->
public class BaseMapActivity extends MapActivity {
 /**
  * 地圖View
  */
 protected MapView mapView;

 /**
  * 彈出的氣泡View
  */
 private View popView;
/**
    監聽器
*/
 private final ItemizedOverlay.OnFocusChangeListener onFocusChangeListener = new ItemizedOverlay.OnFocusChangeListener() {

  @Override
  public void onFocusChanged(ItemizedOverlay overlay, OverlayItem newFocus) {
      //建立氣泡視窗
 

   if (popView != null) {
      popView.setVisibility(View.GONE);
   }

   if (newFocus != null) {

    MapView.LayoutParams geoLP = (MapView.LayoutParams) popView.getLayoutParams();
    geoLP.point = newFocus.getPoint();//這行用於popView的定位
    TextView title = (TextView) popView.findViewById(R.id.map_bubbleTitle);
    title.setText(newFocus.getTitle());

    TextView desc = (TextView) popView.findViewById(R.id.map_bubbleText);
    if (newFocus.getSnippet() == null || newFocus.getSnippet().length() == 0) {
     desc.setVisibility(View.GONE);
    } else {
     desc.setVisibility(View.VISIBLE);
     desc.setText(newFocus.getSnippet());
    }
    mapView.updateViewLayout(popView, geoLP);
    popView.setVisibility(View.VISIBLE);
   }
  }
 };

     public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
            /**
            省略其他代碼
           **/
          //初始化氣泡,並設定為不可見
       popView = inflater.inflate(R.layout.overlay_popup, null);
       mapView.addView( popView,
             new MapView.LayoutParams(MapView.LayoutParams.WRAP_CONTENT, MapView.LayoutParams.WRAP_CONTENT,
           null, MapView.LayoutParams.BOTTOM_CENTER));
          //由於我的氣泡的尾巴是在下邊置中的,因此要設定成MapView.LayoutParams.BOTTOM_CENTER.
          //這裡沒有給GeoPoint,在onFocusChangeListener中設定
       views.add(popView);
      popView.setVisibility(View.GONE);
    添加overlay
    PointItemizedOverlay overlay = new PointItemizedOverlay(drawable);
    //設定顯示/隱藏泡泡的監聽器
    overlay.setOnFocusChangeListener(onFocusChangeListener);
    overlay.addOverlay(/*你自己的overlayItem*/);
    overlay.addOverlay(/*你自己的overlayItem*/);
    overlay.addOverlay(/*你自己的overlayItem*/);
    }
}
這樣就基本完工了.

http://www.apkbus.com/android-635-1-1.html

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.