Android開發之神奇的Fading Edge，讓你的View更有層次感！

標籤：textview   class   基礎   表示   動效   res   nts   new   roi   

最近在研究Android Framework層源碼，發現我們對源碼的理解應該建立在對API的理解之上，如果有一些API你沒用過，那麼即使你在源碼中見到這個東西都不知道是幹嘛的，更談不上理解了。一直以來我都很想把View的繪製方法draw詳細的走一遍，但是這裡涉及到的細節問題是在是太多了，因此，今天我們還是先來看看Fading Edge，為draw方法詳解繼續打基礎。

在這篇部落格之前，我已經陸續推出了五篇關於View繪製的文章，相信這五篇部落格對你理解本篇部落格會有協助。

1.View繪製詳解，從LayoutInflater談起

2.View繪製詳解(二)，從setContentView談起

3.View繪製詳解(三)，扒一扒View的測量過程

4.View繪製詳解(四)，諞一諞layout過程

5.View繪製詳解(五)，draw方法細節詳解之View的滾動/滑動問題

為什麼要說Fading Edge？這個在我們平時開發中並不怎麼起眼的API其實是View繪製過程中重要的一步，繞不過的坎！可是要理解源碼，我們就得Crowdsourced Security Testing道這個Fading Edge到底是幹什麼的？從字面來理解，這個是實現邊緣漸層效果的，OK，那我們先來看看：

我這裡以一個滾動的TexView為例，小夥伴們看到了這種帶陰影的效果。Fading Edge也可以使用在ListView上，效果類似。OK，那我們就先來看看上面這種效果怎麼實現。

一般來說，要想實現TextView的滾動效果，很多小夥伴首先想到的方法可能都是ScrollView中嵌套一個TextView，但是實際上，不這樣做我們依然可以實現TextView的滾動效果，我們先來看看上文中藍色TextView的滾動效果如何?：

    <TextView        android:id="@+id/tv"        android:layout_width="match_parent"        android:layout_height="128dp"        android:background="@color/colorPrimary"        android:fadingEdgeLength="50dp"        android:requiresFadingEdge="vertical"        android:text="@string/content"/>

fadingEdgeLength表示陰影部分的高度，requiresFadingEdge表示陰影的方向。方向可以是水平的，也可以是垂直的。水平效果我一會再說。當然，如果我們只是在xml檔案中這樣寫，TextView還是無法滾動起來，還需要在Activity中添加如下一行代碼，TextView才能滾動起來，如下：

tv.setMovementMethod(new ScrollingMovementMethod());

當然，我們也可以藉助ScrollView讓TextView滾動起來，這個時候只需把Fading Edge相關的屬性添加到ScrollView中即可：

    <ScrollView        android:layout_width="match_parent"        android:layout_height="128dp"        android:layout_marginTop="20dp"        android:fadingEdgeLength="50dp"        android:requiresFadingEdge="vertical">        <TextView            android:layout_width="match_parent"            android:layout_height="72dp"            android:scrollbars="vertical"            android:text="@string/content"/>    </ScrollView>

相關屬性的含義不用我再說了吧！

OK，接下來我們再來看一個水平方向上的效果：

越到末尾的時候字的顏色慢慢變淡直到消失。OK，那麼這個效果要怎麼實現呢？看下面：

    <TextView        android:id="@+id/tv"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:singleLine="true"        android:ellipsize="none"        android:background="@color/colorPrimary"        android:fadingEdgeLength="200dp"        android:requiresFadingEdge="horizontal"        android:text="@string/content"/>

OK，除此之外，最後我們再來看看Fading Edge在ListView中的使用吧。先來看看：

其實在Fading Edge使用時候，ListView中這種效果算是最容易實現的一種了，我們來看看代碼：

    <ListView        android:id="@+id/lv"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:fadingEdge="vertical"        android:fadingEdgeLength="200dp"        android:requiresFadingEdge="vertical"></ListView>

資料繫結就是普通的綁定方式，不贅述。

OK，這就是我們View中Fading Edge的一個簡單使用，先記錄下來，為後面全面分析draw方法打下基礎。

以上。

Android開發之神奇的Fading Edge，讓你的View更有層次感！