Hi,开发者,来见识一下全新的 SuperTextView 吧!html
![]() |
![]() |
![]() |
![]() |
💡以上演示,均由 SuperTextView 提供强力驱动支持。android
SuperTextView 的不同凡响在于,它只是一个简单的控件元素,但却不只仅是一个控件。它生而灵动多变,强大的内嵌逻辑,为你持续提供丰富多彩却异常简单的开发支持。c++
SuperTextView 将你从复杂的渲染逻辑中解救出来,一行简单的 API 接口调用,炫目的渲染效果即刻呈现。git
你只需享受本身所编写出的惊人视效,剩下的一切就放心交给 SuperTextView。github
在全新的 v3.2.1
版本中,SuperTextView 再一次从新定义了本身。开发者,来看看精心为你准备的惊喜吧!🎉🎉🎉缓存
这一次,SuperTextView 为开发者带来了强力的 Gif 驱动支持。bash
若是在过去,你曾经为如何在 Android 平台上展现一张 Gif 图而苦恼多日,或是困于一些三方 Gif 库的性能深渊中迷失方向。那么如今,SuperTextView 将完全改变这一现状。网络
Gif 图与 SuperTextView 生而浑然天成,所以,你能够经过最熟悉的、最天然的方式来让一张 Gif 图得到展现。就像你过去展现一张普通图片那样简单。app
得益于 c/c++ 的超高性能,以及对内存的精确操做。SuperTextView 经过使用 c/c++ 为移动平台专门定制了性能强悍的 Gif 驱动引擎。异步
SuperTextView 的 Gif 引擎,可以精确操做图像像素内存,在 Gif 图像的帧刷新时,只对局部像素内存进行更新,这让 Gif 图像渲染效率获得了质的飞跃。
经过异步离屏渲染及多缓冲技术,使得 SuperTextView 即便在流畅展现超大 Gif 图像的时候,依旧可以保持应用界面丝滑的流畅度,以及灵敏的响应速度。
💡以上 Demo 中,使用 SuperTextView 展现了一张 近17M 大小,包含有 265 帧图像的 Gif 图,用户界面依旧无比流畅。
在 SuperTextView 中展现一张 Gif 图,超简单!
你能够直接 XML 布局文档中配置,或者在代码中进行添加。
<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 图。
stv_1 = (SuperTextView) findViewById(R.id.stv_1);
stv_1.setDrawable(R.drawable.gif_1);
复制代码
就是这么简单、天然,SuperTextView 可让你毫无感知,就能配置展现一张 Gif 图。
在 SuperTextView 的内核逻辑中,SuperTextView 可以智能的对普通图和 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();
复制代码
SuperTextView 凭借对 Gif 渲染的无缝融合,此前 Drawable1 和 Drawable2 的一切配置项,在展现 Gif 图时,也一样可以生效。
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"
...
/>
复制代码
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 图加上边框。
<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");
复制代码
在新版本的 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 可以帮助开发者轻松的完成即将到来的这一过渡转变。
在项目 build.gradle
中加入:
dependencies {
...
implementation 'com.github.chenBingX:SuperTextView:v3.2.1'
...
}
复制代码
【传送门】:《SuperTextView 开发参考文档》- 你能够学习到如何使用 SuperTextView 来提升你的应用的构建效率
【传送门】:《SuperTextView API文档》— 你能够查看 SuperTextView 全部可用 API 及属性
- 若是你喜欢 SuperTextView,就到 Github 点个 star 🌟 支持哦!
- CoorChice 会不按期的在博客平台分享干货,快进入 CoorChice的【我的主页】 关注一波吧。