你好， SuperTextView

【SuperTextView english document】
點(diǎn)擊此處，查看《SuperTextView 開發(fā)參考文檔》
點(diǎn)擊此處，查看詳細(xì)的《SuperTextView API文檔》

<img src="https://raw.githubusercontent.com/chenBingX/img/master/stv/SuperTextViewyuan.png" width=230 height=230 align=right alt="SuperTextView">

一直以來 SuperTextView 的使命，就是幫助 Android 開發(fā)者得心應(yīng)手的構(gòu)建 Android 應(yīng)用。

SuperTextView 是一個(gè)高效的、全能的、優(yōu)雅的 Android 控件。通過 SuperTextView ，你可以快速實(shí)現(xiàn)圓角背景，設(shè)置漸變色背景，給控件和文字描邊，為控件增加狀態(tài)圖，添加按壓時(shí)文字或背景變色效果，通過 Adjuster 模塊快速插入操作到控件繪制過程中，展示圖片，甚至可以直接從網(wǎng)絡(luò)上下載圖片展示...基本上涵蓋了 Android 日常開發(fā)中會用到的絕大部分效果。而實(shí)現(xiàn)這一切的代價(jià)，僅僅是給 SuperTextView 設(shè)置一個(gè)屬性。SuperTextView 可以幫助開發(fā)者高效、便捷、優(yōu)雅的完成 Android 應(yīng)用的開發(fā)。

image

近期更新

v3.1.1 - 誠意之作，SuperTextView

SuperTextView 被打造來幫助 Android 開發(fā)者更高效、更便捷、更優(yōu)雅的開發(fā) Android 應(yīng)用。

現(xiàn)在，這一誠意之作再次升級。全新的 SuperTextView 將向 Android 開發(fā)者開放更多可能性，當(dāng)然一如既往，SuperTextView 也帶來了更多高效的功能。

神奇的著色

image

SuperTextView 此次的升級，為 StateDrawable 增加了神奇而強(qiáng)大的著色能力。開發(fā)者可以輕松的改變一個(gè)圖標(biāo)的顏色，而不用再增加一個(gè)僅僅是顏色不同的圖標(biāo)到項(xiàng)目中。這項(xiàng)技術(shù)將為你的 Android 應(yīng)用程序帶來一次瘦身的機(jī)遇。

# 修改 drawable 的顏色
app:stv_state_drawable_tint="@color/gray"

# 修改 drawable2 的顏色
app:stv_state_drawable2_tint="@color/red"

只需要如此一行簡單的代碼，就能瞬間賦予一張圖片千變?nèi)f化的能力。想要任何色彩，當(dāng)然是你說了算。而這一切的發(fā)生，無需再引進(jìn)另外一張圖片。

在 Java 代碼中，有與之對應(yīng) set/get 函數(shù)，讓開發(fā)者可以在任何時(shí)候都能施展魔法，改變一張圖片的色彩。

七十二般變化

對 StateDrawable 的增強(qiáng)，不僅僅限于顏色的變換。SuperTextView 更被賦予了改變 StateDrawable 形態(tài)的能力。同樣的一張圖，開發(fā)者可以組合出無數(shù)種可能。

image

只需簡單的幾行代碼，你便可以隨心所欲的變換任何一張圖片。

# 修改 drawable 的旋轉(zhuǎn)角度
app:stv_state_drawable_rotate="90"

# 修改 drawable2 的旋轉(zhuǎn)角度
app:stv_state_drawable2_rotate="90"

無需復(fù)雜的代碼，SuperTextView 一如既往的簡潔、優(yōu)雅。

同樣，在 Java 代碼中，也提供了對應(yīng)的 set/get 函數(shù)。

這項(xiàng)能力，可以有效的幫助開發(fā)者將 Android 應(yīng)用的體積向著極致的方向壓縮。

精彩遠(yuǎn)不止于此

image

這就是漸變文字！

SuperTextView 所提供的可能是目前為止實(shí)現(xiàn)漸變文字最簡潔、優(yōu)雅的解決方案。只需要簡單的配置，就能實(shí)現(xiàn)酷炫的漸變文字效果。

# 是否啟用漸變色文字
app:stv_textShaderEnable="true"

# 設(shè)置文字的起始漸變色
app:stv_textShaderStartColor="@color/red"

# 設(shè)置文字的結(jié)束漸變色
app:stv_textShaderEndColor="@color/yellow"

# 設(shè)置文字的漸變的模式
# leftToRight：左 -> 右
# rightToLeft：右 -> 左
# topToBottom：上 -> 下
# bottomToTop：下 -> 上
app:stv_textShaderMode="leftToRight"

這些屬性也在 Java 中開放了 set/get 接口，便于開發(fā)者隨時(shí)動態(tài)的修改它們。

開放了新的 API

1. Adjuster 增加 onAttach、onDetach

Adjuster 增加了兩個(gè)新的函數(shù)：

  • onAttach()：當(dāng) Adjuster 被設(shè)置到一個(gè) SuperTextView 中時(shí)會被調(diào)用。
  • onDetach()：當(dāng) Adjuster 被從一個(gè) SuperTextView 中移除時(shí)會被調(diào)用。

通過在 Adjuster 中重寫這兩個(gè)函數(shù)，開發(fā)者可以在正確的時(shí)機(jī)進(jìn)行狀態(tài)注冊、初始化，或者取消注冊、釋放資源等操作。

public class MyAdjuster extends SuperTextView.Adjuster{

    @Override
    protected void adjust(SuperTextView superTextView, Canvas canvas) {
      
    }

    @Override
    public void onAttach(SuperTextView stv) {
      // 當(dāng) Adjuster 被加入一個(gè) SuperTextView 時(shí)會被調(diào)用
    }

    @Override
    public void onDetach(SuperTextView stv) {
      // 當(dāng) Adjuster 被從 SuperTextView 移除時(shí)會被調(diào)用
    }
}

2. 提供 getAdjusterList() 函數(shù)

這個(gè)函數(shù)可以讓開發(fā)者獲得一個(gè) SuperTextView 中的所有 Adjuster。如果 SuperTextView 中沒有 Adjuster 的話，將會返回 null。

?? 你必須重視這些變化

1. 屬性增加了 stv_ 前綴

現(xiàn)在，SuperTextView 的所有屬性都加上了前綴 stv_。

這樣做可以避免當(dāng)開發(fā)者引入的其它第三方庫時(shí)，與 SuperTextView 可能產(chǎn)生的屬性名沖突。

如果開發(fā)者目前正在使用一個(gè)此前版本的 SuperTextView，那么當(dāng)升級到新的版本后，需要在所有 xml 中的屬性前加上 stv_ 前綴。

得益于現(xiàn)代 IDE 的強(qiáng)大，開發(fā)者可以輕松的完成這些工作。就像下面這樣。

app:corner="10dp"

corner 是舊版本中的屬性名稱，升級到新版本后，需要在前面增加 stv_ 前綴，變?yōu)?stv_corner。

image

如果開發(fā)者使用的是 AndroidStudio，從 Edit > Find > Replace 打開批量替換對話框，然后按照下圖操作即可。

image

如果開發(fā)者的項(xiàng)目中只有 SuperTextView 使用了相同的命名空間（如 app），那么很幸運(yùn)，你可以直接將 app: 替換為 app:stv_ 即可。

2. setAdjuster(Adjuster) 已被移除

從 SuperTextView v2.0 版本開始，setAdjuster(Adjuster) 函數(shù)就被標(biāo)記為了將被移除的狀態(tài)，同時(shí)加入了新的函數(shù) addAdjuster(Adjuster) 作為替代。

在新的版本中，setAdjuster(Adjuster) 函數(shù)將被正式移除，如果開發(fā)者此前使用了該方法，請將其修改為 addAdjuster(Adjuster)。

如何開始 SuperTextView v3.1.1

dependencies {
     compile 'com.github.chenBingX:SuperTextView:v3.1.1'
}

v3.0 - 你期待已久的 SuperTextView

經(jīng)過一年多的不斷的聆聽、思考、探索、驗(yàn)證， SuperTextView 完成了多次迭代，改善了一些問題，新增了一些功能，不斷的完善，以帶給開發(fā)者更好的開發(fā)體驗(yàn)。

如今， SuperTextView 已經(jīng)具備了諸如圓角、邊框、描邊、按壓變色、多狀態(tài)圖、圓角圖、萬能的 Adjuster 、加載網(wǎng)絡(luò)圖片等一系列的常用功能。得益于此，開發(fā)者能夠輕松實(shí)現(xiàn)各種原本十分麻煩的效果，節(jié)省大量的開發(fā)時(shí)間，有效減少頁面的復(fù)雜度，降低項(xiàng)目維護(hù)成本。

寫代碼，本應(yīng)如此愉悅！

1. 鏈接云端的 SuperTextView

早在幾個(gè)月前，就開始有很多開發(fā)者向 CoorChice 建議，是否能夠讓 SuperTextView 具備加載網(wǎng)絡(luò)圖片的功能。其實(shí)這也是 CoorChice 很久之前就有考慮過的，但在 SuperTextView 的早期，完善其核心功能仍然是首要目標(biāo)，所以一直沒涉獵到圖片相關(guān)的功能。

直到上一個(gè)大版本，SuperTextView v2.0，CoorChie 才嘗試添加了圖片展示的功能。這使得SuperTextView 可使用的范圍得到了擴(kuò)大，同時(shí)針對圖片也推出了給圖片增加描邊、設(shè)置圓角、設(shè)置狀態(tài)圖等功能。相關(guān)使用文檔可到以下鏈接查閱：

【你好， SuperTextView】 - http://www.itdecent.cn/p/1b91e11e441d

這一次嘗試，獲得了開發(fā)者們不錯的反響，大家對于使用 SuperTextView 去展示處理圖片是有所期待的。上一個(gè)版本發(fā)布后，開發(fā)者們對于一個(gè)能展示網(wǎng)絡(luò)圖片的 SuperTextView 似乎更加的感興趣了。

那么，現(xiàn)在，你所期待已久的 SuperTextView 在此！

image

1.1 加載一張網(wǎng)絡(luò)圖片

顯示一張網(wǎng)絡(luò)圖片，在 SuperTextView 中只需要如下代碼：

SuperTextView stv_1 = (SuperTextView) findViewById(R.id.stv_1);
//填入圖片Url
stv_1.setUrlImage(url);

效果就如上圖中的第二個(gè)顯示頭像的例子一樣。

如果你希望將網(wǎng)絡(luò)圖片作為 SuperTextView 的 StateDrawable 來展示的話，完全沒問題。

//填入圖片Url
stv_1.setUrlImage(url, false);

第二個(gè)參數(shù)為 false 表示網(wǎng)絡(luò)圖片將不會被作為背景充滿整個(gè) SuperTextView，而是作為一個(gè)狀態(tài)圖。當(dāng)然，有關(guān)狀態(tài)圖的一切配置都將運(yùn)用到此。就像上圖中的第一個(gè)例子一樣，整個(gè)布局包括圖片、文字、背景都在一個(gè) SuperTextView 中被處理，從網(wǎng)絡(luò)下載的圖片被作為 StateDrawable 放到了圖中的位置。

1.2 SuperTextView 中圖片引擎

SuperTextView 為了保持依賴庫的純凈和盡可能小的體積，并沒有內(nèi)置任何的圖片加載框架。所以默認(rèn)情況，將使用內(nèi)置的一個(gè)簡易圖片引擎去下載圖片，確保開發(fā)者能夠正常使用展示網(wǎng)絡(luò)圖片的功能。

但 CoorChice 仍然建議開發(fā)者根據(jù)項(xiàng)目的具體情況，選擇一個(gè)目前正在使用的圖片加載框架，設(shè)置到 SuperTextView 中，以用來加載圖片。 SuperTextView 具備適配任意圖片加載框架的能力。下面 CoorChice 將通過 Glide 和 Picasso 的例子展示如何將現(xiàn)有的圖片框架安裝到 SuperTextView 中。

1.2.1 實(shí)現(xiàn)圖片引擎 Engine

在 SuperTextView 中，核心的圖片加載引擎被抽象成接口 Engine ，開發(fā)者需要根據(jù)所用的圖片框架，實(shí)現(xiàn)一個(gè) Engine。

  • Glide圖片加載框架
public class GlideEngine implements Engine {

  private Context context;

  public GlideEngine(Context context) {
        this.context = context;
  }

  @Override
  public void load(String url, final ImageEngine.Callback callback) {
        Glide.with(context).load(url).into(new SimpleTarget<GlideDrawable>() {
        @Override
        public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
            // 主要是通過callback返回Drawable對象給SuperTextView
            callback.onCompleted(resource);
        }
        });
    }
}
  • Picasso圖片加載框架
public class PicassoEngine implements Engine {

  private Context context;

  public PicassoEngine(Context context) {
        this.context = context;
  }

  @Override
  public void load(String url, final ImageEngine.Callback callback) {
        Picasso.with(context).load(url).into(new Target() {
        @Override
        public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
            // 主要是通過callback返回Drawable對象給SuperTextView
            callback.onCompleted(new BitmapDrawable(Resources.getSystem(), bitmap));
        }

        @Override
        public void onBitmapFailed(Drawable errorDrawable) {

        }

        @Override
        public void onPrepareLoad(Drawable placeHolderDrawable) {

        }
    });
  }
}
1.2.2 安裝圖片引擎 Engine

實(shí)現(xiàn)好 Engine 后，下一步就是要將其安裝到 SuperTextView 中。

CoorChice 建議可以在 Application的onCreate()中進(jìn)行安裝，這樣當(dāng)需要使用 SuperTextView 加載顯示網(wǎng)絡(luò)圖片的時(shí)候，就能夠用到三方圖片框架了。

public class STVApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();
    // 安裝圖片引擎
    ImageEngine.install(new GlideEngine(this));
    // ImageEngine.install(new PicassoEngine(this));
  }
}

一行代碼，輕松安裝。

需要注意的是，任何時(shí)候，后安裝的 Engine 實(shí)例總是會替換掉先前安裝的 Engine 實(shí)例，即 SuperTextView 只允許全局存在一個(gè) Engine 實(shí)例。

現(xiàn)在，你可以讓 SuperTextView 使用指定的三方圖片加載框架去加載圖片了。

image

2. 如何開始 SuperTextView v3.0

    dependencies {
       compile 'com.github.chenBingX:SuperTextView:v3.0.0'
    }

3. 其它

  • 修復(fù)一個(gè)動畫問題
  • 一些優(yōu)化

v2.0 - 未來，從現(xiàn)在開始

一直以來，CoorChice都心存一個(gè)設(shè)想，期待著能夠打造這樣一個(gè)控件：它能滿足你的大部分開發(fā)需求，展示文字、圖片、幾何、動畫、狀態(tài)，讓你使用一個(gè)控件就能高效的完成大部分開發(fā)工作。它是如此的強(qiáng)大，仿佛有心智一般，接受著你的輸入，按照你的心意，呈現(xiàn)出嘆為觀止的畫面。隨著【SuperTextView v2.0】的到來，我們離這個(gè)設(shè)想更近了一步。現(xiàn)在，來和【SuperTextView v2.0】見個(gè)面吧！

image

圖片，就是現(xiàn)在

在【SuperTextView v2.0】中，增加了對圖片展示的支持。但不僅僅止于展示圖片，它還能智能的根據(jù)你的輸入將圖片剪裁為你期望的形狀。

image

給圖片加上圓角，加上邊框，或者直接變成圓形，所有的一切只需要設(shè)置幾個(gè)簡單的屬性，即刻呈現(xiàn)在你的眼前。

展示一張圖片

如何使用SuperTextView展示一張圖片？只需要在xml中加上下面兩句代碼即可。

<com.coorchice.library.SuperTextView
    ...
    app:state_drawable="@drawable/avatar1"
    app:drawableAsBackground="true"
    ...
 />

如果你是SuperTextView的忠實(shí)用戶的話，你會發(fā)現(xiàn)，原本的state_drawable現(xiàn)在可以被用來展示一張圖片。

給圖片加上圓角

現(xiàn)在，你的圖片呈現(xiàn)在了你的眼前，也許你還想對它做一些不一樣的事情，比如，加個(gè)圓角，或者直接變成圓形？沒問題，SuperTextView現(xiàn)在完全能勝任這樣的工作。

<com.coorchice.library.SuperTextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    ...
    app:corner="15dp"
    app:state_drawable="@drawable/avatar1"
    app:drawableAsBackground="true"
    ...
 />

如此簡單！在原來的基礎(chǔ)上你僅僅需要設(shè)置合理的corner值就行。

也許，你還想要邊框

有時(shí)候，你可能需要使用一個(gè)邊框去包裹住你的圖片，就像上面的示例那樣。沒錯，這肯定在SuperTextView能力范圍內(nèi)。

<com.coorchice.library.SuperTextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    ...
    app:corner="50dp"
    app:stroke_color="#F4E187"
    app:stroke_width="4dp"
    app:state_drawable="@drawable/avatar1"
    app:drawableAsBackground="true"
    ...
 />

app:stroke_color 掌控著邊框的顏色，app:stroke_width 掌控著邊框的寬度。一切如此流暢，一個(gè)有心智的控件本該如此，對嗎？

第二個(gè)狀態(tài)圖

面對復(fù)雜的需求變化，【SuperTextView】為應(yīng)對這種復(fù)雜性，孕育出了第二個(gè)狀態(tài)圖 state_drawable2 。

image

現(xiàn)在，CoorChice將向你展示，上圖中的兩種效果是如何實(shí)現(xiàn)的。

  • 示例一
<com.coorchice.library.SuperTextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    ...
    app:corner="50dp"
    app:state_drawable="@drawable/avatar1"
    app:drawableAsBackground="true"
    // state_drawable2的配置由此開始
    app:isShowState2="true"
    app:state_drawable2="@drawable/recousers"
    app:state_drawable2_mode="rightTop"
    app:state_drawable2_height="20dp"
    app:state_drawable2_width="20dp"
    ...
 />
  • 示例二
<com.coorchice.library.SuperTextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    ...
    // 背景圖
    android:background="@drawable/avatar7"
    // drawable1的配置由此開始
    app:isShowState="true"
    app:state_drawable="@drawable/triangle"
    app:state_drawable_mode="leftTop"
    app:state_drawable_width="20dp"
    app:state_drawable_height="20dp"
    // state_drawable2的配置由此開始
    app:isShowState2="true"
    app:state_drawable2="@drawable/recousers"
    app:state_drawable2_mode="rightTop"
    app:state_drawable2_height="20dp"
    app:state_drawable2_width="20dp"
    ...
 />

就如你所熟悉的一樣，state_drawable2 延續(xù)了第一代一切流暢的操作。在聰明的你合理的使用下，【SuperTextView】一定能夠大放異彩！??

屬于 Adjuster 的時(shí)代

此前，Adjuster 的設(shè)計(jì)使得【SuperTextView】具有了靈魂，成為更聰明的控件。對繪制過程的插入，觸摸事件的捕捉，使得你能輕松的從外部改變一個(gè)控件的狀態(tài)。創(chuàng)意始于心，而行于此。

現(xiàn)在，【SuperTextView】能夠同時(shí)承載最多3個(gè) Adjuster ！也許，你的創(chuàng)意會更加的炫目。

image

在上面這個(gè)示例中，CoorChice將早起的兩個(gè)【掃光】和【漣漪】特效都加入到了一個(gè)【SuperTextView】中，結(jié)果就是你看到的這樣。

更多的 Adjuster 意味著更多的組合，更多的驚喜。在【v1.4.0】中，CoorChice同樣使用了 Adjuster 來輕松的實(shí)現(xiàn)了按壓變色功能。

這是 Adjuster 的時(shí)代，睿智的你一定可以運(yùn)用它揮灑創(chuàng)意的。

需要注意的是??，原本的 setAdjuster(Adjuster) 方法目前仍然被保留，但以后的版本將會被移除，你必須要盡快遷移。新的替代方法為 addAdjuster(Adjuster) 。

其它

  • 修正控制Shader模式的屬性 app:shaderMode="leftToRight" 的拼寫。原來為 app:shaderMode="leftTopRight" 。如果你使用了該屬性，在升級【SuperTextView v2.0】后請及時(shí)修正。
  • 增加 set/getPressBgColor() 和 set/getPressTextColor() 用于在代碼中控制按壓背景色。

v1.4.0

  • 千呼萬喚使出來！你想要的按壓變色效果在這里！
image

只需在xml文件中設(shè)置以下兩個(gè)屬性就能輕松實(shí)現(xiàn)按壓變色效果，例如上圖那樣的：

# 設(shè)置按壓時(shí)的背景色
app:pressBgColor="@color/red"
# 設(shè)置按壓時(shí)的文字顏色
app:pressTextColor="@color/white"

這個(gè)功能是依托內(nèi)置一個(gè)Adjuster實(shí)現(xiàn)的，你可以看看這。

CoorChice想說的是，Adjuster是SuperTextView的靈魂所在，它能夠讓一切創(chuàng)意變成可能。

  • 暴露一個(gè)新的方法getCorners()。你可以通過它獲得SuperTextView的所有圓角信息，有時(shí)候你真的很需要它。
  • 如何使用SuperTextView v1.4？
dependencies {
    compile 'com.github.chenBingX:SuperTextView:v1.4'
}

v1.3

  • 支持隨時(shí)修改動畫幀率。難以置信的是，你甚至可以在動畫執(zhí)行過程中隨時(shí)修改！當(dāng)然最好不要這么做。
mSuperTextView.setFrameRate(30);
// 修改幀率為30幀
  • 優(yōu)化動畫驅(qū)動的性能。
  • 酷炫不止，漸變來襲！
image

一觸即變，想象不至于此。藝術(shù)家，發(fā)揮你的創(chuàng)造力吧！

同樣，漸變效果的設(shè)置支持在xml中設(shè)置，并且能夠即時(shí)預(yù)覽。

app:shaderEnable="true"
// 必須設(shè)置為true才能啟用漸變功能。這意味著你可以靈活的控制這一功能。

app:shaderStartColor="@color/main_blue"
// 設(shè)置起始顏色。

app:shaderEndColor="@color/pink"
// 設(shè)置結(jié)尾顏色。

app:shaderMode="rightToLeft"
// 設(shè)置漸變模式。如上圖可見，一共支持4中模式：
// topTopBottom, bottomToTop, leftToRight, rightToLeft

當(dāng)然，這些屬性也都提供了對應(yīng)的set/get方法，供你在Java中動態(tài)改變／獲取它們的值。比如：

mSuperTextView.setShaderStartColor(Color.RED);

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

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

v1.1

  • 最低支持Android 4.0，SdkVersion 14。
  • 支持優(yōu)雅動人的 【鏈?zhǔn)奖磉_(dá)式】 , eg:
mSuperTextView.setAdjuster(new MoveEffectAdjuster())
        .setAutoAdjust(true)
        .startAnim();
  • 減小占用空間。

簡介

歡迎使用SuperTextView，這篇文檔將會向你展示如何使用這個(gè)控件來提高你構(gòu)建項(xiàng)目的效率。

image

SuperTextView繼承自TextView，它能夠大量的減少布局的復(fù)雜程度，并且使得一些常見的效果變得十分容易實(shí)現(xiàn)且高效。同時(shí)，它內(nèi)置了動畫驅(qū)動，你只需要合理編寫Adjuster，然后startAnim()就可以看到預(yù)期的動畫效果。它僅僅是一個(gè)控件，所以你可以不費(fèi)吹灰之力的在你的項(xiàng)目中集成使用。

特點(diǎn)

  1. 你從此不必再為背景圖編寫和管理大量<shape>文件了。
  2. 重新優(yōu)化的狀態(tài)圖功能使得你能夠精確的控制狀態(tài)圖的大小，以及在SuperTextView中的位置。
  3. 支持設(shè)置圓角，并且能夠精確的控制圓角位置。
  4. 能夠輕松的實(shí)現(xiàn)控件邊框效果。
  5. 支持文字描邊，這使得空心文字效果成為了可能。
  6. 內(nèi)置動畫驅(qū)動，你只需配合Adjuster合理的使用即可。
  7. Adjuster的出現(xiàn)，使得你對控件的繪制過程具有了掌控權(quán)，良好的設(shè)計(jì)使得它能夠完美的實(shí)現(xiàn)絕大部分你腦海中的效果。

使用指南

支持的屬性

SuperTextView十分方便的支持在xml中直接設(shè)置屬性，并且你能夠立即看到效果。就像你平時(shí)使用TextView一樣方便。

<SuperTextView
    android:layout_width="50dp"
    android:layout_height="50dp"

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

以上這些屬性，均可以在Java中進(jìn)行動態(tài)的設(shè)置。同時(shí)也能夠獲得它們的值。例如：

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

圓形和邊框

image

為了實(shí)現(xiàn)上圖效果，通常你需要編寫和管理大量的<shape>文件?，F(xiàn)在你只需要在xml或代碼中對SuperTextView直接進(jìn)行設(shè)置即可。

不簡單的圓角

image

不同于簡單的圓角，SuperTextView支持精確的控制圓角的位置。一個(gè)、兩個(gè)、三個(gè)都沒問題。一切由你掌控。

神奇的文字描邊

image

文字描邊從未如此簡單！

高效的狀態(tài)圖

image

不同于原生的Drawable，SuperTextView對于Drawable提供了更多精細(xì)化的控制操作。你能夠輕松的指定Drawable大小以及位置，只需一個(gè)屬性就能搞定。

相信你一定深有感觸，想要實(shí)現(xiàn)上圖中的效果，往往需要嵌套多層布局(一般3層吧？)。而SuperTextView只需一個(gè)控件，并且十分簡單高效的就能實(shí)現(xiàn)。它能夠大量的減少你的App中的布局復(fù)雜程度，減少視圖樹的繪制時(shí)間。

炸裂的 Adjuster

Adjuster被設(shè)計(jì)用來在SuperTextView的繪制過程中插入一些操作。這具有非常重要的意義。比如，默認(rèn)實(shí)現(xiàn)的DefaultAdjuster能夠動態(tài)的調(diào)整文字的大小。當(dāng)然，你可以用它來實(shí)現(xiàn)各種各樣的效果。

想要Adjuster生效，你必須調(diào)用SuperTextView.setAutoAdjust(true)來啟用Adjuster功能。當(dāng)然，你可以所以方便的停止，通過調(diào)用SuperTextView.setAutoAdjust(false)。并且，你需要注意調(diào)用順序，因?yàn)橐坏┱{(diào)用了SuperTextView.setAutoAdjust(true)，而Adjuster沒有被設(shè)置的話，將會啟用默認(rèn)的DefaultAdjuster(它能夠動態(tài)的調(diào)整文字大小)，直到你設(shè)置了你自己的Adjuster

干預(yù)控件的繪制

實(shí)現(xiàn)一個(gè)Adjuster需要繼承SuperTextView.Adjuster，并且實(shí)現(xiàn)adjust(SuperTextView v, Canvas canvas)方法。Adjuster.adjust()會在每次繪制過程中被調(diào)用，這意味著你能夠不可思議的從外部干預(yù)控件的繪制過程。

public class YourAdjuster extends SuperTextView.Adjuster {

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

}

注意，如果開啟動畫，你必須十分謹(jǐn)慎的編寫adjuster()中的代碼。因?yàn)閯赢嫊?0幀/每秒的速度進(jìn)行繪制。這意味著，這個(gè)方法每秒會被調(diào)用60次！所以，千萬不要在這個(gè)方法中重復(fù)的創(chuàng)建對象，會卡爆的！原因是短時(shí)間的大量將會引起【內(nèi)存抖動】，導(dǎo)致GC頻繁發(fā)生。相關(guān)知識你可以看看我的這兩篇文章：

響應(yīng)觸摸事件

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

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內(nèi)置的動畫驅(qū)動，你能夠結(jié)合Adjuster來實(shí)現(xiàn)難以置信的動畫效果。一切只需要在你合理的編寫好Adjuster后，調(diào)用startAnim()和stopAnim()來啟動／停止動畫。

image

如你所見，上面的效果就是通過Adjuster來實(shí)現(xiàn)的。并且這種拔插式的設(shè)計(jì)，使得你能夠隨時(shí)在同一個(gè)SuperTextView上使用新的Adjuster，你所有需要做的事情就是創(chuàng)建一個(gè)新的Adjuster，然后調(diào)用setAdjuster()。

之前@Alex_Cin希望看到Ripple漣漪效果，所以在RippleAdjuster.java中，我演示了如何使用Adjuster和動畫驅(qū)動配合實(shí)現(xiàn)上圖的Rippler漣漪效果。【RippleAdjuster.java鏈接：https://github.com/chenBingX/SuperTextView/blob/master/app/src/main/java/com/coorchice/supertextview/SuperTextView/Adjuster/RippleAdjuster.java】

看，你可以使用Adjuster實(shí)現(xiàn)自己的Ripple效果。

指定 Adjuster 的層級

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

在SuperTextView中，繪制層級被從下到上分為：背景層、Drawable層、文字層3個(gè)層級。通過Opportunity來指定你的Adjuster想要插入到那個(gè)層級間。

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

三種類型的Opportunity示意圖。

image

默認(rèn)值是Opportunity.BEFORE_TEXT。即第二張圖的示例。

事實(shí)上，只要你愿意，SuperTextView就相當(dāng)于一張畫布，你可以在上面任意的揮灑你的創(chuàng)意。它能夠讓你專注于創(chuàng)作，而不用去在意編寫那些無用麻煩的代碼。

如何開始使用

在你的build.gradle中加入：

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

dependencies {
    compile 'com.github.chenBingX:SuperTextView:v3.1.1'
}

現(xiàn)在，開始使用 SuperTextView 吧。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容