制作圆形SupportMapFragment

Question

在 Android API 28 上，使用 Kotlin，我尝试将

SupportMapFragment

设为圆形，这样我就可以使其周围有动画，但是，当我尝试将

clipToOutline

设为 true 时，它仍然保持正方形。我怎样才能把它变成一个圆圈？谢谢！

//截图预览

//XML

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/customerMapView"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="16dp"
    android:background="@drawable/circle_mask"
    android:clipToOutline="true"
    android:contentDescription="@string/customer_map_view"
    app:layout_constraintEnd_toEndOf="@id/pulsatingCircle"
    app:layout_constraintStart_toStartOf="@id/pulsatingCircle"
    app:layout_constraintTop_toTopOf="@id/pulsatingCircle" />

//circle_mask

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/transparent" />
    <item>
        <shape android:shape="oval">
            <size
                android:width="300dp"
                android:height="300dp" />
        </shape>
    </item>
</layer-list>

// Kotlin 代码

private fun initMap() {
    val mapView = supportFragmentManager.findFragmentById(R.id.customerMapView) as SupportMapFragment

    mapView.view?.outlineProvider = ViewOutlineProvider.BACKGROUND
    mapView.view?.clipToOutline = true
}

我尝试在 xml 和 Kotlin 文件中将

clipToOutline

设置为 true，但在 xml 中，我需要使用 API 32。

Answer 1

您可以使用 CardView。

由于宽度和高度是固定的，因此您可以传递特定的角半径，使其看起来像圆形，然后就完成了！

<com.google.android.material.card.MaterialCardView
        android:id="@+id/mapCardLayout"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:cardBackgroundColor="@android:color/transparent"
        app:cardCornerRadius="100dp"
        app:cardElevation="0dp">

        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/customerMapView"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </com.google.android.material.card.MaterialCardView>

如果您没有特定的宽度或高度，那么您可以使用具有相同宽度高度的自定义视图来获得像这样的正确圆圈，

import android.content.Context
import android.util.AttributeSet
import com.google.android.material.card.MaterialCardView

class CircleCardView : MaterialCardView {
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec)
    }
}

对于圆形外观，创建自定义样式属性并将其与卡片视图一起使用，如下所示，

在

style.xml

，

<style name="CustomCardCornerStyle" parent="@style/Widget.MaterialComponents.CardView">
        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay_card_corners</item>
    </style>
    
    <style name="ShapeAppearanceOverlay_card_corners" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

在你的

layout.xml

，

<com.demo.motiondemo.CircleCardView
        android:id="@+id/mapCardLayout"
        style="@style/CustomCardCornerStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@android:color/transparent"
        app:cardElevation="0dp">

        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/customerMapView"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </com.demo.motiondemo.CircleCardView>