有没有办法实现一个Mapfragment的圆angular?

我想给地图一个好看的圆angular,就像它下面的两个盒子一样。 我不能用自己的地图片段来做,因为没有片段的背景属性。 在布局中设置地图并将其设置为圆形的背景对我也没有帮助,这是结果:

http://i.stack.imgur.com/LJhP1.jpg

我可以合并地图,但这会使它更小,我想避免它。

编辑:@Ryan这是新的结果#2:

http://i.stack.imgur.com/69D59.jpg

我想这不算差,甚至没有接近其他盒子的angular落,但仍然不错,多一点工作可以到某个地方接近我只是没有一个正常的图像编辑器。 但是现在仍然困扰我的一件事是“地点”文本视图和它自己的地图之间的分离。 我可以以其他方式涂上补丁,以便现在有距离吗? 这是我如何做到的:

http://i.stack.imgur.com/1Qx66.png

那么我终于明白了这一点:

http://i.stack.imgur.com/bY4N5.jpg

这是我使用的补丁:

在这里输入图像说明

谢谢。

Solutions Collecting From Web of "有没有办法实现一个Mapfragment的圆angular?"

我还没有尝试过,但是我会在mapView / mapFragment顶部放置一个带有圆angular和透明中间的视图。

也就是说,将mapFragment和圆angular视图放在FrameLayout中,同时填充FrameLayout,然后使圆angular视图的中间透明。

为了进一步澄清,你可以在一个布局如下:

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <fragment xmlns:map="http://schemas.android.com/apk/res-auto" android:id="@+id/mapFragment" android:layout_width="match_parent" android:layout_height="match_parent" class="com.google.android.gms.maps.MapFragment" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/rounded_background" android:orientation="vertical" > </LinearLayout> </FrameLayout> 

rounded_background是一个带有圆angular和透明中间的9贴片。 例如

rounded_background.9.png

希望有所帮助,

瑞安

我知道这是一个旧的post,但你可以尝试使用像这样的卡:

 <android.support.v7.widget.CardView android:layout_width="300dp" android:layout_height="350dp" android:layout_gravity="center_horizontal|center_vertical" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginTop="20dp" app:cardCornerRadius="12dp" app:cardElevation="12dp"> <fragment android:id="@+id/map" android:name="com.google.android.gms.maps.SupportMapFragment" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v7.widget.CardView> 

在这里输入图像说明

最简单的方法是将地图片段与ImageView一起封装到FrameLayout中。 Imageview将在地图片段顶部显示一个圆angular矩形。 在最简单的forms中,您将看到圆angular矩形内的地图片段,其angular落伸出圆angular矩形,因为地图视图本身不是圆angular的。 为了克服这种视觉上的古怪,只需在地图片段上应用layout_margin值。 该值应该等于矩形的边框宽度。

  <FrameLayout android:id="@+id/map_container" android:layout_width="wrap_content" android:layout_height="340dp" > <fragment android:id="@+id/map" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="3dp" android:name="com.google.android.gms.maps.SupportMapFragment"/> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/map_bg_box" /> </FrameLayout> 

矩形可绘制被定义为如下的xml形状

 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <stroke android:width="3dp" android:color="#ff000000" /> <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp"/> </shape> 

请注意矩形的笔触宽度为3dp,这与我们应用于地图片段的layout_margin属性的值完全相同。 结果是一个很好的圆angular地图片段,如下面的截图所示 在这里输入图像说明

对于其他人来看这个,我刚刚解决这个使用GoogleMap.snapshot和操作位图结果与堆叠stream的答案: 如何使一个ImageView圆angular?

请注意,这只有在您要使静态地图不会与之互动时才有效。

确保在地图加载后拍摄快照。

我更新了图像视图帮助程序代码来绘制path,以支持舍入只有一些angular落。 即。 如果你只想围绕2个angular落。

你只需要循环rect函数的path,该函数需要一个float []

我显示一个进度条,直到我从GoogleMap加载的侦听器获得一个callback比我快照。

如果你把你的快照过早,你将无法创build0宽度和高度错误的位图。

希望这有助于在静态地图快照中寻找圆angular或其他奇怪形状的人。

如果你只是想瞄准API 21(棒棒糖)和更高


这是最简单的方法。

parentView.setClipToOutline(true);

结果

在这里输入图像说明

在此布局中包裹地图片段:

 package com.example.yourpackage; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; import android.util.AttributeSet; import android.widget.RelativeLayout; /** * Just extend any Layout you like/need */ public class RoundedLayout extends RelativeLayout { private Path mPathCorners = new Path(); private Path mPathCircle = new Path(); private float mCornerRadius; /** * border path */ private Path mPathCornersBorder = new Path(); private Path mPathCircleBorder = new Path(); private int mBorderWidth = 0; private int mBorderHalf; private boolean mShowBorder = false; private int mBorderColor = 0xFFFF7700; private float mDensity = 1.0f; /** * Rounded corners or circle shape */ private boolean mIsCircleShape = false; private Paint mPaint = new Paint(); private float dpFromPx(final float px) { return px / mDensity; } private float pxFromDp(final float dp) { return dp * mDensity; } public RoundedLayout(Context context) { this(context, null); } public RoundedLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RoundedLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); mDensity = getResources().getDisplayMetrics().density; // just a default for corner radius mCornerRadius = pxFromDp(25f); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setColor(mBorderColor); setBorderWidth(Math.round(pxFromDp(2f))); } /** * Switch to circle or rectangle shape * * @param useCircle */ public void setShapeCircle(boolean useCircle) { mIsCircleShape = useCircle; invalidate(); } /** * change corner radius * * @param radius */ public void setCornerRadius(int radius) { mCornerRadius = radius; invalidate(); } public void showBorder(boolean show) { mShowBorder = show; invalidate(); } public void setBorderWidth(int width) { mBorderWidth = width; mBorderHalf = Math.round(mBorderWidth / 2); if (mBorderHalf == 0) { mBorderHalf = 1; } mPaint.setStrokeWidth(mBorderWidth); updateCircleBorder(); updateRectangleBorder(); invalidate(); } public void setBorderColor(int color) { mBorderColor = color; mPaint.setColor(color); invalidate(); } // helper reusable vars, just IGNORE private float halfWidth, halfHeight, centerX, centerY; private RectF rect = new RectF(0, 0, 0, 0); private RectF rectBorder = new RectF(0, 0, 0, 0); @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); // just calculate both shapes, is not heavy // rounded corners path rect.left = 0; rect.top = 0; rect.right = w; rect.bottom = h; mPathCorners.reset(); mPathCorners.addRoundRect(rect, mCornerRadius, mCornerRadius, Path.Direction.CW); mPathCorners.close(); // circle path halfWidth = w / 2f; halfHeight = h / 2f; centerX = halfWidth; centerY = halfHeight; mPathCircle.reset(); mPathCircle.addCircle(centerX, centerY, Math.min(halfWidth, halfHeight), Path.Direction.CW); mPathCircle.close(); updateRectangleBorder(); updateCircleBorder(); } // helper reusable var, just IGNORE private int save; @Override protected void dispatchDraw(Canvas canvas) { save = canvas.save(); canvas.clipPath(mIsCircleShape ? mPathCircle : mPathCorners); super.dispatchDraw(canvas); canvas.restoreToCount(save); if (mShowBorder) { canvas.drawPath(mIsCircleShape ? mPathCircleBorder : mPathCornersBorder, mPaint); } } private void updateCircleBorder() { // border path for circle mPathCircleBorder.reset(); mPathCircleBorder.addCircle(centerX, centerY, Math.min(halfWidth - mBorderHalf, halfHeight - mBorderHalf), Path.Direction.CW); mPathCircleBorder.close(); } private void updateRectangleBorder() { // border path for rectangle rectBorder.left = rect.left + mBorderHalf; rectBorder.top = rect.top + mBorderHalf; rectBorder.right = rect.right - mBorderHalf; rectBorder.bottom = rect.bottom - mBorderHalf; mPathCornersBorder.reset(); mPathCornersBorder.addRoundRect(rectBorder, mCornerRadius - mBorderHalf, mCornerRadius - mBorderHalf, Path.Direction.CW); mPathCornersBorder.close(); } } 

在布局将是这样的:

 <com.example.yourpackage.RoundedLayout android:id="@+id/maplayout" android:layout_width="match_parent" android:layout_height="200dp" android:layout_margin="20dp"> <fragment android:id="@+id/map" android:name="com.google.android.gms.maps.SupportMapFragment" android:layout_width="match_parent" android:layout_height="200dp" tools:context="com.example.yourpackage.MapsMarkerActivity"/> </com.example.yourpackage.RoundedLayout> 

在代码中可以像这样一个带有边框的圆形:

  RoundedLayout rl = (RoundedLayout) findViewById(R.id.maplayout); rl.setShapeCircle(true); rl.showBorder(true); rl.setBorderWidth(2); 

这个布局可以用来形成任何视图。

这是令人难以置信的谷歌如何不能够为其android API做出主pipe(可用)完整的演示。

继@Nouman_Hanif后,我结束了一个看起来相当不错的解决scheme。

map_rounded_corner_overlay.xml:

 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <stroke android:width="1dp" android:color="@color/white" /> <corners android:radius="<your_desired_view_corner_radius>"/> </shape> 

我的地图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"> <fragment android:id="@+id/map" android:name="com.google.android.gms.maps.SupportMapFragment" android:layout_margin="1dp" android:layout_width="match_parent" android:layout_height="match_parent" /> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/map_rounded_corner_overlay" /> </RelativeLayout>