Android 自定义多边不同颜色阴影布局（轻拟物风）

GitHub 链接

https://github.com/ludoven/ShadowLayout

 

 

最近写项目的时候，UI小姐姐给的图中需要实现多边阴影不同颜色的效果。

官方的实现不了，

用shape感觉很难实现而且粗糙，也试过给切的阴影图，然后制作成.9图，也很难看。

Github上没有类似的阴影效果，大部分都是四边阴影同颜色。

没办法，找到github上一个项目进行改造。https://github.com/cjlemon/Shadow

 

布局代码

  <com.ludoven.shadowlayout.ShadowContainer
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:containerDeltaLength="10dp"
        app:containerShadowRadius="10dp"
        app:containerCornerRadius="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:enable="true">
    <TextView
        android:gravity="center"
        android:background="@drawable/radius_10"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="Hello World!"
     />
    </com.ludoven.shadowlayout.ShadowContainer>

实现效果: 如图 左上 和右下 有圆角阴影，而右上左下圆角没有阴影

实现思路:  画两个三角形 ，左上右下各一个 ，并且把圆角的距离留出来。

关键代码：

            Path drawablePath = new Path();
            drawablePath.arcTo(new RectF(left, top, left + 2 * cornerRadius, top + 2 * cornerRadius), -90, -90, false);
            drawablePath.lineTo(left, bottom-cornerRadius );
            drawablePath.lineTo(right-cornerRadius, top );
            drawablePath.close();
            canvas.drawPath(drawablePath, mShadowPaint);


            Path drawablePath2 = new Path();
            drawablePath2.arcTo(new RectF(left+ cornerRadius , bottom , left+ 2 * cornerRadius , bottom), 180, -90, false);
            drawablePath2.lineTo(right - cornerRadius, bottom);
            drawablePath2.arcTo(new RectF(right - 2 * cornerRadius, bottom - 2 * cornerRadius, right, bottom), 90, -90, false);
            drawablePath2.lineTo(right, top  + cornerRadius);
            drawablePath2.close();
            canvas.drawPath(drawablePath2, mShadowPaint1);