Android layer实现圆角阴影

大话swift

发布于 2019-10-22 15:26:02

1.7K0

发布于 2019-10-22 15:26:02

分析Android的采用layer-list效果实现圆角阴影背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!--    先整个背景设置为灰色，然后上层叠加一个白色的，bottom right进行偏移不去遮挡底部的layer-->
    <item
        android:left="3dp"
        android:top="3dp">
        <shape>
            <solid android:color="#b4b5b6" />
        </shape>
    </item>
    <item android:bottom="6dp" android:right="3dp">
        <shape>
            <solid android:color="#fff"/>
        </shape>
    </item>
    <item>
        <shape>
<!--            shape 使用solid的填充内部-->
<!--            <solid android:color="#0099CC" />-->

            <corners android:radius="50dp"/>
<!--            stroke描边-->
            <stroke android:width="1dp" android:color="#000000"/>
        </shape>
    </item>
</layer-list>

自带预览效果

我们看看怎么使用

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/layer_shape"
        android:gravity="center"
        android:minHeight="55dp"
        android:text="shape" />

在drawable的那个layer布局xml中采用item的方式将各个图形控制分开，依照层级堆叠

1 使用shape设置背景为gray，同时在left top留出3dp的空间，也就是进行偏移，其余的空间部分涂成gray的颜色

<item
        android:left="3dp"
        android:top="3dp">
        <shape>
            <solid android:color="#b4b5b6" />
        </shape>
    </item>

2 在1的上层添加一个shape涂成白色--bottom预留6dp，right预留3dp

 <item android:bottom="6dp" android:right="3dp">
        <shape>
            <solid android:color="#fff"/>
        </shape>
    </item

通过 1 2 我们可以可到一个右侧和底部有阴影的晕的效果

3 在 12之上叠加在叠加一个shape---设置圆角半径为50dp，stroke描边宽为1dp

 <item>
        <shape>
<!--            shape 使用solid的填充内部-->
<!--            <solid android:color="#0099CC" />-->

            <corners android:radius="50dp"/>
<!--            stroke描边-->
            <stroke android:width="1dp" android:color="#000000"/>
        </shape>
    </item>

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-10-20，如有侵权请联系 cloudcommunity@tencent.com 删除

xml