自定义形状的阴影 [英] Shadow of a custom shape

问题描述

我必须根据以下设计实现横幅:

I have to implement a banner according to the following designs:

这里的复杂在于圆形logo的阴影，logo圆圈的阴影是banner矩形卡片阴影的延续.阴影的边界如下图所示:

The complexity here is in the shadow of the round logo, the shadow of the logo circle is the continuation of the shadow of the rectangular card of the banner. The border of the shadow is outlined in the following image:

当然，阴影不应该投射在卡片顶部下方的表面上.此外，徽标中心与卡片边框有一些偏移.

Of course the shadow shouldn't be casted on the surface below the top side of the card. Also the logo center has some offset from the border of the card.

我怎样才能达到这个效果?标准的 android 形状不允许形成这样的轮廓.手动绘制所有内容似乎是解决问题的过于复杂的决定.我们有 minSdkVersion 21.

How can I achieve this effect? Standard android shapes doesn't allow to form such a contour. Drawing everything manually seems to be too complex decision for the problem. We have minSdkVersion 21.

推荐答案

你可以用这个技巧来实现

You can achieve it using this trick

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">



    <androidx.cardview.widget.CardView
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="20dp"
        app:cardCornerRadius="56dp"
        app:cardElevation="16dp"
        android:layout_width="56dp"
        android:layout_height="56dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <de.hdodenhof.circleimageview.CircleImageView
                android:layout_width="match_parent"
                android:src="@color/colorPrimary"
                android:layout_height="match_parent"/>
        </LinearLayout>
    </androidx.cardview.widget.CardView>


    <androidx.cardview.widget.CardView
        app:cardElevation="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="48dp"
        android:layout_width="350dp"
        android:layout_height="500dp">

        <LinearLayout
            android:layout_marginTop="-28dp"
            android:layout_gravity="center_horizontal"
            android:layout_width="56dp"
            android:layout_height="56dp">
            <de.hdodenhof.circleimageview.CircleImageView
                android:layout_width="match_parent"
                android:src="@color/colorPrimary"
                android:layout_height="match_parent"/>
        </LinearLayout>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout> 

结果将是:

主要思想创建两个带有图像的卡片视图，一个在主卡片下，另一个在卡片视图中，并使用边距使看起来像一个圆圈.

The main idea create two cardview with images, one under the main card and another one in the cardview and using margins make the look like one circle.

这篇关于自定义形状的阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！