SuperTextView,给你不一样的TextView体验

SuperTextView,不一样的TextView!

![在这里插入图片描述
?以上演示,均由 SuperTextView 提供强力驱动支持。

SuperTextView 的与众不同在于,它只是一个简单的控件元素,但却不仅仅是一个控件。它生而灵动多变,强大的内嵌逻辑,为你持续提供丰富多彩却异常简单的开发支持。
SuperTextView 将你从复杂的渲染逻辑中解救出来,一行简单的 API 接口调用,炫目的渲染效果即刻呈现。
你只需享受自己所编写出的惊人视效,剩下的一切就放心交给 SuperTextView。
在全新的 v3.2.1 版本中,SuperTextView 再一次重新定义了自己。开发者,来看看精心为你准备的惊喜吧!???
这是… Gif ?
这一次,SuperTextView 为开发者带来了强力的 Gif 驱动支持。
如果在过去,你曾经为如何在 Android 平台上展示一张 Gif 图而苦恼多日,或是困于一些三方 Gif 库的性能深渊中迷失方向。那么现在,SuperTextView 将彻底改变这一现状。
在这里插入图片描述
Gif 图与 SuperTextView 生而浑然天成,因此,你可以通过最熟悉的、最自然的方式来让一张 Gif 图获得展示。就像你过去展示一张普通图片那样简单。
得益于 c/c++ 的超高性能,以及对内存的精确操作。SuperTextView 通过使用 c/c++ 为移动平台专门定制了性能强悍的 Gif 驱动引擎。
SuperTextView 的 Gif 引擎,能够精确操作图像像素内存,在 Gif 图像的帧刷新时,只对局部像素内存进行更新,这让 Gif 图像渲染效率得到了质的飞跃。
通过异步离屏渲染及多缓冲技术,使得 SuperTextView 即使在流畅展示超大 Gif 图像的时候,依旧能够保持应用界面丝滑的流畅度,以及灵敏的响应速度。

在这里插入图片描述
?以上 Demo 中,使用 SuperTextView 展示了一张 近17M 大小,包含有 265 帧图像的 Gif 图,用户界面依旧无比流畅。

展示 Gif 超简单!
在 SuperTextView 中展示一张 Gif 图,超简单!
你可以直接 XML 布局文档中配置,或者在代码中进行添加。
在 XML 中配置 Gif
<com.coorchice.library.SuperTextView
android:id="@+id/stv_1"
android:layout_width=“match_parent”
android:layout_height=“150dp”

// 配置 Gif
app:stv_state_drawable="@drawable/gif_1" />

你可以像配置一张普通图片一样,为 SuperTextView 配置展示 Gif 图。
在代码中配置 Gif
stv_1 = (SuperTextView) findViewById(R.id.stv_1);
stv_1.setDrawable(R.drawable.gif_1);
就是这么简单、自然,SuperTextView 可以让你毫无感知,就能配置展示一张 Gif 图。
在 SuperTextView 的内核逻辑中,SuperTextView 能够智能的对普通图和 Gif 图进行分类,然后作出相应的处理和优化。
展示网络 Gif,一样简单
如果你的 Gif 图不在本地,而在云端,怎么办?
你无需烦恼!一切放心交给 SuperTextView。
stv_1 = (SuperTextView) findViewById(R.id.stv_1);
stv_1.setUrlImage(“http://example.com/images/example.gif”);
只需一行代码,SuperTextView 会在后台协助你完成 Gif 图的加载,然后处理渲染到屏幕上。

?实际上,SuperTextView 的 Drawable1 和 Drawable2 图像展示位,均可用来展示 Gif 图。总之,一切都是你所熟悉的样子。

你可以掌控的更多
SuperTextView 所提供给开发者的不仅仅是展示 Gif 图这么简单,你可以掌控更多的细节。
播放/暂停
你可以随时控制 Gif 图,播放,或者暂停。
if (stv.getDrawable() instanceof GifDrawable) {
// 先获取到 GifDrawable 对象
GifDrawable gifDrawable = (GifDrawable) stv.getDrawable();

// 播放
gifDrawable.play();

// 暂停
gifDrawable.stop();
}
复制代码
跳转/获取指定帧
在 SuperTextView 中,你可以随时到达你指定的帧图像,以及能够提取到指定帧的图像。
if (stv.getDrawable() instanceof GifDrawable) {
// 先获取到 GifDrawable 对象
GifDrawable gifDrawable = (GifDrawable) stv.getDrawable();

// 跳转到指定帧
gifDrawable.gotoFrame(pre);

// 获取指定帧
Bitmap frame = gifDrawable.getFrame(i);
}

?由于 SuperTextView 能够支持局部增量渲染,所以当你的 Gif 图支持这种渲染模式时,意味着你可能需要通过调用 gifDrawable.setStrict(true) 开启 严格模式,来确保帧跳转或者帧提取的图像是正确的。这可能会花费一些时间,所以你应该尽量将 严格模式 下的操作放到异步线程中进行。

快慢,随你心
SuperTextView 允许你随意的修改 Gif 图的播放速率。
if (stv.getDrawable() instanceof GifDrawable) {
// 先获取到 GifDrawable 对象
GifDrawable gifDrawable = (GifDrawable) stv.getDrawable();

// 设置帧播放间隔时间,20ms
gifDrawable.setFrameDuration(20);
}
复制代码
你可以了若指掌
通过 SuperTextView 你可以对一张 Gif 图像的信息了若指掌。

获取 Gif 尺寸
// 获取宽度
int width = gifDrawable.getWidth();

// 获取高度
int height = gifDrawable.getHeight();

获取 Gif 帧信息
// 获取帧数
int frameCount = gifDrawable.getFrameCount();

// 获取当前帧间隔
int frameDuration = gifDrawable.getFrameDuration();

// 获取当前渲染到那一帧
int framePotision = gifDrawable.getCurrentFrame();

// 是否在播放
boolean isPlaying = gifDrawable.isPlaying();

更出彩的 Gif
SuperTextView 凭借对 Gif 渲染的无缝融合,此前 Drawable1 和 Drawable2 的一切配置项,在展示 Gif 图时,也同样能够生效。
Gif 作为普通 Drawable
app:stv_state_drawable_rotate=“90”

来看看在原本的 Drawable 位置放上一张 Gif 图会发生什么神奇的事情。
<com.coorchice.library.SuperTextView
android:layout_width=“match_parent”
android:layout_height=“50dp”
android:paddingLeft=“62dp”
android:paddingRight=“10dp”
android:text=“小火箭发射了!啦啦啦啦啦啦…”
android:textColor="#ffffff"
android:textSize=“22dp”
app:stv_corner=“6dp”
app:stv_isShowState=“true”
app:stv_solid="#0D1831"

// 设置 Gif
app:stv_state_drawable="@drawable/gif_1"

// 设置 Gif 高
app:stv_state_drawable_height="40dp"

// 设置 Gif 宽
app:stv_state_drawable_width="40dp"

// 设置 Gif 居左展示
app:stv_state_drawable_mode="left"

// 设置 Gif 左间距
app:stv_state_drawable_padding_left="10dp"/>

效果是…
在这里插入图片描述
现在,将 Gif 旋转 90 度试试。
<com.coorchice.library.SuperTextView

// 设置 Gif 旋转 90 度
app:stv_state_drawable_rotate=“90”

/>
复制代码
将 Gif 圆角化
SuperTextView 不可思议的实现了 Gif 图的圆角化,为开发者提供了更多的可能。
在这里插入图片描述
然而,实现这种效果却惊人的简单。
<com.coorchice.library.SuperTextView
android:layout_width=“185dp”
android:layout_height=“138.75dp”
android:layout_gravity=“center_horizontal”
app:stv_corner=“20dp”

// 设置 Gif 作为控件背景
app:stv_drawableAsBackground="true"

app:stv_scaleType="fitCenter"

// 配置 Gif
app:stv_state_drawable="@drawable/gif_1" />

为 Gif 加上边框
你甚至可以轻而易举的给一张 Gif 图加上边框。
<com.coorchice.library.SuperTextView
android:layout_width=“350dp”
android:layout_height=“148.4dp”
android:layout_gravity=“center_horizontal”
android:gravity=“center”

// 加上文字会显的更有格调
android:text="SuperTextView"

android:textSize="36dp"
android:textStyle="bold"
android:visibility="invisible"
app:stv_corner="6dp"
app:stv_drawableAsBackground="true"
app:stv_isShowState="true"
app:stv_scaleType="center"

// 设置边框颜色
app:stv_stroke_color="@color/opacity_8_gray_4c

// 设置边框宽度
app:stv_stroke_width="5dp"

app:stv_text_fill_color="#ccffffff"
app:stv_text_stroke="true"
app:stv_text_stroke_color="#cc000000"
app:stv_text_stroke_width="2dp"

// 配置 Gif
app:stv_state_drawable="@drawable/gif_1"/>

效果即刻呈现…
在这里插入图片描述
轻松实现动态头像
在过去,一些炫酷的动效,往往会止步于实现的复杂度和成本。而 SuperTextView 为你带了更多的可能,你的灵感可以无拘无束。
比如,动态头像的实现,可能是迄今为止最简单的。
<com.coorchice.library.SuperTextView
android:layout_width=“80dp”
android:layout_height=“80dp”
android:layout_marginLeft=“30dp”
app:stv_corner=“40dp”

// 设置为背景图
app:stv_drawableAsBackground="true"

// 配置 Gif 头像
app:stv_state_drawable="@drawable/gif_avatar"

// 添加边框
app:stv_stroke_color="#ffffff"
app:stv_stroke_width="3dp"
/>

在代码中,你可以直接配置一张网络动态头像。
stv.setUrlImage(“http://gif_avatar.gif”);
复制代码
更多的惊喜
两个 Drawable 都支持点击!
在新版本的 SuperTextView 中,Drawable1 和 Drawable2 被赋予了全新的能力 —— 支持精确的响应点击动作。
在这里插入图片描述
SuperTextView 通过监控点击动作发生的位置,能够准确的定位到其所发生的区域(Drawable1、Drawable2 或者 其它区域),然后触发相应的回调监听。
你可以为 SuperTextView 设置 Drawable 上的点击动作监听器,以便在动作发生时,作出必要的响应。
stv.setOnDrawableClickedListener(new SuperTextView.OnDrawableClickedListener() {
@Override
public void onDrawable1Clicked(SuperTextView stv) {
// Drawable1 clicked,do something…
}
@Override
public void onDrawable2Clicked(SuperTextView stv) {
// Drawable2 clicked,do something…
}
});

stv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 非 Drawable 区域被点击,do something…
}
});
背景图缩放模式支持
现在,当你将 Drawable1 作为背景图时,你可以为它配置不同的缩放模式,以达到你心仪的效果。
stv.setScaleType(ScaleType.CENTER);
SuperTextView 为开发者提供了多达 3 种缩放模式:

ScaleType.FIT_XY
将图片拉伸/压缩平铺。

ScaleType.FIT_CENTER
将图片自适应居中。

ScaleType.CENTER
将图片剪裁居中。默认值。

其它更新

在 XML 布局文档中,Drawable1 和 Drawable2 现在支持直接设置 颜色 或者 ShapeDrawable。
// circle_f9ad36 为 xml 中编写的 shape 文件
app:stv_state_drawable="@drawable/circle_f9ad36"

// 使用纯色作为 Drawable
app:stv_state_drawable="#000000"

⚠️ 最低支持版本 API 提升到 19。

渲染性能比过去提升至少 30%。

升级默认图片加载引擎,支持智能缓存。也许现在,你不必再引入第三方图片加载库了。

?随着 5G 带来更快的网速,以及设备性能越来越强悍,用户界面会越来越需要更多的动态展示(过去大量的静态用户界面实在是太死气沉沉了)来刺激使用者的感官,激发用户的兴趣。而 SuperTextView 能够帮助开发者轻松的完成即将到来的这一过渡转变。

如何开始 SuperTextView v3.2.1 ?
在项目 build.gradle 中加入:
dependencies {

implementation 'com.github.chenBingX:SuperTextView:v3.2.1'

...

}
传送门区域

【传送门】:[SuperTextView 官方项目地址]

【传送门】:《SuperTextView 开发参考文档》- 你可以学习到如何使用 SuperTextView 来提高你的应用的构建效率

【传送门】:《SuperTextView API文档》— 你可以查看 SuperTextView 所有可用 API 及属性

作者:CoorChice
链接:https://juejin.im/post/5d7de2c26fb9a06ad3475a1f
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简介欢迎使用SuperTextView,这篇文档将会向你展示如何使用这个控件来提高你构建项目的效率。CoverSuperTextView继承自TextView,它能够大量的减少布局的复杂程度,并且使得一些常见的效果变得十分容易实现且高效。同时,它内置了动画驱动,你只需要合理编写Adjuster,然后startAnim()就可以看到预期的动画效果。它仅仅是一个控件,所以你可以不费吹灰之力的在你的项目中集成使用。特点你从此不必再为背景图编写和管理大量文件了。重新优化的状态图功能使得你能够精确的控制状态图的大小,以及在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"     // 文
一个功能强大的TextView,可以满足日常大部分布局方式,开发者可已自行组合属性配置出属于自己风格的样式!     基本使用1.添加Gradle依赖    dependencies {     ...     compile 'com.allen.supertextview:supertextview:1.0.1'     }2.布局中如何使用    <com.allen.supertextviewlibrary.SuperTextView             android:id="@ id/super_tv"             android:layout_width="match_parent"             android:layout_height="80dp"             stv:sLeftBottomTextColor2="@color/colorAccent"             stv:sLeftBottomTextString="招商银行(8888)"             stv:sLeftBottomTextString2="限额说明>>"             stv:sLeftIconRes="@drawable/bank_zhao_shang"             stv:sLeftTopTextString="银行卡支付"             stv:sRightCheckBoxRes="@drawable/circular_check_bg"             stv:sRightCheckBoxShow="true"             stv:sLineShow="bottom"              />     注意:             1、上下的线可以通过   sLineShow 设置  有四种显示方式 none,top,bottom,both             2、通过设置 sUseRipple=true 开启水波效果3.代码中如何使用   /**  * 可以通过链式设置大部分常用的属性值  */     superTextView.setLeftIcon(drawable)             .setLeftString("")             .setLeftTVColor(0)             .setLeftTopString("")             .setLeftTopTVColor(0)             .setLeftBottomString("")             .setLeftBottomTVColor(0)             .setLeftBottomString2("")             .setLeftBottomTVColor2(0)             .setRightString("")             .setRightTVColor(0)             .setCbChecked(true)             .setCbBackground(drawable)             .setRightIcon(drawable)             .setRightString("")             .setRightTVColor(0)             .setLeftString("")             .setOnSuperTextViewClickListener(new SuperTextView.OnSuperTextViewClickListener() {                 @Override                 public void onSuperTextViewClick() {                     super.onSuperTextViewClick();                     //do something                 }                 @Override                 public void onLeftTopClick() {                     super.onLeftTopClick();                     //do something                 }                 @Override                 public void onLeftBottomClick() {                     super.onLeftBottomClick();                     //do something                 }                 @Override                 public void onLeftBottomClick2() {                     super.onLeftBottomClick2();                     //do something                 }             });4.点击事件(可根据需求选择实现某个点击事件)    superTextView.setOnSuperTextViewClickListener(new SuperTextView.OnSuperTextViewClickListener() {                 @Override                 public void onSuperTextViewClick() {                     super.onSuperTextViewClick();                     //do something                 }                 @Override                 public void onLeftTopClick() {                     super.onLeftTopClick();                     //do something                 }                 @Override                 public void onLeftBottomClick() {                     super.onLeftBottomClick();                     //do something                 }                 @Override                 public void onLeftBottomClick2() {                     super.onLeftBottomClick2();                     //do something                 }             });5.属性说明(以下属性全部可以通过xml文件配置和代码进行设置)    <declare-styleable name="SuperTextView">     <attr name="sLeftIconRes" format="reference"/>     <attr name="sRightIconRes" format="reference"/>     <attr name="sRightCheckBoxRes" format="reference"/>     <attr name="sLeftTextString" format="string"/>     <attr name="sCenterTextString" format="string"/>     <attr name="sRightTextString" format="string"/>     <attr name="sLeftTopTextString" format="string"/>     <attr name="sLeftBottomTextString" format="string"/>     <attr name="sLeftBottomTextString2" format="string"/>     <attr name="sTopLineMargin" format="dimension"/>     <attr name="sBottomLineMargin" format="dimension"/>     <attr name="sBothLineMargin" format="dimension"/>     <attr name="sLeftIconMarginLeft" format="dimension"/>     <attr name="sLeftTextMarginLeft" format="dimension"/>     <attr name="sLeftTopTextMarginLeft" format="dimension"/>     <attr name="sLeftBottomTextMarginLeft" format="dimension"/>     <attr name="sLeftBottomTextMarginLeft2" format="dimension"/>     <attr name="sRightIconMarginRight" format="dimension"/>     <attr name="sRightTextMarginRight" format="dimension"/>     <attr name="sRightCheckBoxMarginRight" format="dimension"/>     <attr name="sRightCheckBoxShow" format="boolean"/>     <attr name="sIsChecked" format="boolean"/>     <attr name="sUseRipple" format="boolean"/>     <attr name="sLeftTextSize" format="dimension"/>     <attr name="sLeftTopTextSize" format="dimension"/>     <attr name="sLeftBottomTextSize" format="dimension"/>     <attr name="sLeftBottomTextSize2" format="dimension"/>     <attr name="sRightTextSize" format="dimension"/>     <attr name="sCenterTextSize" format="dimension"/>     <attr name="sBackgroundColor" format="color"/>     <attr name="sLeftTextColor" format="color"/>     <attr name="sLeftTopTextColor" format="color"/>     <attr name="sLeftBottomTextColor" format="color"/>     <attr name="sLeftBottomTextColor2" format="color"/>     <attr name="sRightTextColor" format="color"/>     <attr name="sCenterTextColor" format="color"/>     <attr name="sLineShow" format="enum">         <enum name="none" value="0"/>         <enum name="top" value="1"/>         <enum name="bottom" value="2"/>         <enum name="both" value="3"/>     </attr> </declare-styleable>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值