SuperTextView 最全開發指南

CoorChice發表於2019-02-09


SuperTextView 指定官方交流群:775951525

? 點選連結,下載體驗 Demo

SuperTextView

嘿,開發者您好,歡迎使用 SuperTextView !感謝您及數萬位 Android 開發者的信賴 ?

在過去 1 年半的時間裡,SuperTextView 經過了多次迭代和上百次的 commit,已經被廣泛應用於各型別商業 App 中,經受住了千萬級日活的考驗。相信 SuperTextView 也能為您帶來開發體驗上的提升,以及協助您構建或改進出更加精美的應用。

如果您是初次使用 SuperTextView,那麼這篇文件將會向您詳細的講解 SuperTextView 的每一項功能,以便您能快速上手。
如果您是 SuperTextView 老粉,通過這篇文件您也許會發現一些之前未曾涉及到便捷功能。

1. 獲取最新版本的 SuperTextView

  • 在你的build.gradle中加入:

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }
    
    dependencies {
        compile 'com.github.chenBingX:SuperTextView:v3.1.4'
    }
    複製程式碼
  • 專案地址

    github.com/chenBingX/S…

    注:關注本專案以及時獲得最新版本資訊。

2. SuperTextView 支援的屬性

對於 SuperTextView 說支援的絕大部分酷炫的效果,開發者均可以通過在 xml 佈局檔案中,通過簡單的屬性配置就能夠實現。並且,藉助 AndroidStudioPreview 外掛,可以實時的預覽這些效果。

以下是目前 SuperTextView 所支援的所有屬性。

<SuperTextView

  //設定圓角。會同時作用於填充和邊框(如果邊框存在的話)。
  //如果要設定為圓形,只需要把該值設定為寬或長的1/2即可。
  app:stv_corner="25dp"

  //設定左上角圓角
  app:stv_left_top_corner="true"

  //設定右上角圓角
  app:stv_right_top_corner="true"

  //設定左下角圓角
  app:stv_left_bottom_corner="true"

  //設定右下角圓角
  app:stv_right_bottom_corner="true"

  //設定填充顏色
  app:stv_solid="@color/red"

  //設定邊框顏色
  app:stv_stroke_color="@color/black"

  //設定邊框的寬度。
  app:stv_stroke_width="2dp"

  //放置一個drawable在背景層上。預設居中顯示。
  //並且預設大小為SuperTextView的一半。
  app:stv_state_drawable="@drawable/emoji"

  //設定drawable的顯示模式。可選值如下:
  // left、top、right、bottom、center(預設值)、
  //leftTop、rightTop、leftBottom、rightBottom、
  //fill(充滿整個SuperTextView,此時會使設定drawable的大小失效)
  app:stv_state_drawable_mode="center"

  //設定drawable的height
  app:stv_state_drawable_height="30dp"

  //設定drawable的width
  app:stv_state_drawable_width="30dp"

  //設定drawble相對於基礎位置左邊的距離
  app:stv_state_drawable_padding_left="10dp"

  //設定drawble相對於基礎位置上邊的距離
  app:stv_state_drawable_padding_top="10dp"

  // boolean型別。是否顯示drawable。
  //如果你想要設定的drawable顯示出來,必須設定為true。
  //當不想讓它顯示時,再設定為false即可。
  app:stv_isShowState="true"

  // 是否將state_drawable作為背景圖
  // 將state_drawable作為背景圖可以讓SuperTextView具備展示圖片的能力
  // 通過調節corner、stroke等屬性,可以給圖片設定圓角、邊框等
  app:stv_drawableAsBackground="true"

  //放置一個drawable在背景層上。預設居中顯示。
  //並且預設大小為SuperTextView的一半。
  app:stv_state_drawable2="@drawable/emoji"

  //與state_drawable類似
  app:stv_state_drawable2_mode="center"

  //與state_drawable_height類似
  app:stv_state_drawable2_height="30dp"

  //與state_drawable_width類似
  app:stv_state_drawable2_width="30dp"

  //與state_drawable_padding_left類似
  app:stv_state_drawable2_padding_left="10dp"

  //與state_drawable_padding_top類似
  app:stv_state_drawable2_padding_top="10dp"

  //與isShowState類似
  app:stv_isShow2State="true"

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

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

  # 修改 drawable 的旋轉角度
  app:stv_state_drawable_rotate="90"

  # 修改 drawable2 的旋轉角度
  app:stv_state_drawable2_rotate="90"

  //是否開啟文字描邊功能。
  //注意,啟用這個模式之後通過setTextColor()設定的顏色將會被覆蓋。
  //你需要通過text_fill_color來設定文字的顏色。
  app:stv_text_stroke="true"

  // 文字的描邊顏色。預設為Color.BLACK。
  app:stv_text_stroke_color="@color/black"

  // 文字描邊的寬度。
  app:stv_text_stroke_width="1dp"

  // 文字填充的顏色。預設為Color.BLACK。
  app:stv_text_fill_color="@color/blue"

  // boolean型別。是否啟用Adjuster功能。
  //具體幹什麼,需要在Java中為SuperTextView實現一個Adjuster。
  //當你啟用這個功能而沒有實現自己的Adjuster時,
  //SuperTextView會啟用預設的Adjuster。它會按照一定的規則調整文字大小。
  app:stv_autoAdjust="true"

  // 必須設定為true才能啟用漸變功能。這意味著你可以靈活的控制這一功能。
  app:stv_shaderEnable="true"

  // 設定起始顏色。
  app:stv_shaderStartColor="@color/main_blue"

  // 設定結尾顏色。
  app:stv_shaderEndColor="@color/pink"

  // 設定漸變模式。如上圖可見,一共支援4中模式:
  // topTopBottom, bottomToTop, leftToRight, rightToLeft
  app:stv_shaderMode="rightToLeft"

  // 設定按壓時的背景色
  app:stv_pressBgColor="@color/red"

  // 設定按壓時的文字顏色
  app:stv_pressTextColor="@color/white"

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

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

  // 修改 drawable 的旋轉角度
  app:stv_state_drawable_rotate="90"

  // 修改 drawable2 的旋轉角度
  app:stv_state_drawable2_rotate="90"

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

  // 設定文字的起始漸變色
  app:stv_textShaderStartColor="@color/red"

  // 設定文字的結束漸變色
  app:stv_textShaderEndColor="@color/yellow"

  // 設定文字的漸變的模式
  // leftToRight:左 -> 右
  // rightToLeft:右 -> 左
  // topToBottom:上 -> 下
  // bottomToTop:下 -> 上
  app:stv_textShaderMode="leftToRight"


  />
複製程式碼

3. SuperTextView Api

點選此處,檢視詳細的《SuperTextView Api文件》

4. 開發指南

該部分將會詳細講解目前 SuperTextView 所支援功能,以及如何使用這些能力來創造令人驚歎的應用。

4.1 SuperTextView 中的層級

SuperTextView 中,將繪製內容劃分為了 4 個層級。瞭解 SuperTextView 中的層級設計,將會有助於開發者更加合理的組織 UI 邏輯。

1.Background層:View的 Background 背景層。

2.背景層:即通過 app:stv_solid 設定的純色背景層。在 SuperTextView 中通常將該層視做背景層,而不是View的 Background。就是說,當我們設定了背景層色後,VIew 本身的 Background 將會被覆蓋。

3.Drawable層SuperTextViewDrawable 所在的層級。如果你希望通過 SuperTextView 來展示圖片,就是在該層展示。從 v2.0 版本開始,SuperTextView1Drawable 可以被支援用於作為 SuperTextView 的背景圖片,這意味著當開發者這麼做時,通過 solid 屬性設定的背景顏色將會被覆蓋。

4.文字層:即繪製文字的層級。

理解層級的概念,對於後面將要講述的 Adjuster 很有幫助。

4.2 設定圓角

圓角化功能是 SuperTextView 最基本的功能,你可以在 xml 佈局檔案或者 Java 中進行設定。

在xml中:

  app:stv_corner="25dp"
複製程式碼

在Java中:

  stv.setCorner(25);
複製程式碼

圓角化的設定僅對 SuperTextView 的【背景層】,或者將 Drawble 用於展示圖片(即:配置了app:stv_drawableAsBackground="true")時有效。

如果你需要一個圓形的效果,只需要將corner值設定為控制元件最大邊長度的一半,即:corner = layout_width / 2。比如:

  android:layout_width="80dp"
  android:layout_height="80dp"
  app:stv_corner="40dp"
  app:stv_solid="#008673"
複製程式碼

將一張普通的圖片圓角化:

  app:stv_corner="15dp"
  app:stv_state_drawable="@drawable/avatar1"
  app:stv_drawableAsBackground="true"
複製程式碼

如果你希望實現圓形頭像,或者圓角背景圖的效果,那最適合不過了。

4.3 控制每一個圓角

預設情況下,對 SuperTextView 設定 corner 會對控制元件的4個角都有效。當然,也可以單獨指定那一個角才是真正需要圓角化的。

在 xml

  //設定左上角圓角
  app:stv_left_top_corner="true"

  //設定右上角圓角
  app:stv_right_top_corner="true"

  //設定左下角圓角
  app:stv_left_bottom_corner="true"

  //設定右下角圓角
  app:stv_right_bottom_corner="true"
複製程式碼

在 Java 中

  //設定左上角圓角
  stv.setLeftTopCornerEnable( boolean);
  // 設定左下角圓角
  stv.setLeftBottomCornerEnable( boolean);
  //設定右上角圓角
  stv.setRightTopCornerEnable(boolean);
  //設定右下角圓角
  stv.setRightBottomCornerEnable(boolean);
複製程式碼

需要注意的時候,一旦指定了任何一個圓角,app:stv_corner 將不再對4個角都有效了,你需要一個一個的去設定。

4.4 邊框

SuperTextView 可以通過簡單的配置給控制元件加上邊框,實際開發中十分的便捷。

  app:stv_solid="#78C3ED"
  app:stv_stroke_color="#5166ED"
  app:stv_stroke_width="5dp"
複製程式碼

只需要設定 app:stv_stroke_width 大於0即開啟了邊框功能,如果沒有設定 app:stv_stroke_color,會有預設的黑色邊框。邊框的圓角化也會受到 corner 屬性的影響。

邊框的效果同樣能夠在展示圖片的時候有效。

4.5 文字描邊

使用 SuperTextView 能夠很輕鬆的實現文字描邊的功能。

  # 開啟文字描邊功能
  app:stv_text_stroke="true"
  # 設定文字填充顏色
  app:stv_text_fill_color="@color/white"
  # 設定文字描邊顏色
  app:stv_text_stroke_color="#461B50"
  # 設定文字描邊寬度
  app:stv_text_stroke_width="1dp"
複製程式碼

⚠️ 注意,開啟文字描邊的功能後,文字顏色只能夠通過 app:stv_text_fill_color 來設定,不要使用 android:textColor

如果想要實現空心文字的效果,只需要將 app:stv_text_fill_color 設定為透明色,或者與背景色相同即可。

4.6 狀態圖

SuperTextView 自帶狀態圖功能。通過 Drawable、Drawable2 兩個 Drawable 坑位,能夠展示兩個狀態圖。

不同於系統的原生 TextViewDrawableSuperTextViewDrawable 能夠精確的控制其位置和大小。

  # boolean型別。是否開啟狀態圖1的功能。
  app:stv_isShowState="true"

  # 設定狀態圖1的圖片
  app:stv_state_drawable="@drawable/emoji"

  # 設定狀態圖1的顯示模式,決定了狀態圖1的基礎位置
  # 可選值如下:
  # left、top、right、bottom、center(預設值)、
  # leftTop、rightTop、leftBottom、rightBottom、
  # fill(充滿整個SuperTextView,此時會使設定drawable的大小失效)
  app:stv_state_drawable_mode="center"

  # 設定狀態圖1的height
  app:stv_state_drawable_height="30dp"

  # 設定狀態圖1的width
  app:stv_state_drawable_width="30dp"

  # 設定狀態圖1相對於基礎位置的左邊的距離
  app:stv_state_drawable_padding_left="10dp"

  # 設定狀態圖1相對於基礎位置上邊的距離
  app:stv_state_drawable_padding_top="10dp"


  # boolean型別。是否開啟狀態圖2的功能。
  app:stv_isShow2State="true"

  # 設定狀態圖2的圖片
  app:stv_state_drawable2="@drawable/emoji"

  # 設定狀態圖2的顯示模式,決定了狀態圖2的基礎位置
  # 可選值如下:
  # left、top、right、bottom、center(預設值)、
  # leftTop、rightTop、leftBottom、rightBottom、
  # fill(充滿整個SuperTextView,此時會使設定drawable的大小失效)
  app:stv_state_drawable2_mode="center"

  # 設定狀態圖2的height
  app:stv_state_drawable2_height="30dp"

  # 設定狀態圖2的width
  app:stv_state_drawable2_width="30dp"

  # 設定狀態圖2相對於基礎位置的左邊的距離
  app:stv_state_drawable2_padding_left="10dp"

  # 設定狀態圖2相對於基礎位置上邊的距離
  app:stv_state_drawable2_padding_top="10dp"

複製程式碼

上圖是一些使用一個狀態圖實現的功能,可以看到,你可以輕鬆準確的控制狀態圖的位置和大小。

現在,來看看兩個狀態圖能夠幹什麼。

  • 示例一

    <com.coorchice.library.SuperTextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    ...
    app:stv_corner="50dp"
    app:stv_state_drawable="@drawable/avatar1"
    # 將狀態圖1作為控制元件背景,以展示圖片
    app:stv_drawableAsBackground="true"
    # state_drawable2的配置由此開始
    app:stv_isShowState2="true"
    app:stv_state_drawable2="@drawable/recousers"
    app:stv_state_drawable2_mode="rightTop"
    app:stv_state_drawable2_height="20dp"
    app:stv_state_drawable2_width="20dp"
    ...
    />
    複製程式碼
  • 示例二

    <com.coorchice.library.SuperTextView
    android:layout_width="100dp"
    android:layout_height="100dp"
    ...
    # 背景圖
    android:background="@drawable/avatar7"
    # drawable1的配置由此開始
    app:stv_isShowState="true"
    app:stv_state_drawable="@drawable/triangle"
    app:stv_state_drawable_mode="leftTop"
    app:stv_state_drawable_width="20dp"
    app:stv_state_drawable_height="20dp"
    # state_drawable2的配置由此開始
    app:stv_isShowState2="true"
    app:stv_state_drawable2="@drawable/recousers"
    app:stv_state_drawable2_mode="rightTop"
    app:stv_state_drawable2_height="20dp"
    app:stv_state_drawable2_width="20dp"
    ...
    />
    複製程式碼

    如你所見,使用 SuperTextView 來處理此類 ui 需求實在是令人愉快,開發者從此可以不必再為這種效果而費腦的想該如何通過一個個控制元件疊加巢狀實現了。

4.7 漸變效果

SuperTextView 支援通過配置簡單的屬性實現漸變色效果。

  # 必須設定為true才能啟用漸變功能。這意味著你可以靈活的控制這一功能。
  app:stv_shaderEnable="true"

  # 設定起始顏色
  app:stv_shaderStartColor="@color/main_blue"

  # 設定結尾顏色。
  app:stv_shaderEndColor="@color/pink"

  # 設定漸變模式。如上圖可見,一共支援4中模式:
  # topTopBottom, bottomToTop, leftToRight, rightToLeft
  app:stv_shaderMode="rightToLeft"

複製程式碼

這些屬性也支援在 Java 中設定。

  // 開啟漸變色功能
  stv.setShaderEnable(true);
  // 設定起始顏色
  stv.setShaderStartColor(Color.BLUE);
  // 設定結束顏色
  stv.setShaderEndColor(Color.RED);
  // 設定模式
  stv.setShaderMode(SuperTextView.ShaderMode.LEFT_TO_RIGHT);
複製程式碼

漸變模式共有4種:

  public static enum ShaderMode {
  /**
  * 從上到下
  */
  TOP_TO_BOTTOM(0),
  /**
  * 從下到上
  */
  BOTTOM_TO_TOP(1),
  /**
  * 從左到右
  */
  LEFT_TO_RIGHT(2),
  /**
  * 從右到左
  */
  RIGHT_TO_LEFT(3);
  }
複製程式碼

4.8 按壓變色

SuperTextView 能夠快速的支援按壓變色效果,就像下圖一樣,文字和背景色都支援。

只需配置簡單的屬性:

  # 設定按壓時的背景色
  app:stv_pressBgColor="@color/red"
  # 設定按壓時的文字顏色
  app:stv_pressTextColor="@color/white"
複製程式碼

在Java中:

  // 設定按壓背景變色
  stv.setPressBgColor(Color.RED);
  // 取消按壓文字變色
  stv.setPressTextColor(-99);
複製程式碼
  • 如果要取消按壓背景變色,只需設定 PressBgColor 為透明色,Color.TRANSPARENT
  • 如果要取消按壓文字變色,只需設定 PressTextColor 為-99。

4.9 展示圖片

4.9.1 展示本地圖片

前面有提到過,SuperTextView 可以通過狀態圖1變成一個 ImageView。在設定好狀態圖1後,只需開啟圖片展示功能即可。

<com.coorchice.library.SuperTextView
  ...
  app:stv_state_drawable="@drawable/avatar1"
  # 開啟圖片展示功能
  app:stv_drawableAsBackground="true"
  ...
  />
複製程式碼

需要注意的是,當將狀態圖1用於展示圖片後,狀態圖1將不再具備狀態圖的功能,直到你關閉了圖片展示功能,通過 stv.setDrawableAsBackground(false)

4.9.2 展示網路圖片

  stv.setUrlImage(url);
複製程式碼

SuperTextView 中,通過上面簡單的一句即可將 SuperTextView 作為一個可以展示網路圖片的ImageView。

呼叫上面的方法會預設開啟 SuperTextView 的圖片展示功能,因此,此時狀態圖1的狀態圖功能會被停用。你也可以通過以下方法,使得能夠從網路中下載狀態圖1:

  stv.setUrlImage(url, false);
複製程式碼

第二個參數列示關閉圖片展示功能。

上圖中,第一個例子是從網路中下載圖片用作狀態圖,第二個例子是用作展示圖片。

SuperTextView 為了保持依賴庫的純淨和儘可能小的體積,並沒有內建任何的圖片載入框架。所以預設情況,將使用內建的一個簡易圖片引擎去下載圖片,確保開發者能夠正常使用展示網路圖片的功能。

SuperTextView 具備相容任意第三方圖片下載框架的能力,建議開發者根據專案的具體情況,選擇一個目前正在使用的圖片載入框架,設定到 SuperTextView 中,以用來載入圖片。 下面將通過幾個的例子展示如何將現有的圖片框架安裝到 SuperTextView 中。

第一步:實現圖片引擎Engine

SuperTextView 中,核心的圖片載入引擎被抽象成介面 Engine ,開發者需要根據所用的圖片框架,實現一個 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) {

}
});
}
}
複製程式碼

第二步:安裝圖片引擎Engine

實現好 Engine 後,下一步就是要將其安裝到 SuperTextView 中。

建議可以在 Application的 onCreate() 中進行安裝,這樣當需要使用 SuperTextView 載入顯示網路圖片的時候,就能夠用到三方圖片框架了。

public class STVApplication extends Application {

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

一行程式碼,輕鬆安裝。

需要注意的是,任何時候,後安裝的 Engine 例項總是會替換掉先前安裝的 Engine 例項,即 SuperTextView 只允許全域性存在一個 Engine 例項。

只需簡單兩步,即可完成任意三方圖片載入框架的適配。

當你通過 Drawable 坑位展示背景圖片時,所有的圓角和邊框設定都同樣有效。

4.10 Adjuster

Adjuster 被設計用來在 SuperTextView 的繪製過程中插入一些操作。這具有非常重要的意義。比如,實時的改變控制元件的狀態,製作複雜的動畫效果或者互動效果。

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.
}

}
複製程式碼

通過重寫 Adjusteradjust() 方法,可以獲取每次繪製過程中控制元件的 Canvas 物件,這意味著可以在繪製過程中從外部插入一些新的元素。當然,單單通過 SuperTextView 的例項修改其狀態也是可以的。

通過重寫 AdjusteronTouch() 方法,可以獲取每一次控制元件的觸控事件,如果在該方法中返回true,表明該 Adjuster 需要獲取後續的觸控事件,同時也會使得 SuperTextView 在整個控制元件樹中回去攔截觸控事件。配合 adjust() 可以實現一些複雜的互動效果。值得注意的是,如果在 SuperTextView 之前,已經有控制元件攔截的觸控事件,那麼其中的 Adjuster 將無法獲取到觸控事件。

當裝載 AdjusterSuperTextView 之後,需要呼叫以下方法來開啟 Adjuster 的功能:

stv.setAutoAdjust(true);
複製程式碼

當然,停止 Adjuster 只需要設定為false即可。

4.10.1 如何裝載Adjuster到SuperTextView

stv.addAdjuster(mAdjuster);
複製程式碼

通過上面方法可以將一個 Adjuster 新增到 SuperTextView 中,最多支援新增3個 Adjuster 。超過3個的部分,將會始終覆蓋最後一個 Adjuster

如果你想要移除一個 Adjuster,通過下面方法來實現。

// 移除指定位置的 Adjuster
stv.removeAdjuster(index)
// 移除指定的 Adjuster
stv.removeAdjuster(adjuster)
複製程式碼

4.10.2 設定Adjuster的層級

前面有描述過 SuperTextView 的層級劃分,Adjuster 可以通過配置,將其插入到指定的層級。

mAdjuster.setOpportunity(opportunity);
複製程式碼

層級定義瞭如下幾個列舉變數:

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

分別對應如下幾種場景,其中Emoji圖是StateDrawable狀態圖,藍色圓形就是一個 Adjuster

4.10.3 開啟動畫

SuperTextView 中,可以通過以下方法觸發 SuperTextView 的定時繪製:

stv.startAnim();
複製程式碼

啟動動畫後, SuperTextView 將會以預設 60fps 的幀率進行重新整理。配合 Adjuster 可以十分簡單的實現動畫效果。

SuperTextView 離開螢幕後,將會自動停止正在播放的動畫,當在次進入螢幕時,又會自動啟動。所以開發者可以無需擔心動畫在後臺消耗資源。

當然,開發者也可以隨時停止動畫,通過呼叫以下方法:

stv.stopAnim();
複製程式碼

通過以下方法,開發者可以隨時修改 SuperTextView 的重新整理頻率:

// 每秒30幀
stv.setFrameRate(30);
複製程式碼

4.10.4 獲得 Adjuster 的新增和移除事件

Adjuster 中包含了兩個函式:

  • onAttach():當 Adjuster 被設定到一個 SuperTextView 中時會被呼叫。
  • onDetach():當 Adjuster 被從一個 SuperTextView 中移除時會被呼叫。

通過在 Adjuster 中重寫這兩個函式,開發者可以在正確的時機進行狀態註冊、初始化,或者取消註冊、釋放資源等操作。

public class MyAdjuster extends SuperTextView.Adjuster{

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

    }

    @Override
    public void onAttach(SuperTextView stv) {
      // 當 Adjuster 被加入一個 SuperTextView 時會被呼叫
    }

    @Override
    public void onDetach(SuperTextView stv) {
      // 當 Adjuster 被從 SuperTextView 移除時會被呼叫
    }
}
複製程式碼

4.11 修改 StateDrawable 顏色

開發者可以輕鬆的改變一個圖示的顏色,而不用再增加一個僅僅是顏色不同的圖示到專案中。這項技術將為你的 Android 應用程式帶來一次瘦身的機遇。

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

# 修改 drawable2 的顏色
app:stv_state_drawable2_tint="@color/red"
複製程式碼

只需要如此一行簡單的程式碼,就能瞬間賦予一張圖片千變萬化的能力。想要任何色彩,當然是你說了算。而這一切的發生,無需再引進另外一張圖片。

在 Java 程式碼中,有與之對應 set/get 函式,讓開發者可以在任何時候都能施展魔法,改變一張圖片的色彩。

4.12 修改 StateDrawable 旋轉角度

SuperTextView 被賦予了改變 StateDrawable 形態的能力。同樣的一張圖,開發者可以組合出無數種可能。

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

# 修改 drawable 的旋轉角度
app:stv_state_drawable_rotate="90"

# 修改 drawable2 的旋轉角度
app:stv_state_drawable2_rotate="90"
複製程式碼

無需複雜的程式碼,SuperTextView 一如既往的簡潔、優雅。

同樣,在 Java 程式碼中,也提供了對應的 `set/get· 函式。

這項能力,可以有效的幫助開發者將 Android 應用的體積向著極致的方向壓縮。

通過和 Drawable 著色功能的聯合使用,開發者可以將應用中原本必要存在的 .png 統統移除掉。比如,箭頭等。開發者只需要一張箭頭圖片,就可以通過修改其顏色、旋轉角度、大小等屬性,組合出任何需求的箭頭 icon

4.13 設定文字漸變

這就是漸變文字!

SuperTextView 所提供的可能是目前為止實現漸變文字最簡潔、優雅的解決方案。只需要簡單的配置,就能實現酷炫的漸變文字效果。

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

# 設定文字的起始漸變色
app:stv_textShaderStartColor="@color/red"

# 設定文字的結束漸變色
app:stv_textShaderEndColor="@color/yellow"

# 設定文字的漸變的模式
# leftToRight:左 -> 右
# rightToLeft:右 -> 左
# topToBottom:上 -> 下
# bottomToTop:下 -> 上
app:stv_textShaderMode="leftToRight"
複製程式碼

這些屬性也在 Java 中開放了 set/get 介面,便於開發者隨時動態的修改它們。

  • 如果你喜歡 SuperTextView,希望能到 Github 點個 star ? 哦!

  • 此外,CoorChice 會不定期的在部落格平臺分享乾貨,內容包括 Android 相關技術機器學習演算法新的技術,以及一些對個人發展提升的感悟和思考。快進入 CoorChice的【個人主頁】 關注一波吧。

文件結束。更多例子可以Clone專案到本地學習,祝你使用愉快!






相關文章