從未如此驚豔!你好,SuperTextView

image

簡介

歡迎使用SuperTextView,這篇文檔將會向你展現如何使用這個控件來提升你構建項目的效率。
Coverjava

SuperTextView繼承自TextView,它可以大量的減小布局的複雜程度,而且使得一些常見的效果變得十分容易實現且高效。同時,它內置了動畫驅動,你只須要合理編寫Adjuster,而後startAnim()就能夠看到預期的動畫效果。它僅僅是一個控件,因此你能夠不費吹灰之力的在你的項目中集成使用。android

特色

  1. 你今後沒必要再爲背景圖編寫和管理大量<shape>文件了。git

  2. 從新優化的狀態圖功能使得你可以精確的控制狀態圖的大小,以及在SuperTextView中的位置。github

  3. 支持設置圓角,而且可以精確的控制圓角位置。canvas

  4. 可以輕鬆的實現控件邊框效果。app

  5. 支持文字描邊,這使得空心文字效果成爲了可能。maven

  6. 內置動畫驅動,你只需配合Adjuster合理的使用便可。ide

  7. Adjuster的出現,使得你對控件的繪製過程具備了掌控權,良好的設計使得它可以完美的實現絕大部分你腦海中的效果。佈局

使用指南

支持的屬性

SuperTextView十分方便的支持在xml中直接設置屬性,而且你可以當即看到效果。就像你平時使用TextView同樣方便。gradle

<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();

圓形和邊框

image

爲了實現上圖效果,一般你須要編寫和管理大量的<shape>文件。如今你只須要在xml或代碼中對SuperTextView直接進行設置便可。

不簡單的圓角

image

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

神奇的文字描邊

image

文字描邊從未如此簡單!

高效的狀態圖

image

不一樣於原生的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頻繁發生。相關知識你能夠看看個人這兩篇文章:

響應觸摸事件

若是你重載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()來啓動/中止動畫。

link

如你所見,上面的效果就是經過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效果。

指定Adjuster的層級

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

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

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

三種類型的Opportunity示意圖。

image

默認值是Opportunity.BEFORE_TEXT。即第二張圖的示例。

事實上,只要你願意,SuperTextView就至關於一張畫布,你能夠在上面任意的揮灑你的創意。它可以讓你專一於創做,而不用去在乎編寫那些無用麻煩的代碼。

如何開始使用

  • 若是你喜歡SuperTextView,但願能順手在Github點個star哦!

  • 抽出空餘時間寫文章分享須要動力,還請各位看官動動小手點個贊,給我點鼓勵?

  • 我一直在不按期的創做新的乾貨,想要上車只需進到個人【我的主頁】點個關注就行了哦。發車嘍~

方法一

在你的build.gradle中加入:

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

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

方法二

你能夠Clone個人【Github倉庫https://github.com/chenBingX/SuperTextView】,而後在Library包下找到SuperTextViewattrs.xml,複製到你的項目中。

如今,你能夠開始使用SuperTextView了。

點擊這裏跳轉SuperTextView項目地址。https://github.com/chenBingX/SuperTextView

相關文章
相關標籤/搜索