美文网首页
使用layer-list实现一个伪阴影效果

使用layer-list实现一个伪阴影效果

作者: GiottoYLY | 来源:发表于2020-12-02 22:22 被阅读0次

原文:利用layer-list创建阴影效果等

使用layer-list,嵌套多个item,每一个item都设置一个很浅的带透明度的色值,由外到内层叠递进

下图我使用的是相同的Drawable文件,只是在灰色的背景上,显示出来就是一个阴影效果,放在一个带颜色的背景图上,就能看到层次咯--__--

蓝色背景图上的层次感很明显,下边灰色底的就有阴影效果了

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:id="@+id/test_demo1_tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="activity_test_demo1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/colorPrimaryDark">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_white_bg_add_shadow"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第一行"
                android:textSize="14sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="我是第二行"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="那我是第三行咯"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="行吧,我就是第四行"
                android:textSize="12sp" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_white_bg_add_shadow"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv1_item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="第一行"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/tv2_item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="我是第二行"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/tv3_item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="那我是第三行咯"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/tv4_item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="行吧,我就是第四行"
                android:textSize="12sp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

这里就是伪阴影的Drawable文件
drawable下的shape_white_bg_add_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--由外向内-->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="2dp" />
            <solid android:color="#10eeeeee" />
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="3dp"
                android:top="3dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#20eeeeee" />
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="3dp"
                android:top="3dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#30eeeeee" />
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="3dp"
                android:top="3dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="3dp"
                android:top="3dp" />
            <corners android:radius="3dp" />
            <solid android:color="#40eeeeee" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#50eeeeee" />
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="3dp"
                android:top="3dp" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="3dp"
                android:top="3dp" />
            <solid android:color="#60eeeeee" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="3dp" />
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>
</layer-list>

相关文章

网友评论

      本文标题:使用layer-list实现一个伪阴影效果

      本文链接:https://www.haomeiwen.com/subject/djeywktx.html