Android使用shape繪制陰影圖層陰影效果示例

更新時間：2018年06月08日 10:03:23 作者：York_zhang

本篇文章主要介紹了Android使用shape繪制陰影圖層陰影效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近在項目中用到一個比較有意思的陰影特效

從上面的效果圖上可以發(fā)現(xiàn)在圖片的右、下有一個陰影的特效，通過這個陰影效果明顯會使得這個提示文本有一種立體的觀感。瞬間高大上有木有？

基于以上UI效果，有兩種最基本的實現(xiàn)方式：UI給出陰影底圖和程序猿自我實現(xiàn)兩種。

在這里UI設(shè)計師給出陰影底圖的方式我們就不做討論了，我們來看下程序猿自我實現(xiàn)的方式怎么做。

首先我們來分析一下上面UI效果，我們不難發(fā)現(xiàn)其實上圖所示的ui效果本質(zhì)上可以看成兩個圖層的疊加，那么有的小伙伴就要說了不就是兩個圖層的疊加嘛，用畫筆（paint）和畫布（cavns）來畫就好了。但就我個人而言我覺得用畫筆來畫這種方式有點麻煩了。我們可以想到的另一個神器shape，我們用兩個shape來疊加不就好了嗎？說干就干，直接上代碼：

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
 
  <!-- 第一層 上部和左部偏移一定距離-->  
  <item 
    android:left="2.66dp" 
    android:top="2.66dp"> 
    <shape> 
      <solid android:color="#f5f5f5" /> 
      <!-- 描邊 --> 
      <stroke 
        android:width="1dp" 
        android:color="#f5f5f5" /> 
    </shape> 
  </item> 
  <!-- 第二層 下部和有部偏移一定距離--> 
  <item 
    android:bottom="2.66dp" 
    android:right="2.66dp"> 
    <shape> 
      <solid android:color="#ffffff" /> 
      <!-- 描邊 --> 
  
      <stroke android:width="0.33dp" android:color="#dedede" /> 
    </shape> 
  </item>  
</layer-list>

是不是實現(xiàn)起來超簡單。也許有些初學(xué)者可能會有疑惑，你說解決了就解決了?。亢冒?，別急。照顧初學(xué)者的感受，我這里給出它的詳細使用方法：

1、在res/drawable目錄下新建一個文件，這個文件內(nèi)容就是如上的代碼，文件名就隨你喜歡了，但我們最好還是按照命名規(guī)則來的好(姑且定義為tips_shadow_bg.xml)

2、在布局文件內(nèi)所需要使用該效果的控件內(nèi)設(shè)置background為這個drawable即可

如:

<textview  
  android:id="@+id/textview1"  
  android:layout_width="match_parent"  
  android:layout_height="wrap_content" 
  android:text="使用shape繪制陰影圖層陰影效果" 
  android:background="@drawable/tips_shadow_bg">         
 </textview>

至此，大功告成！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: