Android開源:SuperTextView-使用這個控件來提高你構建項目的效率

ugsk7408 7年前發布 | 24K 次閱讀 安卓開發 Android開發 移動開發

簡介

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

特點

  1. 你從此不必再為背景圖編寫和管理大量<shape>文件了。

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

  3. 支持設置圓角,并且能夠精確的控制圓角位置。

  4. 能夠輕松的實現控件邊框效果。

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

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

  7. 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" 
/></code></pre> 

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

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

圓形和邊框

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

不簡單的圓角

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

神奇的文字描邊

文字描邊從未如此簡單!

高效的狀態圖

不同于原生的 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() 來啟動/停止動畫。

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

默認值是 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了。

License

Copyright (C) 2017 CoorChice icechen_@outlook.com

Licensed under the Apache License, Version 2.0 (the "License");you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

 

項目主頁:http://www.baiduhome.net/lib/view/home/1494485446858

 本文由用戶 ugsk7408 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!