android 点击图片事件,android图文混排点击事件
图文混排顾名思义就是把文字和图片混合排列在一起,比较简单的需求我们也可以通过TextView和ImageView配合使用来达到目的,但是遇到稍微复杂一些的情况这种方法就不适用了。
做这样一个按钮:
对于你来说没有任何难度:LinearLayout+TextView+ImageView搞定;或者可以直接使用TextView的drawableLeft属性。
这里记录两种复杂情况的处理方法:
为部分文字添加点击事件;
图文混排,图片居中,图片可点击。
1. 为部分文字添加点击事件
我最终实现的效果是这个样子的:
可点击文字显示为特殊颜色,并可以点击。个人觉得这个最大的特色就是可以像普通文本一样换行,这是组合控件所不能实现的。
这里使用了SpannableString和ClickableSpan实现,具体代码如下:
ClickSpan继承自ClickableSpan:
import android.text.TextPaint;
import android.text.style.ClickableSpan;
import android.view.View;
import com.travis.uqmei.utils.ToastUtil;
/**
* Created by travis on 16/9/18.
*/
public class ClickSpan extends ClickableSpan {
private String txt;
public ClickSpan(String txt){
this.txt = txt;
}
@Override
public void onClick(View widget) {
String content = String.format("ClickSpan is clicked, and txt is %s ",txt);
ToastUtil.show(content);
}
@Override
public void updateDrawState(TextPaint ds) {
//根据自己的需求定制文本的样式
ds.setColor(ds.linkColor);
ds.setUnderlineText(false);
}
}
为TextView设置部分文字可点击效果:
TextView tv = (TextView) findViewById(R.id.tv);
String from = "张全蛋";
String to = "赵铁柱";
String txt = String.format("%s回复@%s:我是富士康3号流水线的张全蛋," +
"英文名叫Micheal Jack,发文名叫helodie Jaqueline。", from, to);
SpannableString span = new SpannableString(txt);
ClickSpan clickSpan = new ClickSpan(to);
span.setSpan(clickSpan, txt.indexOf(to),
txt.indexOf(to) + to.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(span);
tv.setMovementMethod(LinkMovementMethod
.getInstance());
2. 图文混排,图片居中,图片可点击
效果如下:
可点击效果通过上述ClickSpan实现,图文混排通过VerticalImageSapn实现。
VerticalImageSpan继承自ImageSpan:
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.text.style.ImageSpan;
/**
* 垂直居中的ImageSpan
*
* @author travis
*/
public class VerticalImageSpan extends ImageSpan {
public VerticalImageSpan(Drawable drawable) {
super(drawable);
}
public int getSize(Paint paint, CharSequence text, int start, int end,
Paint.FontMetricsInt fontMetricsInt) {
Drawable drawable = getDrawable();
Rect rect = drawable.getBounds();
if (fontMetricsInt != null) {
Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
int fontHeight = fmPaint.bottom - fmPaint.top;
int drHeight = rect.bottom - rect.top;
int top = drHeight / 2 - fontHeight / 4;
int bottom = drHeight / 2 + fontHeight / 4;
fontMetricsInt.ascent = -bottom;
fontMetricsInt.top = -bottom;
fontMetricsInt.bottom = top;
fontMetricsInt.descent = top;
}
return rect.right;
}
@Override
public void draw(Canvas canvas, CharSequence text, int start, int end,
float x, int top, int y, int bottom, Paint paint) {
Drawable drawable = getDrawable();
canvas.save();
int transY = 0;
transY = ((bottom - top) - drawable.getBounds().bottom) / 2 + top;
canvas.translate(x, transY);
drawable.draw(canvas);
canvas.restore();
}
}
代码设置:
TextView tv = (TextView) findViewById(R.id.tv);
String icon = "icon";
String from = "张全蛋"+icon;
String to = "赵铁柱";
String txt = String.format("%s回复@%s:我是富士康3号流水线的张全蛋," +
"英文名叫Micheal Jack,发文名叫helodie Jaqueline。", from, to);
//设置ClickSpan,为部分文字("icon")添加点击效果
SpannableString span = new SpannableString(txt);
ClickSpan clickSpan = new ClickSpan(icon);
span.setSpan(clickSpan, txt.indexOf(icon),
txt.indexOf(icon) + icon.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
//设置ImageSpan,占用可点击文字("icon")的位置
Bitmap bitmap = ImageUtils.resize(BitmapFactory.decodeResource(getResources(),
R.mipmap.uqmei_icon_contact), DensityUtil.sp2px(this, 12f));
BitmapDrawable drawable = new BitmapDrawable(bitmap);
drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
span.setSpan(new VerticalImageSpan(drawable),
txt.indexOf(icon), txt.indexOf(icon) + icon.length(),
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//设置TextView
tv.setText(span);
tv.setHighlightColor(Color.TRANSPARENT);//消除点击时的背景色
tv.setMovementMethod(LinkMovementMethod.getInstance());
android 点击图片事件,android图文混排点击事件相关推荐
- 安卓直接展示html,Android textView展示html图片,实现图文混排,点击查看大图片
Android textView展示html图片,实现图文混排,点击查看大图片 最近要展示html在textView上,实现图文混排,并且图片可以点击放大,所以去研究了一下,效果图如下: 我们知道te ...
- android论文引用图片,Android自动解析html带图片,实现图文混排
在android中,如何将html代码转换为text,然后显示在textview中呢,有一个简单直接的方法: Java textView.setText(Html.fromHtml(content)) ...
- ListView异步加载图片,完美实现图文混排
昨天参加一个面试,面试官让当场写一个类似于新闻列表的页面,文本数据和图片都从网络上获取,想起我还没写过ListView异步加载图片并实现图文混排效果的文章,so,今天就来写一下,介绍一下经验. Lis ...
- nodejs路由控制图文混排
nodejs通过路由升级,接口处返回文字和图片,进行图文混排. 思考: 当第一次请求localhost:8006/buny的时候,会加载buny.html的文档部分,当<img src=&quo ...
- Android 图文混排 通过webview实现并实现点击图片
在一个开源项目看到是用的webview 实现的 1. 这是在asset中的一个模板html <html> <head> <title>News Detail< ...
- 两文本一图片android,Android富文本编辑器(二):图文混排以及图片上传处理
对于一个富文本编辑器来说,图文混排是最基本的功能.而从上一篇文章中我们知道图文混排需要使用ImageSpan.下面这段代码摘自我的RichEditText源码: /** * 添加图片 * @param ...
- android textview 添加图片大小,Android_Android中使用TextView实现图文混排的方法,向TextView或EditText中添加图像比 - phpStudy...
Android中使用TextView实现图文混排的方法 向TextView或EditText中添加图像比直接添加文本复杂一点点,需要用到标签. 只有一个src属性,该属性原则上应该指向一个图像地址或可 ...
- android富文本图片自适应,Android Span富文本图文混排 - ImageSpan(图文垂直居中)...
###为文字实现很丰富的特殊效果,当然少不了图文混排 so... 直接上效果(有直接使用和自定义垂直居中效果) ##1 ImageSpan: ImageSpan(context, resourceId ...
- android多媒体图文混排,干货!!!Android富文本实现图文混排
效果图 rich.jpg 像图中的效果,大家在开发并不少见,大家可能不知道android提供了实现图文混排的类.大家或许会写一个布局或者使用drawableLeft这个属性实现文本的左侧图标. and ...
最新文章
- SQL Server:定时作业的设置方法
- SAP Spartacus里的HTTPErrorInterceptor的设计原理
- ifix怎么装服务器系统上,ifix服务器和客户端配置
- 读书笔记2013第16本:《删除:大数据取舍之道》
- BZOJ 4538: [Hnoi2016]网络
- angular HttpClient getbyid 方法获取数据
- OpenResty安装下载
- 南京铁道学院计算机应用,南京铁道职业技术学院铁道交通运营管理专业
- python 发送email邮件带附件
- Quartus II bilibili 入门 EDA实用技术教程(一)---verilog语言编程基础
- C# 电子白板软件开发
- R3黯然史:从昔日最风光,到如今危机重重
- Gmail终于对中文用户开放注册! update:2008.5.6
- Verilog编写VGA控制器
- Xcode debug时如何看crash的call stack
- java anon,试图找到泄漏!对于pmap来说,anon意味着什么?
- 为什么要用VR全景?5个答案告诉你
- 系统管理类命令(一)
- CVPR 2021 | 港科大:如何利用闪光图像(flash image)来去除反光?
- 【Markdown语法】字体颜色大小及文字底色设置