Android開源:SuperTextView-使用這個控制元件來提高你構建專案的效率
簡介
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();
圓形和邊框:
為了實現上圖效果,通常你需要編寫和管理大量的<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包下找到SuperTextView和attrs.xml,複製到你的專案中。
現在,你可以開始使用SuperTextView了。
相關文章
- 開源專案推薦:提高研發效率的5個開源專案
- 通過迎合整合商來提高你的開源專案使用率
- 你正在使用的開源專案原來有這麼多風險
- Vue專案Webpack優化實踐,構建效率提高50%VueWeb優化
- 使用Mkdocs構建你的專案文件
- 提高 webpack 構建 Vue 專案的速度WebVue
- 一個檔案的開源專案,開啟你的開源之旅
- 掘金開源秀:來沸點展示你的開源專案
- 阿里架構師推薦:這十個開源專案,Android開發不容錯過!阿里架構Android
- 提高Android開發效率的9個Web工具AndroidWeb
- 無需開發部署,秒建優雅的開源專案文件,這個工具用起來賊爽
- 快速開發android,離不開這10個優秀的開源專案Android
- 這12個最新AI開源專案,你一定要收下AI
- 收下這款 Vue 專案模版,它將讓你的開發效率在 2021 年提高 50%Vue
- Python使用.NET開發的類庫來提高你的程式執行效率Python
- 專案管理效率如何提高?專案管理
- 手把手教你如何構建一個優秀的開源專案
- 站在巨人的肩上,利用開源專案提高你的技術水平
- 這些.NET開源專案你知道嗎?讓.NET開源來得更加猛烈些吧!
- 如何規劃專案,提高專案管理的效率?專案管理
- 從一個優秀開源專案來談前端架構前端架構
- 使用cordova構建基於vue的Android專案VueAndroid
- 那些年的開源專案,你跑起來了嗎?
- 使用Beego構建一個web專案GoWeb
- 使用Dockerfile構建一個django專案DockerDjango
- 【譯】使用這些 CSS 屬性選擇器來提高前端開發效率!CSS前端
- 秒建炫酷的開源專案文件,這款神器用起來夠優雅!
- 這 6 個爬蟲開源專案 yyds爬蟲
- 基於Jetpack元件構建的開源專案-WanLearningJetpack元件
- 11個優秀的Android開發開源專案Android
- 13個幫你提高開發效率的現代CSS框架CSS框架
- 這些年我開源的幾個小專案
- 這個開源組織裡的專案都是精品
- 推薦10個Android開源專案Android
- 上百個Android開源專案分享Android
- 直接拿來用!最火的Android開源專案Android
- 常用的幾個提高iOS開發效率的開源類庫及工具iOS
- 使用webpack構建一個專案 (更新ing)Web