Android开源：SuperTextView－使用这个控件来提高你构建项目的效率
ugsk7408
7年前
<h2>简介</h2> <p>SuperTextView 继承 自 TextView，它能够大量的减少布局的复杂程度，并且使得一些常见的效果变得十分容易实现且高效。同时，它内置了动画驱动，你只需要合理编写 <strong>Adjuster</strong> ，然后 startAnim() 就可以看到预期的动画效果。它仅仅是一个控件，所以你可以不费吹灰之力的在你的项目中集成使用。</p> <h2>特点</h2> <ol> <li> <p>你从此不必再为背景图编写和管理大量<shape>文件了。</p> </li> <li> <p>重新优化的 <strong>状态图功能</strong> 使得你能够精确的控制状态图的大小，以及在 <strong>SuperTextView</strong> 中的位置。</p> </li> <li> <p>支持设置圆角，并且能够精确的控制圆角位置。</p> </li> <li> <p>能够轻松的实现控件边框效果。</p> </li> <li> <p>支持文字描边，这使得空心文字效果成为了可能。</p> </li> <li> <p>内置动画驱动，你只需配合 <strong>Adjuster</strong> 合理的使用即可。</p> </li> <li> <p>Adjuster的出现，使得你对控件的绘制过程具有了掌控权，良好的设计使得它能够完美的实现绝大部分你脑海中的效果。</p> </li> </ol> <h2>使用指南</h2> <h3>支持的属性</h3> <p>SuperTextView十分方便的支持在 xml 中直接设置属性，并且你能够立即看到效果。就像你平时使用 TextView 一样方便。</p> <pre> <code class="language-groovy"><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> <p>以上这些属性，均可以在 Java 中进行动态的设置。同时也能够获得它们的值。例如：</p> <pre> <code class="language-groovy">mSuperTextView.setCorner(10);mSuperTextView.getCorner();</code></pre> <h3>圆形和边框</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/b77ecb43ee2c808a3b0037fb3b3e054c.png"></p> <p>为了实现上图效果，通常你需要编写和管理大量的<shape>文件。现在你只需要在 xml 或代码中对 <strong>SuperTextView</strong> 直接进行设置即可。</p> <h3>不简单的圆角</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/43ef7a9fd358bd27d24e54aa0d10e7ea.png"></p> <p>不同于简单的圆角， <strong>SuperTextView</strong> 支持精确的控制圆角的位置。一个、两个、三个都没问题。一切由你掌控。</p> <h3>神奇的文字描边</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/c9197ad6ba5e5663b84985ade4104d91.png"></p> <p>文字描边从未如此简单！</p> <h3>高效的状态图</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/8dd55bb978652a6ee39a1c5ad49c8d81.png"></p> <p>不同于原生的 Drawable， <strong>SuperTextView</strong> 对于 Drawable 提供了更多精细化的控制操作。你能够轻松的指定 Drawable 大小以及位置，只需一个属性就能搞定。</p> <p>相信你一定深有感触，想要实现上图中的效果，往往需要嵌套多层布局(一般 3 层吧？)。而 <strong>SuperTextView</strong> 只需一个控件，并且十分简单高效的就能实现。它能够大量的减少你的App 中的布局复杂程度，减少视图树的绘制时间。</p> <h2>炸裂的 Adjuster</h2> <p>Adjuster被设计用来在 <strong>SuperTextView</strong> 的绘制过程中插入一些操作。这具有非常重要的意义。比如，默认实现的 <strong>DefaultAdjuster</strong> 能够动态的调整文字的大小。当然，你可以用它来实现各种各样的效果。</p> <p>想要 Adjuster 生效，你必须调用 SuperTextView.setAutoAdjust(true) 来启用 Adjuster 功能。当然，你可以所以方便的停止，通过调用 SuperTextView.setAutoAdjust(false) 。并且，你需要注意调用顺序，因为一旦调用了 SuperTextView.setAutoAdjust(true) ，而Adjuster 没有被设置的话，将会启用默认的 DefaultAdjuster (它能够动态的调整文字大小)，直到你设置了你自己的 Adjuster</p> <h3>干预控件的绘制</h3> <p>实现一个 Adjuster 需要继承 SuperTextView.Adjuster，并且实现 adjust(SuperTextView v, Canvas canvas) 方法。Adjuster.adjust() 会在每次绘制过程中被调用，这意味着你能够不可思议的从外部干预控件的绘制过程。</p> <pre> <code class="language-groovy">public class YourAdjuster extends SuperTextView.Adjuster { @Override protected void adjust(SuperTextView v, Canvas canvas) { //do your business。 } } </code></pre> <p>注意，如果开启动画，你必须十分谨慎的编写 adjuster() 中的代码。因为动画会以 60 帧/每秒的速度进行绘制。这意味着，这个方法每秒会被调用 60 次！所以，千万不要在这个方法中重复的创建对象，会卡爆的！原因是短时间的大量将会引起【内存抖动】，导致 GC频繁发生。相关知识你可以看看我的这两篇文章：</p> <ul> <li> <p>Android内存基础——内存抖动</p> <p>http://www.jianshu.com/p/69e6f894c698</p> </li> <li> <p>用两张图告诉你，为什么你的App会卡顿?</p> <p>http://www.jianshu.com/p/df4d5ec779c8</p> </li> </ul> <h3>响应触摸事件</h3> <p>如果你重载 Adjuster 的 onTouch(SuperTextView v, MotionEvent event) 方法，你将能够获得 <strong>SuperTextView</strong> 的触摸事件。这是重要的一点，如果你想持续的对 <strong>SuperTextView</strong> 的触摸事件进行处理，你必须使 onTouch() 返回true。否则你只能接收到一个 ACTION_DOWN 事件，而不是一个事件流。</p> <pre> <code class="language-groovy">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. } }</code></pre> <h3>如此惊艳的效果</h3> <p>得益于 <strong>SuperTextView</strong> 内置的动画驱动，你能够结合 Adjuster 来实现难以置信的动画效果。一切只需要在你合理的编写好 Adjuster 后，调用 startAnim() 和 stopAnim() 来启动／停止动画。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8cc6646debf5b5c7ba2622e49392570a.gif"></p> <p>如你所见，上面的效果就是通过 Adjuster 来实现的。并且这种 <strong>拔插式</strong> 的设计，使得你能够随时在同一个 <strong>SuperTextView</strong> 上使用新的 Adjuster，你所有需要做的事情就是创建一个新的 Adjuster，然后调用 setAdjuster() 。</p> <p>之前 @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 】</p> <p>看，你可以使用 Adjuster 实现自己的 Ripple 效果。</p> <h3>指定A djuster 的层级</h3> <p><strong>Adjuster</strong> 贴心的设计了控制作用层级的功能。你可以通过 Adjuster.setOpportunity(Opportunity opportunity) 来指定 Adjuster 的绘制层级。</p> <p>在 <strong>SuperTextView</strong> 中，绘制层级被从下到上分为：背景层、Drawable 层、文字层 3 个层级。通过 Opportunity 来指定你的 Adjuster 想要插入到那个层级间。</p> <pre> <code class="language-groovy">public enum Opportunity { BEFORE_DRAWABLE, //背景层和Drawable层之间 BEFORE_TEXT, //Drawable层和文字层之间 AT_LAST //最上层}</code></pre> <p>三 种类型的 Opportunity 示意图。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5268c2f12b0101fb0232d94c22dd7216.png"></p> <p>默认值是 Opportunity.BEFORE_TEXT 。即第二张图的示例。</p> <p>事实上，只要你愿意， <strong>SuperTextView</strong> 就相当于一张画布，你可以在上面任意的挥洒你的创意。它能够让你专注于创作，而不用去在意编写那些无用麻烦的代码。</p> <h2>如何开始使用</h2> <h2>方法一</h2> <p>在你的<strong>build.gradle</strong>中加入：</p> <pre> <code class="language-groovy">allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { compile 'com.github.chenBingX:SuperTextView:v1.1' } </code></pre> <h2>方法二</h2> <p>你可以Clone我的<a href="/misc/goto?guid=4959748695463172145">【Github仓库https://github.com/chenBingX/SuperTextView】</a>，然后在Library包下找到<strong>SuperTextView</strong>和<strong>attrs.xml</strong>，复制到你的项目中。</p> <p>现在，你可以开始使用<strong>SuperTextView</strong>了。</p> <h2>License</h2> <p>Copyright (C) 2017 CoorChice <a href="/misc/goto?guid=4959748695543953061">icechen_@outlook.com</a></p> <p>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</p> <pre> <code class="language-groovy">http://www.apache.org/licenses/LICENSE-2.0 </code></pre> <p>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.</p> <p> </p> <p>项目主页：<a href="http://www.open-open.com/lib/view/home/1494485446858">http://www.open-open.com/lib/view/home/1494485446858</a></p>