Android高德(百度)地图mapview圆角实现
2019-02-14 本文已影响247人
清风流苏
本文同时适用于高德地图和百度地图。
本人总结下来有三种实现方案,但每种方案都有利弊:
- 方案一:使用CardView包裹MapView,通过设置CardView的圆角属性来实现地图圆角效果。弊端:存在兼容性问题。
- 方案二:原理同第一种方案,自定义圆角Layout包裹MapView。同样也存在兼容性问题。
- 方案三:添加一个圆角遮罩(中间透明)盖到MapView上面,从而实现圆角效果。好处是不存在兼容性问题,弊端是适用性较狭窄。适用于地图边框颜色同外部容器颜色一致的情况,否则存在色差就比较难看。
下面详述三种方案:
方案一:使用CardView包裹MapView
<android.support.v7.widget.CardView
android:layout_weight="0.6"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="0dp"
app:cardCornerRadius="6dp">
<com.amap.api.maps.MapView
android:id="@+id/road_help_map"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v7.widget.CardView>
由于CardView本身兼容性问题,导致5.0(API 21)以下圆角存在边距。下图显示效果不明显,但是实际开发肉眼是可以看到的。
5.0以下(真机API19)5.0以上显示效果良好,地图边缘没有白边。
5.0以上(真机API27)
方案二:自定义圆角Layout包裹MapView
自定义圆角布局RoundRelativeLayout
public class RoundRelativeLayout extends RelativeLayout {
private Path path;
private float radius = 20f;
public RoundRelativeLayout(@NonNull Context context) {
this(context, null);
}
public RoundRelativeLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundRelativeLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
if (attrs != null) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundRelativeLayout);
radius = ta.getDimension(R.styleable.RoundRelativeLayout_radius, 20);
ta.recycle();
}
path = new Path();
}
@Override
protected void dispatchDraw(Canvas canvas) {
path.reset();
path.addRoundRect(new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight()), radius, radius, Path.Direction.CW);
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG|Paint.FILTER_BITMAP_FLAG));
canvas.clipPath(path, Region.Op.REPLACE);
super.dispatchDraw(canvas);
}
}
属性文件attrs.xml:
<declare-styleable name="RoundRelativeLayout">
<attr name="radius" format="dimension" />
</declare-styleable>
看下实现效果:
模拟器API 17
真机API 19
在API17上没有圆角效果,而API19上则有。原因跟我们使用clipPath来实现圆角有关,这个方法在API 18才支持硬件加速(参见我的另一篇文章硬件加速),经过实验发现如果我们设置关闭硬件加速,那么是可以看到圆角的,但是地图MapView会出现黑屏现象。大家可以手动试下。本人测试的关闭硬件加速的方法:
public RoundRelativeLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setLayerType(LAYER_TYPE_SOFTWARE, null);
....
}
尝试过网上的其他圆角控件GcsSloop/rclayout,VibeXie/Android实现圆角ViewGroup,和MapView结合使用都会存在黑屏或显示不出来的现象。
综上,采用本方法,API18以下的设备将无法实现圆角,API18(含)以上设备有圆角。
方案三:给MapView添加圆角遮罩
定义一个圆角遮罩mapview_corner.xml,这里的colorPrimary颜色同地图容器背景色相近,如果能一样是最好。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape >
<solid android:color="@android:color/transparent"/>
<stroke android:color="@color/colorPrimary" android:width="2dp"/>
</shape>
</item>
<item>
<shape >
<solid android:color="@android:color/transparent"/>
<stroke android:color="@color/colorPrimary" android:width="2dp"/>
<corners android:radius="6dp"/>
</shape>
</item>
</layer-list>
布局代码:
<RelativeLayout
android:layout_weight="0.6"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="50dp"
android:layout_width="match_parent"
android:layout_height="0dp">
<com.amap.api.maps.MapView
android:id="@+id/road_help_map"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<View android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/mapview_corner"/>
</RelativeLayout>
在MapView的上方添加一个和MapView大小一样的View,设置背景为mapview_corner.xml作为圆角遮罩。
显示效果:
圆角遮罩
因为我的背景为渐变色,和纯色的边框颜色差异较大,所以会很明显的看出来。
这种方案,如果你的背景为纯色,则效果会很良好。
我这里的背景遮罩采用layer-list实现,实际上你也可以考虑用9-patch来做,效果会不会更好