Android高德（百度）地图mapview圆角实现

本文同时适用于高德地图和百度地图。

本人总结下来有三种实现方案，但每种方案都有利弊：

• 方案一：使用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来做，效果会不会更好