BB

Airbnb是短租行业的独角兽和领头羊，外号短租Uber，国内的途家、小猪、依依等都是他的模仿者。Airbnb android版的设计简洁大气，ceo不愧罗德岛设计学院毕业。Airbnb中的地图页很有意思，不过它是集成了Google map实现，国内吗~ 我使用了百度地图实现了仿Airbnb的地图页，先看一下效果：

录屏专家160711191103.gif

思考

百度地图的配置什么的就不说了，官方demo写的很仔细。

我们看地图页主体上分为两个部分上面的地图部分约占3/4,底下1/4是房屋信息的布局。地图上遍布着覆盖物，覆盖物上显示房屋的价格。点一下覆盖物咦~怎么变大了背景色也变白了，底下的房屋布局也变成我现在看的这个价格的房屋了....... 多玩几次你会发现其中的逻辑是这个样子的：

地图上的覆盖物有三种状态：

未看过（背景色大红，价格颜色白）

正在看（整体变大，背景色白，价格颜色红）

看过（背景颜色橘红，价格颜色白）

底部整体为ViewPager与正在看的覆盖物联动，展示正在看的房屋信息

点击覆盖物，覆盖物的状态会变为正在看，滑动viewpager，状态也会切换总体的状态变化为

**未看过->正在看，正在看->看过，看过->正在看
**

细节

无论覆盖物有多少，分布在地图的哪些角落，它们总能合适的显示在一个屏里

覆盖物的数量是有限制的，考虑到内存消耗与使用体验，覆盖物数量为20个

覆盖物会有重叠的情况，正在看的覆盖物会在叠层的最顶部显示

marker相对于地图是静止的不可拖动

开码

有了上述的思考分析，代码无非翻译一下，先捋一捋需要的东西：

1 覆盖物，Marker百度地图提供的实现类
2 价格，House实际为房屋的信息
3 当前状态 WatchStatus 枚举
4 不同状态对应的布局 BitmapDescriptor
5 位置经纬度 House里含有

code：


 public class MapStatusMarker { 
 public enum WatchStatus {
    WATCHING,
    WATCHED,
    NOWATCH,
}

private Marker marker;

private WatchStatus status;

private House house;

BitmapDescriptor noWatchIc ;
BitmapDescriptor watchedIc ;
BitmapDescriptor watchingIc ;

public Marker getMarker() {
    return marker;
}

public void setMarker(Marker marker) {
    this.marker = marker;
}

public WatchStatus getStatus() {
    return status;
}

/**
 * 更改marker状态，改变背景
 * @param status
 */
public void setStatus(WatchStatus status) {
    this.status = status;
    resetIcon();
}

public House getHouse() {
    return house;
}

public void setHouse(House house) {
    this.house = house;
}

/**
 * @param map
 */
public MapStatusMarker(BaiduMap map,House house,Context context) {
    this.house = house;
    initMarkerView(context);
    setDefaultMarker(map);
}

private void initMarkerView(Context context){
    //已看过的marker对应的布局
    TextView watchedView = (TextView)LayoutInflater.from(context).inflate(R.layout.watched_map_view,null);
    watchedView.setText("￥"+house.getPrice()/100);
    //正在看的marker对应的布局
    TextView watchingView = (TextView)LayoutInflater.from(context).inflate(R.layout.watching_map_view,null);
    watchingView.setText("￥"+house.getPrice()/100);
    //未看过的marker对应的布局
    TextView nowatchView = (TextView)LayoutInflater.from(context).inflate(R.layout.nowatch_map_view,null);
    nowatchView.setText("￥"+house.getPrice()/100);
    noWatchIc = BitmapDescriptorFactory.fromView(nowatchView);
    watchingIc = BitmapDescriptorFactory.fromView(watchingView);
    watchedIc = BitmapDescriptorFactory.fromView(watchedView);

}

/**
 * 初始化时状态全为未看过
 * @param map
 */
private void setDefaultMarker(BaiduMap map) {
    this.status = WatchStatus.NOWATCH;
    Location location = house.getLocation();
    LatLng latLng = new LatLng(location.getLatitude()/1000000,location.getLongitude()/1000000);
    //设置marker不可拖动
    markerOptions = new MarkerOptions().position(latLng).draggable(false).icon(noWatchIc);
    marker = (Marker) map.addOverlay(markerOptions);
}

private MarkerOptions markerOptions;
public MarkerOptions getMarkerOptions(){
    return markerOptions;
}

/**
 * 被点击的marker的操作
 * 状态：未看过，已看过->正在看
 * 移到叠层的最顶部
 */
public void clickSelfStatus() {
    if (status == WatchStatus.NOWATCH) {
        status = WatchStatus.WATCHING;
    }else if (status==WatchStatus.WATCHED){
        status = WatchStatus.WATCHING;
    }
    marker.setToTop();
    resetIcon();
}

/**
 * 未被点击的marker的操作
 * 状态为正在看->已看过
 */
public void clickOtherStatus() {
    if (status == WatchStatus.WATCHING) {
        status = WatchStatus.WATCHED;
        resetIcon();
     }
}

/**
 * 根据marker状态更改marker的背景
 */
public void resetIcon() {
    if (status == WatchStatus.WATCHING) {
        marker.setIcon(watchingIc);
        return;
    }
    if (status == WatchStatus.WATCHED) {
        marker.setIcon(watchedIc);
        return;
    }
}

/**
 * 内存回收
 */
public void clear() {
    noWatchIc.recycle();
    watchedIc.recycle();
    watchingIc.recycle();
}
 
 }

注释写的很明白，覆盖物的操作基本都在这一个类里

这样一进入地图页是这么个操作


 for (House item : houses) {
 MapStatusMarker marker = new MapStatusMarker(map, item, getActivity());
 markers.add(marker);
 }
 if(markers.size()==0)
 return;
 //baidu setTop bug 必须放在最后执行
 markers.get(0).setStatus(MapStatusMarker.WatchStatus.WATCHING);
 markers.get(0).clickSelfStatus();

marker点击事件的回调是这个接口 BaiduMap.OnMarkerClickListener


 @Override
 public boolean onMarkerClick(Marker marker) {
 int currentPos = 0;
 for (int i = 0; i < markers.size(); i++) {
 MapStatusMarker item = markers.get(i);
 if (item.getMarker() == marker) {
 item.clickSelfStatus();
 currentPos = i;
 } else {
 item.clickOtherStatus();
 }
 }
 //底部的viewpager滚动到对应的房屋信息
 pager.setCurrentItem(currentPos);
 return false;
 }

viewpager房屋切换时marker随之而变


 @Override
 public void onPageSelected(int position) {
 //百度 setTop bug 必须这么写看到别逼逼
 for (int i = 0; i < markers.size(); i++) {
 markers.get(i).clickOtherStatus();
 }
 markers.get(position).clickSelfStatus();
 }

让所有的marker都在一个屏幕中显示：


 private void zoomToScreen(){
 final List overlayOptionses = new ArrayList<>();
 for (int i=0;i overlayOptionses.add(markers.get(i).getMarkerOptions());
 }
 overlayManager = new OverlayManager(map) {
 @Override
 public List getOverlayOptions() {
 return overlayOptionses;
 } 
         @Override
        public boolean onMarkerClick(Marker marker) {
            return false;
        }

        @Override
        public boolean onPolylineClick(Polyline polyline) {
            return false;
        }
    };
    overlayManager.addToMap();
    overlayManager.zoomToSpan();
    overlayManager.removeFromMap();
    float targetZoom = map.getMapStatus().zoom - 0.3f;
    MapStatusUpdate msu = MapStatusUpdateFactory.zoomTo(targetZoom);
    map.setMapStatus(msu);
}

注意这里的targetZomm - 0.3f为什么要减这0.3呢，targetZomm不是正好的缩放比例吗？原因是这样的，zoomToSpan对应的经纬度的点宽高可以忽略，而我们的marker是有大小的，直接使用targetZomm会造成屏幕边缘的marker一部分在屏幕里，一部分在屏幕外，-0.3在1080p的手机上可以合适显示，实际这个值需要根据手机的分辨率动态设置。
然后onDestroy里回收一下内存，虽然可能没什么用- -


 @Override
 public void onDestroy() {
 super.onDestroy();
 for (MapStatusMarker item : markers) {
 item.clear();
 item = null;
 }
 System.gc();
 Runtime.getRuntime().gc();
 }

写到这里是不是觉得逻辑上两个字：完美！拍屁股去LoL了，想法倒是很清真。实际会有一些问题

坑

所有marker显示在一个屏幕上怎么时好时坏？
正在看的marker提到顶部怎么也时好时坏- -

经过查询与实验终于解决：
zoomToSpan要在地图全部加载完成后操作：
具体去实现这个接口 BaiduMap.OnMapLoadedCallback


 @Override
 public void onMapLoaded() {
 zoomToScreen();
 }

另外marker.setToTop()有个bug，必须等到其他的marker设置好之后，在调用才会有效，使用的地方在代码里已经注释

BB

看似复杂的逻辑，理清楚了也就那样吧，时间还是耗在了坑上，啧啧这很清真~

Android实现Airbnb地图页效果

BB

思考

细节

开码

坑

BB

END

你可能感兴趣的:(Android实现Airbnb地图页效果)