Android開源:SuperTextView-使用這個控制元件來提高你構建專案的效率

weixin_33749242發表於2017-05-14

簡介

SuperTextView 繼承 自 TextView,它能夠大量的減少佈局的複雜程度,並且使得一些常見的效果變得十分容易實現且高效。同時,它內建了動畫驅動,你只需要合理編寫 Adjuster ,然後 startAnim() 就可以看到預期的動畫效果。它僅僅是一個控制元件,所以你可以不費吹灰之力的在你的專案中整合使用。

特點

你從此不必再為背景圖編寫和管理大量<shape>檔案了。

重新優化的 狀態圖功能 使得你能夠精確的控制狀態圖的大小,以及在 SuperTextView 中的位置。

支援設定圓角,並且能夠精確的控制圓角位置。

能夠輕鬆的實現控制元件邊框效果。

支援文字描邊,這使得空心文字效果成為了可能。

內建動畫驅動,你只需配合 Adjuster 合理的使用即可。

Adjuster的出現,使得你對控制元件的繪製過程具有了掌控權,良好的設計使得它能夠完美的實現絕大部分你腦海中的效果。

使用指南

支援的屬性

SuperTextView十分方便的支援在 xml 中直接設定屬性,並且你能夠立即看到效果。就像你平時使用 TextView 一樣方便。

//SuperTextView
android:layout_width="50dp"
android:layout_height="50dp"
//設定圓角。會同時作用於填充和邊框(如果邊框存在的話)。
//如果要設定為圓形,只需要把該值設定為寬或長的1/2即可。
app:corner="25dp"
//設定左上角圓角
app:left_top_corner="true"
//設定右上角圓角
app:right_top_corner="true"
//設定左下角圓角
app:left_bottom_corner="true"
//設定右下角圓角
app:right_bottom_corner="true"
//設定填充顏色
app:solid="@color/red"
//設定邊框顏色
app:stroke_color="@color/black"
//設定邊框的寬度。
app:stroke_width="2dp"
//放置一個drawable在背景層上。預設居中顯示。
//並且預設大小為SuperTextView的一半。
app:state_drawable="@drawable/emoji"
//設定drawable的顯示模式。可選值如下:
// left、top、right、bottom、center(預設值)、
//leftTop、rightTop、leftBottom、rightBottom、
//fill(充滿整個SuperTextView,此時會使設定drawable的大小失效)
app:state_drawable_mode="center"
//設定drawable的height
app:state_drawable_height="30dp"
//設定drawable的width
app:state_drawable_width="30dp"
//設定drawble相對於基礎位置左邊的距離
app:state_drawable_padding_left="10dp"
//設定drawble相對於基礎位置上邊的距離
app:state_drawable_padding_top="10dp"
// boolean型別。是否顯示drawable。
//如果你想要設定的drawable顯示出來,必須設定為true。
//當不想讓它顯示時,再設定為false即可。
app:isShowState="true"
//是否開啟文字描邊功能。
//注意,啟用這個模式之後通過setTextColor()設定的顏色將會被覆蓋。
//你需要通過text_fill_color來設定文字的顏色。
app:text_stroke="true"
// 文字的描邊顏色。預設為Color.BLACK。
app:text_stroke_color="@color/black"
// 文字描邊的寬度。
app:text_stroke_width="1dp"
// 文字填充的顏色。預設為Color.BLACK。
app:text_fill_color="@color/blue"
// boolean型別。是否啟用Adjuster功能。
//具體幹什麼,需要在Java中為SuperTextView實現一個Adjuster。
//當你啟用這個功能而沒有實現自己的Adjuster時,
//SuperTextView會啟用預設的Adjuster。它會按照一定的規則調整文字大小。
app:autoAdjust="true"
/>

以上這些屬性,均可以在 Java 中進行動態的設定。同時也能夠獲得它們的值。例如:

mSuperTextView.setCorner(10);mSuperTextView.getCorner();

圓形和邊框:

1554975-b3cd751b54aba1d1.png

為了實現上圖效果,通常你需要編寫和管理大量的<shape>檔案。現在你只需要在 xml 或程式碼中對 SuperTextView 直接進行設定即可。

不簡單的圓角

1554975-fc9fd7eaef4c45b1.png

不同於簡單的圓角, SuperTextView 支援精確的控制圓角的位置。一個、兩個、三個都沒問題。一切由你掌控。

神奇的文字描邊

1554975-bff52d18f848d0d4.png

文字描邊從未如此簡單!

高效的狀態圖

1554975-63271dea49de0d51.png

不同於原生的 Drawable, SuperTextView 對於 Drawable 提供了更多精細化的控制操作。你能夠輕鬆的指定 Drawable 大小以及位置,只需一個屬性就能搞定。

相信你一定深有感觸,想要實現上圖中的效果,往往需要巢狀多層佈局(一般 3 層吧?)。而 SuperTextView 只需一個控制元件,並且十分簡單高效的就能實現。它能夠大量的減少你的App 中的佈局複雜程度,減少檢視樹的繪製時間。

炸裂的 Adjuster

Adjuster被設計用來在 SuperTextView 的繪製過程中插入一些操作。這具有非常重要的意義。比如,預設實現的 DefaultAdjuster 能夠動態的調整文字的大小。當然,你可以用它來實現各種各樣的效果。

想要 Adjuster 生效,你必須呼叫 SuperTextView.setAutoAdjust(true) 來啟用 Adjuster 功能。當然,你可以所以方便的停止,通過呼叫 SuperTextView.setAutoAdjust(false) 。並且,你需要注意呼叫順序,因為一旦呼叫了 SuperTextView.setAutoAdjust(true) ,而Adjuster 沒有被設定的話,將會啟用預設的 DefaultAdjuster (它能夠動態的調整文字大小),直到你設定了你自己的 Adjuster

干預控制元件的繪製

實現一個 Adjuster 需要繼承 SuperTextView.Adjuster,並且實現 adjust(SuperTextView v, Canvas canvas) 方法。Adjuster.adjust() 會在每次繪製過程中被呼叫,這意味著你能夠不可思議的從外部干預控制元件的繪製過程。
public class YourAdjuster extends SuperTextView.Adjuster {

@Override
protected void adjust(SuperTextView v, Canvas canvas) {
//do your business。
}
}

注意,如果開啟動畫,你必須十分謹慎的編寫 adjuster() 中的程式碼。因為動畫會以 60 幀/每秒的速度進行繪製。這意味著,這個方法每秒會被呼叫 60 次!所以,千萬不要在這個方法中重複的建立物件,會卡爆的!原因是短時間的大量將會引起【記憶體抖動】,導致 GC頻繁發生。相關知識你可以看看我的這兩篇文章:

  • Android記憶體基礎——記憶體抖動

http://www.jianshu.com/p/69e6f894c698

  • 用兩張圖告訴你,為什麼你的App會卡頓?

http://www.jianshu.com/p/df4d5ec779c8

響應觸控事件

如果你過載 Adjuster 的 onTouch(SuperTextView v, MotionEvent event) 方法,你將能夠獲得 SuperTextView 的觸控事件。這是重要的一點,如果你想持續的對 SuperTextView 的觸控事件進行處理,你必須使 onTouch() 返回true。否則你只能接收到一個 ACTION_DOWN 事件,而不是一個事件流。

public class YourAdjuster extends SuperTextView.Adjuster {

@Override
protected void adjust(SuperTextView v, Canvas canvas) {
//do your business。
}

@Override
public boolean onTouch(SuperTextView v, MotionEvent event) {
//you can get the touch event.
//If want to get a series of touch event, you must return true here.
}

 }

如此驚豔的效果

得益於 SuperTextView 內建的動畫驅動,你能夠結合 Adjuster 來實現難以置信的動畫效果。一切只需要在你合理的編寫好 Adjuster 後,呼叫 startAnim() 和 stopAnim() 來啟動/停止動畫。


1554975-27f228a732c5d737.gif

如你所見,上面的效果就是通過 Adjuster 來實現的。並且這種 拔插式 的設計,使得你能夠隨時在同一個 SuperTextView 上使用新的 Adjuster,你所有需要做的事情就是建立一個新的 Adjuster,然後呼叫 setAdjuster() 。

之前 @Alex_Cin 希望看到 Ripple 漣漪效果,所以在 RippleAdjuster.java 中,我演示瞭如何使用 Adjuster 和動畫驅動配合實現上圖的 Rippler 漣漪效果。 【RippleAdjuster.java連結: https://github.com/chenBingX/SuperTextView/blob/master/app/src/main/java/com/coorchice/supertextview/SuperTextView/Adjuster/RippleAdjuster.java

看,你可以使用 Adjuster 實現自己的 Ripple 效果。

指定A djuster 的層級

Adjuster 貼心的設計了控制作用層級的功能。你可以通過 Adjuster.setOpportunity(Opportunity opportunity) 來指定 Adjuster 的繪製層級。

在 SuperTextView 中,繪製層級被從下到上分為:背景層、Drawable 層、文字層 3 個層級。通過 Opportunity 來指定你的 Adjuster 想要插入到那個層級間。

public enum Opportunity {
BEFORE_DRAWABLE, //背景層和Drawable層之間
BEFORE_TEXT, //Drawable層和文字層之間
AT_LAST //最上層}

三 種型別的 Opportunity 示意圖。

1554975-5e9b59ccd2442f76.png

預設值是 Opportunity.BEFORE_TEXT 。即第二張圖的示例。

事實上,只要你願意, SuperTextView 就相當於一張畫布,你可以在上面任意的揮灑你的創意。它能夠讓你專注於創作,而不用去在意編寫那些無用麻煩的程式碼。

如何開始使用

方法一

在你的build.gradle中加入:

allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}

dependencies {
compile 'com.github.chenBingX:SuperTextView:v1.1'
}

方法二

你可以Clone我的【Github倉庫https://github.com/chenBingX/SuperTextView】,然後在Library包下找到SuperTextViewattrs.xml,複製到你的專案中。
現在,你可以開始使用SuperTextView了。

相關文章