您的位置:首页 > 其它

anroid边框阴影-圆角阴影-渐变阴影

2017-04-25 22:16 218 查看
anroid给边框加阴影只能对内阴影,没有给边框对外加阴影,在自定义shape中增加一层或多层,并错开,即可显示阴影效果。

给边框加阴影可使用<layer-list
 多图层叠加,但是对于圆角边框阴影来讲就复杂点,特别还是渐变色阴影就更难玩了,如下具体介绍。

1.圆角阴影效果(内阴影),不加渐变色,第一层渐变色其实没啥用,是对整个边框渐变,2dp的阴影还是一个颜色。

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- bottom shadow 第一层也就是最外那层 -->

<item >

<!left="1dp"  距离左边1dp -->

 <shape android:shape="rectangle" > 

<gradient android:type="linear" 

android:centerX="0.5" 

android:centerY="0.5" 

android:angle="90" 

android:startColor="#1A000000" 

android:centerColor="#00000000" 

android:endColor="#1A000000" /> 

<corners android:radius="3.33dp" /> 

</shape>

</item>

<!-- content 最上面那层-->

<item android:bottom="2dp" >

<!android:bottom="1dp"  第一层下阴影的厚度 -->

 <shape android:shape="rectangle" > <solid android:color="#fffffe" /> <corners android:radius="3.33dp" /> </shape></item>

</layer-list>

 <layer-list> 

      <!-- 第一层 -->  

      <item android:left="4dp" android:top="4dp">

        <shape> 

          <solid android:color="#66000000"/>  

          <corners android:radius="30dip"/>  

          <!-- 描边 -->  

          <stroke android:width="1dp" android:color="#ffffffff"/> 

        </shape>

      </item>  

      <!-- 第二层 -->  

      <item android:bottom="4dp" android:right="4dp">

        <shape> 

          <solid android:color="#ff58bb52"/>  

          <corners android:radius="30dip"/>  

          <!-- 描边 -->  

          <stroke android:width="1dp" android:color="#ffffffff"/> 

        </shape>

      </item> 

    </layer-list>

由于渐变是对整个边框进行的,以上由于阴影厚度为2dp,几乎看不到渐变色。

2.矩形阴影效果,外阴影,如果是矩形阴影则可以显示渐变色,在边框下边再添加一个边框表示阴影,模拟外阴影效果。

<View

        android:layout_width="match_parent"

        android:layout_height="2dp"

        android:background="@drawable/layout_shadow"

        >

<?xml version="1.0" encoding="utf-8"?>

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

     >

    <gradient

        android:type="linear"

        android:centerX="0.5"

        android:centerY="0.5"

        android:angle="270"

        android:startColor="#1A000000"

        android:endColor="#00000000"

        />

</shape>

3. 圆角渐变阴影,三层叠加

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- 第一层为背景色 -->

<item >

    <shape android:shape="rectangle" >

        <solid android:color="@color/color_f5f5f5" />

    </shape>

</item>

<!-- 第二层投影渐变色 -->

<item android:top="62dp"

   >

    <shape android:shape="rectangle" >

        <!-- from top to bottom -->

        <gradient

            android:type="linear"

            android:centerX="0.5"

            android:centerY="0.5"

            android:angle="270"

            android:startColor="#33000000"

            android:centerColor="#1A000000"

            android:endColor="#00000000"

            />

        <!-- 4dp渐变 后2dp为10%透明度到完全透明 -->

        <corners android:bottomLeftRadius="5dp"

            android:bottomRightRadius="5dp"/>

    </shape>

</item>

    <!-- 第三层数据显示 -->

    <item android:bottom="2dp"

        >

        <shape android:shape="rectangle" >

           <solid android:color="@color/color_fffffe"/>

            <corners android:radius="3.33dp" />

        </shape>

    </item>

</layer-list>

<LinearLayout

    android:layout_marginTop="10dp"

    android:layout_marginLeft="12dp"

    android:layout_marginRight="12dp"

    android:paddingLeft="12dp"

    android:layout_width="match_parent"

    android:layout_height="66dp"

    android:background="@drawable/shape_corner"

    android:gravity="center_vertical"

    android:orientation="vertical">








                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  阴影