美文网首页
圆角与阴影 State List + Layer List +

圆角与阴影 State List + Layer List +

作者: chauI | 来源:发表于2016-11-14 14:57 被阅读347次

实现卡片的阴影效果,且点击时跟着变化

  • 自定义xml文件
  • selector + shape +layer-list + State List
  • 引用
  • 渐变阴影
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 点击之后 -->
        <item android:state_pressed="true">
                <layer-list><item android:left="-1dp" android:top="0.5dp" android:bottom="1.8dp"><shape>
                        <solid android:color="#fff" />
                        <corners android:radius="5dp" />
                        <stroke android:width="1dp" android:color="#ffffffff" />
                </shape></item></layer-list>
        </item>

        <item><layer-list>
                <!-- 第一层,先绘制阴影 -->
                <item android:left="0.5dp" android:top="0.5dp"><shape>
                       <solid android:color="#665e5e5e" />
                       <corners android:radius="5dp" />
                       <!-- 描边
                                              <stroke android:width="1dp" android:color="#ffffffff" />
                                              -->
                </shape></item>

                <!-- 第二层,看到的框 -->
                 <item android:bottom="1dp" android:right="0dp"><shape>
                       <solid android:color="#fff" />
                       <corners android:radius="5dp" />
                       <stroke android:width="1dp" android:color="#ffffffff" /> 
                 </shape></item>
       </layer-list></item>

</selector>

根据不同状态写出多个<item>,无论是editor、button或者是其他的布局与控件,
直接用 background 属性来引用:

android:background="@drawable/xxxxx"

下面是解析上面不同标签的作用:

<selector>

根据不同的选定状态来定义不同的现实效果
分为四大属性:
android:state_selected 选中
android:state_focused 获得焦点
android:state_pressed 点击
android:state_enabled 设置是否响应事件,指所有事件
android:state_window_focused 默认时的背景图片

<shape> 画布

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <!-- 圆角  -->
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <!-- 渐变颜色  -->
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <!-- 填充颜色  -->
    <solid
        android:color="color" />
    <!-- 笔画/边框  -->
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

<layer-list> 将多个图片或画布按照顺序层叠起来

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>

item里的属性是相对的偏移距离

渐变的阴影

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <layer-list>
            <!-- 阴影 -->
            <item android:gravity="bottom">
                <shape>
                    <size android:height="1.5dp"/>
                    <padding android:bottom="1.5dp"/>
                    <gradient
                        android:angle="-90"
                        android:endColor="@color/transparent"
                        android:startColor="#d1d1d1"/>
                </shape>
            </item>
            <item android:gravity="top">
                <shape>
                    <size android:height="1.5dp"/>
                    <padding android:top="1.5dp"/>
                    <gradient
                        android:angle="90"
                        android:endColor="@color/transparent"
                        android:startColor="#d1d1d1"/>
                </shape>
            </item>

        </layer-list>
    </item>
</selector>

相关文章

网友评论

      本文标题:圆角与阴影 State List + Layer List +

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