Android layer实现圆角 阴影

2019-10-22 15:26:02 浏览数 (1)

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

代码语言:javascript复制
<?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>

自带预览效果

我们看看怎么使用

代码语言:javascript复制
    <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的颜色

代码语言:javascript复制
<item
        android:left="3dp"
        android:top="3dp">
        <shape>
            <solid android:color="#b4b5b6" />
        </shape>
    </item>

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

代码语言:javascript复制
 <item android:bottom="6dp" android:right="3dp">
        <shape>
            <solid android:color="#fff"/>
        </shape>
    </item

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

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

代码语言:javascript复制
 <item>
        <shape>
<!--            shape 使用solid的填充内部-->
<!--            <solid android:color="#0099CC" />-->

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

0 人点赞