从未如此惊艳!你好,SuperTextView

【引自CoorChice的博客】简介

欢迎使用SuperTextView,这篇文档将会向你展示如何使用这个控件来提高你构建项目的效率。

SuperTextView继承自TextView,它能够大量的减少布局的复杂程度,并且使得一些常见的效果变得十分容易实现且高效。同时,它内置了动画驱动,你只需要合理编写Adjuster,然后startAnim()就可以看到预期的动画效果。它仅仅是一个控件,所以你可以不费吹灰之力的在你的项目中集成使用。

特点

  1. 你从此不必再为背景图编写和管理大量<shape>文件了。
  2. 重新优化的状态图功能使得你能够精确的控制状态图的大小,以及在SuperTextView中的位置。
  3. 支持设置圆角,并且能够精确的控制圆角位置。
  4. 能够轻松的实现控件边框效果。
  5. 支持文字描边,这使得空心文字效果成为了可能。
  6. 内置动画驱动,你只需配合Adjuster合理的使用即可。
  7. Adjuster的出现,使得你对控件的绘制过程具有了掌控权,良好的设计使得它能够完美的实现绝大部分你脑海中的效果。

使用指南

支持的属性

SuperTextView十分方便的支持在xml中直接设置属性,并且你能够立即看到效果。就像你平时使用TextView一样方便。


  1. <SuperTextView 
  2.     android:layout_width="50dp" 
  3.     android:layout_height="50dp" 
  4.  
  5.     //设置圆角。会同时作用于填充和边框(如果边框存在的话)。 
  6.     //如果要设置为圆形,只需要把该值设置为宽或长的1/2即可。  
  7.     app:corner="25dp"   
  8.     //设置左上角圆角 
  9.     app:left_top_corner="true" 
  10.     //设置右上角圆角 
  11.     app:right_top_corner="true" 
  12.     //设置左下角圆角 
  13.     app:left_bottom_corner="true" 
  14.     //设置右下角圆角 
  15.     app:right_bottom_corner="true" 
  16.     //设置填充颜色 
  17.     app:solid="@color/red"   
  18.     //设置边框颜色 
  19.     app:stroke_color="@color/black"   
  20.     //设置边框的宽度。 
  21.     app:stroke_width="2dp"  
  22.     //放置一个drawable在背景层上。默认居中显示。 
  23.     //并且默认大小为SuperTextView的一半。 
  24.     app:state_drawable="@drawable/emoji"   
  25.     //设置drawable的显示模式。可选值如下: 
  26.     // left、top、right、bottom、center(默认值)、 
  27.     //leftTop、rightTop、leftBottom、rightBottom、 
  28.     //fill(充满整个SuperTextView,此时会使设置drawable的大小失效) 
  29.     app:state_drawable_mode="center"  
  30.     //设置drawable的height 
  31.     app:state_drawable_height="30dp" 
  32.     //设置drawable的width 
  33.     app:state_drawable_width="30dp" 
  34.     //设置drawble相对于基础位置左边的距离 
  35.     app:state_drawable_padding_left="10dp" 
  36.     //设置drawble相对于基础位置上边的距离 
  37.     app:state_drawable_padding_top="10dp" 
  38.     // boolean类型。是否显示drawable。 
  39.     //如果你想要设置的drawable显示出来,必须设置为true。 
  40.     //当不想让它显示时,再设置为false即可。 
  41.     app:isShowState="true"  
  42.     //是否开启文字描边功能。 
  43.     //注意,启用这个模式之后通过setTextColor()设置的颜色将会被覆盖。 
  44.     //你需要通过text_fill_color来设置文字的颜色。 
  45.     app:text_stroke="true"  
  46.     // 文字的描边颜色。默认为Color.BLACK。 
  47.     app:text_stroke_color="@color/black" 
  48.     // 文字描边的宽度。 
  49.     app:text_stroke_width="1dp" 
  50.     // 文字填充的颜色。默认为Color.BLACK。 
  51.     app:text_fill_color="@color/blue"  
  52.     // boolean类型。是否启用Adjuster功能。 
  53.     //具体干什么,需要在Java中为SuperTextView实现一个Adjuster。 
  54.     //当你启用这个功能而没有实现自己的Adjuster时, 
  55.     //SuperTextView会启用默认的Adjuster。它会按照一定的规则调整文字大小。 
  56.     app:autoAdjust="true"  
  57.     />  

以上这些属性,均可以在Java中进行动态的设置。同时也能够获得它们的值。例如:


  1. mSuperTextView.setCorner(10); 
  2.  
  3. 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()会在每次绘制过程中被调用,这意味着你能够不可思议的从外部干预控件的绘制过程。


  1. public class YourAdjuster extends SuperTextView.Adjuster { 
  2.  
  3.   @Override 
  4.   protected void adjust(SuperTextView v, Canvas canvas) { 
  5.     //do your business。 
  6.   } 
  7.  
  8. }  

注意,如果开启动画,你必须十分谨慎的编写adjuster()中的代码。因为动画会以60帧/每秒的速度进行绘制。这意味着,这个方法每秒会被调用60次!所以,千万不要在这个方法中重复的创建对象,会卡爆的!原因是短时间的大量将会引起【内存抖动】,导致GC频繁发生。相关知识你可以看看我的这两篇文章:

响应触摸事件

如果你重载Adjuster的onTouch(SuperTextView v, MotionEvent event)方法,你将能够获得SuperTextView的触摸事件。这是重要的一点,如果你想持续的对SuperTextView的触摸事件进行处理,你必须使onTouch()返回true。否则你只能接收到一个ACTION_DOWN事件,而不是一个事件流。


  1. public class YourAdjuster extends SuperTextView.Adjuster { 
  2.  
  3.   @Override 
  4.   protected void adjust(SuperTextView v, Canvas canvas) { 
  5.     //do your business。 
  6.   } 
  7.  
  8.   @Override 
  9.   public boolean onTouch(SuperTextView v, MotionEvent event) { 
  10.     //you can get the touch event. 
  11.     //If want to get a series of touch event, you must return true here. 
  12.   } 
  13.  
  14. }  

如此惊艳的效果

得益于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效果。

指定Adjuster的层级

Adjuster贴心的设计了控制作用层级的功能。你可以通过Adjuster.setOpportunity(Opportunity opportunity)来指定Adjuster的绘制层级。

在SuperTextView中,绘制层级被从下到上分为:背景层、Drawable层、文字层3个层级。通过Opportunity来指定你的Adjuster想要插入到那个层级间。


  1. public enum Opportunity { 
  2.       BEFORE_DRAWABLE, //背景层和Drawable层之间 
  3.       BEFORE_TEXT,     //Drawable层和文字层之间 
  4.       AT_LAST          //最上层 
  5. }  

三种类型的Opportunity示意图。

默认值是Opportunity.BEFORE_TEXT。即第二张图的示例。

事实上,只要你愿意,SuperTextView就相当于一张画布,你可以在上面任意的挥洒你的创意。它能够让你专注于创作,而不用去在意编写那些无用麻烦的代码。

如何开始使用

  • 如果你喜欢SuperTextView,希望能顺手在Github点个star哦!
  • 抽出空余时间写文章分享需要动力,还请各位看官动动小手点个赞,给我点鼓励
  • 我一直在不定期的创作新的干货,想要上车只需进到我的【个人主页】点个关注就好了哦。发车喽~

方法一

在你的build.gradle中加入:


  1. allprojects { 
  2.     repositories { 
  3.         ... 
  4.         maven { url 'https://jitpack.io' } 
  5.     } 
  6.  
  7. dependencies { 
  8.     compile 'com.github.chenBingX:SuperTextView:v1.0' 
  9. }  

方法二

你可以Clone我的【Github仓库https://github.com/chenBingX/SuperTextView】,然后在Library包下找到SuperTextView和attrs.xml,复制到你的项目中。

现在,你可以开始使用SuperTextView了。

作者:CoorChice

来源:51CTO

时间: 2024-10-26 05:34:03

从未如此惊艳!你好,SuperTextView的相关文章

惊艳阿凡达,可牛打造潘多拉星的纳美人鱼

最近,詹姆斯·卡梅隆的<阿凡达>的热力还没消减,各种关于<阿凡达>的小游戏火爆异常,将<阿凡达>与明星嫁接在一起的图片也让人忍俊不禁.不过,今天可牛影像的吉祥宝贝--牛牛不再变身"纳美人"了,而是利用可牛影像瞬间变身为潘多拉星球神秘的"纳美人鱼",是不是觉得很新鲜?先看一下效果图:   效果图 可牛影像小档案: 软件版本:V2.1.0.1001 软件大小:11.6MB 官方下载:http://www.keniu.com/ 第一步:

可牛影像打造潘多拉星的纳美人鱼,惊艳阿凡达

最近,詹姆斯·卡梅隆的<阿凡达>的热力还没消减,各种关于<阿凡达>的小游戏火爆异常,将<阿凡达>与明星嫁接在一起的图片也让人忍俊不禁.不过,今天可牛影像的吉祥宝贝--牛牛不再变身"纳美人"了,而是利用可牛影像瞬间变身为潘多拉星球神秘的"纳美人鱼",是不是觉得很新鲜?先看一下效果图: 效果图 可牛影像小档案: 软件版本:V2.1.0.1001 软件大小:11.6MB 官方下载:http://www.keniu.com/ 第一步:运行

Photoshop打造美女咖啡惊艳图片(1)

Photoshop打造美女咖啡惊艳图片大家要努力加强ps外功夫修练,即"美"的修练,多问问自己,美是什么?我为什么被她吸引?美在那里? 先把两张练习图发上来: 1>如图放置并添加层蒙板 2> 如鼠标处点击,然后选用渐变工具,颜色:白---黑渐变,选用第二个"O"图标--径向渐变.>(这是技术外的功夫,要把图片合成什么样子,BB也不能说清) 3:鼠标左上向右下一拉,得出如图.到这步,蒙板教程算是介绍结束了. 4:不过怕有粗心的朋友,如鼠标处点击.

Photoshop打造美女咖啡惊艳图片(2)

Photoshop打造美女咖啡惊艳图片5:左上向右下一拉,画布如图.急....我的蒙板为什么不起作用?可能有人会这样问.前后对比,错在那里大家应该知道了吧. 7:BB一直相信:作图是讲究天赋的.没有天赋,别人不会看你的教程:没有天赋,你不会如何发教程:没有天赋,周星驰就不会说这句话.名人说的话,是很有说服力和号召力的,很多广告就是这样做的.大家不相信吗?请看这一拉(左上向右下这一拉),拉多长?拉的角度如何?这操作对图效的影响如何?请自行试试.例如:我如图一拉,可以为背景层的MM添加一层蒙胧的光辉

Photoshop打造美女咖啡惊艳图片(3)

Photoshop打造美女咖啡惊艳图片11:修饰的过程中,大家可以把上层(层图1)的眼睛隐藏,在背景层上着红色.截图中我忘记了,不过有天赋的BB,即使不隐藏眼睛,也可以知道该在那里着色.当然,这话是为自己吹牛的. 12:爱无至境.电影和音乐的主题.人们对美的追求,也是美无至境的. 前卫的,流行的,古典,怪异等... "新欢"."猎爱"四字结合并不"美",所以我们还要努力地"衣不遮体"一下.回到如鼠处点击. 13:再这样一拉,自

Photoshop打造惊艳国画美女

这是一个精彩的照片处理实例--我们用Photoshop将一幅照片打造成惊艳国画美女特效. 对比一下效果: 原图处理后效果         

50个鼓舞人心的设计惊艳的iphone应用网站

50个设计惊艳的iphone 应用的网站.iphone应用程序的共同之处是拥有一个设计非常专业的网站.它们看起来如此惊人,配色.优雅的排版.照片.空间以及对比的运用,可以持续激发设计师们的灵感.坐下来欣赏这些鼓舞人心的设计吧. Bills Shake it Photo Tripmix Nota Billings Touch NotifyMe melatonin yoritsuki Syncopy iSaidWhat

JavaSwing也惊艳之二:环环相套

一.序言 关于"Java做不好桌面"的争论已经由来已久.虽然Swing和Java2D已经有超 过十年的历史,也有JIDE.JGoodies.TWaver等不少开源Swing组件,但是用 Java做桌面程序仍然不是一件轻松的事.本<Java也惊艳>系列文章,就是想通 过一些简单生动的例子,和大家一起认识Java.探索Swing.其实你只需要多一 点创意.多一点耐心,你的Java程序也可以"惊艳"!本文就带您一起进入Java 的惊艳之旅. 二.立体套管效果

JavaSwing也惊艳之一:水晶之恋

一.序言 关于"Java做不好桌面"的争论已经由来已久.虽然Swing和Java2D已经有超 过十年的历史,也有JIDE.JGoodies.TWaver等不少开源Swing组件,但是用 Java做桌面程序仍然不是一件轻松的事.本<Java也惊艳>系列文章,就是想通 过一些简单生动的例子,和大家一起认识Java.探索Swing.其实你只需要多一 点创意.多一点耐心,你的Java程序也可以"惊艳"!本文就带您一起进入Java 的"水晶之恋"