使用shape繪製陰影圖層陰影效果

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

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

       基於以上UI效果,有兩種最基本的實現方式:UI給出陰影底圖和程序猿自我實現兩種。

在這裏UI設計師給出陰影底圖的方式我們就不做討論了,我們來看下程序猿自我實現的方式怎麼做。

首先我們來分析一下上面UI效果,我們不難發現其實上圖所示的ui效果本質上可以看成兩個圖層的疊加,那麼有的小夥伴就要說了不就是兩個圖層的疊加嘛,用畫筆(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>

是不是實現起來超簡單。也許有些初學者可能會有疑惑,你說解決了就解決了啊?好吧,別急。照顧初學者的感受,我這裏給出它的詳細使用方法:

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

2、在佈局文件內所需要使用該效果的控件內設置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>

至此,大功告成!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章