從未如此驚艷!你好,SuperTextView
【引自CoorChice的博客】簡(jiǎn)介
歡迎使用SuperTextView,這篇文檔將會(huì)向你展示如何使用這個(gè)控件來提高你構(gòu)建項(xiàng)目的效率。
SuperTextView繼承自TextView,它能夠大量的減少布局的復(fù)雜程度,并且使得一些常見的效果變得十分容易實(shí)現(xiàn)且高效。同時(shí),它內(nèi)置了動(dòng)畫驅(qū)動(dòng),你只需要合理編寫Adjuster,然后startAnim()就可以看到預(yù)期的動(dòng)畫效果。它僅僅是一個(gè)控件,所以你可以不費(fèi)吹灰之力的在你的項(xiàng)目中集成使用。
特點(diǎn)
- 你從此不必再為背景圖編寫和管理大量<shape>文件了。
- 重新優(yōu)化的狀態(tài)圖功能使得你能夠精確的控制狀態(tài)圖的大小,以及在SuperTextView中的位置。
- 支持設(shè)置圓角,并且能夠精確的控制圓角位置。
- 能夠輕松的實(shí)現(xiàn)控件邊框效果。
- 支持文字描邊,這使得空心文字效果成為了可能。
- 內(nèi)置動(dòng)畫驅(qū)動(dòng),你只需配合Adjuster合理的使用即可。
- Adjuster的出現(xiàn),使得你對(duì)控件的繪制過程具有了掌控權(quán),良好的設(shè)計(jì)使得它能夠***的實(shí)現(xiàn)絕大部分你腦海中的效果。
使用指南
支持的屬性
SuperTextView十分方便的支持在xml中直接設(shè)置屬性,并且你能夠立即看到效果。就像你平時(shí)使用TextView一樣方便。
- <SuperTextView
- android:layout_width="50dp"
- android:layout_height="50dp"
- //設(shè)置圓角。會(huì)同時(shí)作用于填充和邊框(如果邊框存在的話)。
- //如果要設(shè)置為圓形,只需要把該值設(shè)置為寬或長(zhǎng)的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的顯示模式。可選值如下:
- // left、top、right、bottom、center(默認(rèn)值)、
- //leftTop、rightTop、leftBottom、rightBottom、
- //fill(充滿整個(gè)SuperTextView,此時(shí)會(huì)使設(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相對(duì)于基礎(chǔ)位置左邊的距離
- app:state_drawable_padding_left="10dp"
- //設(shè)置drawble相對(duì)于基礎(chǔ)位置上邊的距離
- app:state_drawable_padding_top="10dp"
- // boolean類型。是否顯示drawable。
- //如果你想要設(shè)置的drawable顯示出來,必須設(shè)置為true。
- //當(dāng)不想讓它顯示時(shí),再設(shè)置為false即可。
- app:isShowState="true"
- //是否開啟文字描邊功能。
- //注意,啟用這個(gè)模式之后通過setTextColor()設(shè)置的顏色將會(huì)被覆蓋。
- //你需要通過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會(huì)啟用默認(rèn)的Adjuster。它會(huì)按照一定的規(guī)則調(diào)整文字大小。
- app:autoAdjust="true"
- />
以上這些屬性,均可以在Java中進(jìn)行動(dòng)態(tài)的設(shè)置。同時(shí)也能夠獲得它們的值。例如:
- mSuperTextView.setCorner(10);
- mSuperTextView.getCorner();
圓形和邊框
為了實(shí)現(xiàn)上圖效果,通常你需要編寫和管理大量的<shape>文件?,F(xiàn)在你只需要在xml或代碼中對(duì)SuperTextView直接進(jìn)行設(shè)置即可。
不簡(jiǎn)單的圓角
不同于簡(jiǎn)單的圓角,SuperTextView支持精確的控制圓角的位置。一個(gè)、兩個(gè)、三個(gè)都沒問題。一切由你掌控。
神奇的文字描邊
文字描邊從未如此簡(jiǎn)單!
高效的狀態(tài)圖
不同于原生的Drawable,SuperTextView對(duì)于Drawable提供了更多精細(xì)化的控制操作。你能夠輕松的指定Drawable大小以及位置,只需一個(gè)屬性就能搞定。
相信你一定深有感觸,想要實(shí)現(xiàn)上圖中的效果,往往需要嵌套多層布局(一般3層吧?)。而SuperTextView只需一個(gè)控件,并且十分簡(jiǎn)單高效的就能實(shí)現(xiàn)。它能夠大量的減少你的App中的布局復(fù)雜程度,減少視圖樹的繪制時(shí)間。
炸裂的Adjuster
Adjuster被設(shè)計(jì)用來在SuperTextView的繪制過程中插入一些操作。這具有非常重要的意義。比如,默認(rèn)實(shí)現(xiàn)的DefaultAdjuster能夠動(dòng)態(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è)置的話,將會(huì)啟用默認(rèn)的DefaultAdjuster(它能夠動(dòng)態(tài)的調(diào)整文字大小),直到你設(shè)置了你自己的Adjuster
干預(yù)控件的繪制
實(shí)現(xiàn)一個(gè)Adjuster需要繼承SuperTextView.Adjuster,并且實(shí)現(xiàn)adjust(SuperTextView v, Canvas canvas)方法。Adjuster.adjust()會(huì)在每次繪制過程中被調(diào)用,這意味著你能夠不可思議的從外部干預(yù)控件的繪制過程。
- public class YourAdjuster extends SuperTextView.Adjuster {
- @Override
- protected void adjust(SuperTextView v, Canvas canvas) {
- //do your business。
- }
- }
注意,如果開啟動(dòng)畫,你必須十分謹(jǐn)慎的編寫adjuster()中的代碼。因?yàn)閯?dòng)畫會(huì)以60幀/每秒的速度進(jìn)行繪制。這意味著,這個(gè)方法每秒會(huì)被調(diào)用60次!所以,千萬(wàn)不要在這個(gè)方法中重復(fù)的創(chuàng)建對(duì)象,會(huì)卡爆的!原因是短時(shí)間的大量將會(huì)引起【內(nèi)存抖動(dòng)】,導(dǎo)致GC頻繁發(fā)生。相關(guān)知識(shí)你可以看看我的這兩篇文章:
- 【Android內(nèi)存基礎(chǔ)——內(nèi)存抖動(dòng)http://www.jianshu.com/p/69e6f894c698】
- 【用兩張圖告訴你,為什么你的App會(huì)卡頓?http://www.jianshu.com/p/df4d5ec779c8】
響應(yīng)觸摸事件
如果你重載Adjuster的onTouch(SuperTextView v, MotionEvent event)方法,你將能夠獲得SuperTextView的觸摸事件。這是重要的一點(diǎn),如果你想持續(xù)的對(duì)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)置的動(dòng)畫驅(qū)動(dòng),你能夠結(jié)合Adjuster來實(shí)現(xiàn)難以置信的動(dòng)畫效果。一切只需要在你合理的編寫好Adjuster后,調(diào)用startAnim()和stopAnim()來啟動(dòng)/停止動(dòng)畫。
如你所見,上面的效果就是通過Adjuster來實(shí)現(xiàn)的。并且這種拔插式的設(shè)計(jì),使得你能夠隨時(shí)在同一個(gè)SuperTextView上使用新的Adjuster,你所有需要做的事情就是創(chuàng)建一個(gè)新的Adjuster,然后調(diào)用setAdjuster()。
之前@Alex_Cin希望看到Ripple漣漪效果,所以在RippleAdjuster.java中,我演示了如何使用Adjuster和動(dòng)畫驅(qū)動(dòng)配合實(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的層級(jí)
Adjuster貼心的設(shè)計(jì)了控制作用層級(jí)的功能。你可以通過Adjuster.setOpportunity(Opportunity opportunity)來指定Adjuster的繪制層級(jí)。
在SuperTextView中,繪制層級(jí)被從下到上分為:背景層、Drawable層、文字層3個(gè)層級(jí)。通過Opportunity來指定你的Adjuster想要插入到那個(gè)層級(jí)間。
- public enum Opportunity {
- BEFORE_DRAWABLE, //背景層和Drawable層之間
- BEFORE_TEXT, //Drawable層和文字層之間
- AT_LAST //最上層
- }
三種類型的Opportunity示意圖。
默認(rèn)值是Opportunity.BEFORE_TEXT。即第二張圖的示例。
事實(shí)上,只要你愿意,SuperTextView就相當(dāng)于一張畫布,你可以在上面任意的揮灑你的創(chuàng)意。它能夠讓你專注于創(chuàng)作,而不用去在意編寫那些無用麻煩的代碼。
如何開始使用
- 如果你喜歡SuperTextView,希望能順手在Github點(diǎn)個(gè)star哦!
- 抽出空余時(shí)間寫文章分享需要?jiǎng)恿Γ€請(qǐng)各位看官動(dòng)動(dòng)小手點(diǎn)個(gè)贊,給我點(diǎn)鼓勵(lì)😄
- 我一直在不定期的創(chuàng)作新的干貨,想要上車只需進(jìn)到我的【個(gè)人主頁(yè)】點(diǎn)個(gè)關(guān)注就好了哦。發(fā)車嘍~
方法一
在你的build.gradle中加入:
- allprojects {
- repositories {
- ...
- maven { url 'https://jitpack.io' }
- }
- }
- dependencies {
- compile 'com.github.chenBingX:SuperTextView:v1.0'
- }
方法二
你可以Clone我的【Github倉(cāng)庫(kù)https://github.com/chenBingX/SuperTextView】,然后在Library包下找到SuperTextView和attrs.xml,復(fù)制到你的項(xiàng)目中。
現(xiàn)在,你可以開始使用SuperTextView了。
點(diǎn)擊這里跳轉(zhuǎn)SuperTextView項(xiàng)目地址。https://github.com/chenBingX/SuperTextView