ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Android的图文混合实现之TextView+html加载图片,开源至上

2021-12-23 13:00:54  阅读:197  来源: 互联网

标签:缩放 float private height width html Android public TextView


popView.findViewById(R.id.image_scale_rll).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

if (popupWindow != null && popupWindow.isShowing()) {

popupWindow.dismiss();

}

}

});

popupWindow = new PopupWindow(popView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

popupWindow.setFocusable(true);

popupWindow.setOutsideTouchable(true);// 设置允许在外点击消失

ColorDrawable dw = new ColorDrawable(0x50000000);

popupWindow.setBackgroundDrawable(dw);

}

@Override

public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {

// 处理标签

if (tag.toLowerCase(Locale.getDefault()).equals(“img”)) {

// 获取长度

int len = output.length();

// 获取图片地址

ImageSpan[] images = output.getSpans(len - 1, len, ImageSpan.class);

String imgURL = images[0].getSource();

// 使图片可点击并监听点击事件

output.setSpan(new ClickableImage(mContext, imgURL), len - 1, len, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

}

}

private class ClickableImage extends ClickableSpan {

private String url;

private Context context;

public ClickableImage(Context context, String url) {

this.context = context;

this.url = url;

}

@Override

public void onClick(View widget) {

// 进行图片点击之后的处理

popupWindow.showAtLocation(widget, Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0);

final Target target = new Target() {

@Override

public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {

tecent_chat_image.setImageBitmap(bitmap);

}

@Override

public void onBitmapFailed(Drawable errorDrawable) {

tecent_chat_image.setImageDrawable(errorDrawable);

}

@Override

public void onPrepareLoad(Drawable placeHolderDrawable) {

tecent_chat_image.setImageDrawable(placeHolderDrawable);

}

};

tecent_chat_image.setTag(target);

ImageLoad.loadPlaceholder(context, url, target);

}

}

(4)自定义支持手势缩放

从网上找的代码感觉很好用:

ZoomImageView

import android.content.Context;

import android.graphics.Matrix;

import android.graphics.RectF;

import android.graphics.drawable.Drawable;

import android.support.v4.view.ViewPager;

import android.util.AttributeSet;

import android.view.GestureDetector;

import android.view.MotionEvent;

import android.view.ScaleGestureDetector;

import android.view.ScaleGestureDetector.OnScaleGestureListener;

import android.view.View;

import android.view.View.OnTouchListener;

import android.view.ViewConfiguration;

import android.view.ViewTreeObserver.OnGlobalLayoutListener;

import android.widget.ImageView;

//图片手势缩放,点击放大

public class ZoomImageView extends ImageView implements OnGlobalLayoutListener, OnScaleGestureListener, OnTouchListener {

private boolean mOnce = false;

private float mInitScale;

//初始化的缩放量

private float mMidScale;

//最大缩放量

private float mMaxScale;

//中间缩放量

private Matrix mScaleMatrix = null;

private ScaleGestureDetector mScaleGestureDetector = null;

//缩放手势监听

private int mLastPointerCount;

//触摸点发生移动时的触摸点个数

private float mLastX;

private float mLastY;

//记录移动之前按下去的那个坐标点

private int mTouchSlop;

//开始移动的滑动距离

private boolean isCanDrag;

//是否可以移动

private boolean isCheckLeftAndRight;//是否需要考虑left和right出现白边

private boolean isCheckTopAndBottom;//是否需要考虑top和boottom出现白边

private GestureDetector mGestureDetector = null;

//手势监听,如果正在缩放中就不向下执行,防止多次双击

private boolean isAutoScale;

/**

  • Matrix的对图像的处理

  • Translate 平移变换

  • Rotate 旋转变换

  • Scale 缩放变换

  • Skew 错切变换

*/

public ZoomImageView(Context context) {

this(context , null);

}

public ZoomImageView(Context context, AttributeSet attrs) {

this(context, attrs , 0);

}

public ZoomImageView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

mScaleMatrix = new Matrix();

setScaleType(ScaleType.MATRIX);//设置缩放类型

mScaleGestureDetector = new ScaleGestureDetector(context, this);

setOnTouchListener(this);

mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();

mGestureDetector = new GestureDetector(

context,

new GestureDetector.SimpleOnGestureListener() {

@Override

public boolean onDoubleTap(MotionEvent e) {

if(isAutoScale == true) {

return true;

}

//缩放的中心点

float x = e.getX();

float y = e.getY();

//如果当前缩放值小于这个临界值 则进行放大

if(getCurrentScale() < mMidScale) {

postDelayed(new AutoScaleRunnable(mMidScale, x, y) , 16);

isAutoScale = true;

}

else { //如果当前缩放值大于这个临界值 则进行缩小操作 缩小到mInitScale

postDelayed(new AutoScaleRunnable(mInitScale, x, y) , 16);

isAutoScale = true;

}

return true;

}

});

}

/**

  • ImageView

*图片初始化其大小,把图片定位到屏幕中央,并进行初始化缩放适应屏幕

*/

@Override

public void onGlobalLayout() {

if(mOnce == false) {

//获取imageview宽高

int width = getWidth();

int height = getHeight();

Drawable drawable = getDrawable();

if(drawable == null) {

return;

}

int drawableWidth = drawable.getIntrinsicWidth();

int drawableHeight = drawable.getIntrinsicHeight();

float scale = 1.0f;

// 如果图片的宽或者高大于屏幕,则缩放至屏幕的宽或者高

if(drawableWidth > width && drawableHeight < height) {

scale = width * 1.0f / drawableWidth;

}

if(drawableWidth < width && drawableHeight > height) {

scale = height * 1.0f / drawableHeight;

}

// 如果宽和高都大于屏幕,则让其按按比例适应屏幕大小

if(drawableWidth > width && drawableHeight > height) {

scale = Math.min(width * 1.0f / drawableWidth , height * 1.0f / drawableHeight);

}

if(drawableWidth < width && drawableHeight < height) {

scale = Math.min(width * 1.0f / drawableWidth , height * 1.0f / drawableHeight);

}

// 图片移动至屏幕中心

mInitScale = scale;

mMidScale = mInitScale * 2;

mMaxScale = mInitScale * 4;

int dx = width / 2 - drawableWidth / 2;

int dy = height / 2 - drawableHeight / 2;

mScaleMatrix.postTranslate(dx, dy);

mScaleMatrix.postScale(mInitScale , mInitScale , width / 2 , height / 2);

setImageMatrix(mScaleMatrix);

mOnce = true;

}

}

@Override

protected void onAttachedToWindow() {

super.onAttachedToWindow();

getViewTreeObserver().addOnGlobalLayoutListener(this);

}

@SuppressWarnings(“deprecation”)

@Override

protected void onDetachedFromWindow() {

super.onDetachedFromWindow();

getViewTreeObserver().removeGlobalOnLayoutListener(this);

}

/**

  • 获取当前缩放比例

*/

public float getCurrentScale() {

//Matrix为一个3*3的矩阵,一共9个值,复制到这个数组当中

float[] values = new float[9];

mScaleMatrix.getValues(values);

return values[Matrix.MSCALE_X];//取出图片宽度的缩放比例

}

/**

*处理图片缩放

*/

@Override

public boolean onScale(ScaleGestureDetector detector) {

float scale = getCurrentScale();

//当前相对于初始尺寸的缩放(之前matrix中获得)

float scaleFactor = detector.getScaleFactor();

//这个时刻缩放的/当前缩放尺度 (现在手势获取)

if(getDrawable() == null) {

return true;

}

//按比例放大缩小

if( (scale < mMaxScale && scaleFactor > 1.0f) || (scale > mInitScale && scaleFactor < 1.0f) ) {

if(scale * scaleFactor < mInitScale) {

scaleFactor = mInitScale / scale;

}

if(scale * scaleFactor > mMaxScale) {

scaleFactor = mMaxScale / scale;

}

}

//缩放中心是屏幕中心点

mScaleMatrix.postScale(scaleFactor , scaleFactor , detector.getFocusX() , detector.getFocusY());

checkBorderAndCenterWhenScale();

setImageMatrix(mScaleMatrix);

return true;

}

/**

  • 获得图片放大缩小以后的宽和高,以及l,r,t,b

*/

private RectF getMatrixRectF() {

Matrix matrix = mScaleMatrix;

RectF rectF = new RectF();

Drawable drawable = getDrawable();

if(drawable != null) {

rectF.set(0 , 0 , drawable.getIntrinsicWidth() , drawable.getIntrinsicHeight());

matrix.mapRect(rectF);

}

return rectF;

}

/**

  • 在缩放时,解决上下左右留白的情况

*/

private void checkBorderAndCenterWhenScale() {

RectF rect = getMatrixRectF();

float deltaX = 0.0f;

float deltaY = 0.0f;

int width = getWidth();

int height = getHeight();

if(rect.width() >= width) {

if(rect.left > 0) {

deltaX = -rect.left;

}

if(rect.right < width) {

deltaX = width - rect.right;

}

}

if(rect.height() >= height) {

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

if(rect.top > 0) {

deltaY = -rect.top;

}

if(rect.bottom < height) {

deltaY = height - rect.bottom;

}

}

if(rect.width() < width) {

deltaX = width / 2f - rect.right + rect.width() / 2f;

}

if(rect.height() < height) {

deltaY = height / 2f - rect.bottom + rect.height() / 2f;

}

mScaleMatrix.postTranslate(deltaX, deltaY);

}

//缩放开始一定要返回true该detector是否处理后继的缩放事件。返回false时,不会执行onScale()

@Override

public boolean onScaleBegin(ScaleGestureDetector detector) {

return true;

}

//缩放结束时

@Override

public void onScaleEnd(ScaleGestureDetector detector) {

// TODO Auto-generated method stub

}

/**

*处理现图片放大后移动查看

*/

@Override

public boolean onTouch(View v, MotionEvent event) {

//双击事件进行关联

if(mGestureDetector.onTouchEvent(event)) {

return true;

}

mScaleGestureDetector.onTouchEvent(event);

//缩放的中心点

float x = 0;

float y = 0;

int pointerCount = event.getPointerCount();

//可能出现多手指触摸的情况 ACTION_DOWN事件只能执行一次所以多点触控不能在down事件里面处理

for(int i = 0; i < pointerCount ; i++) {

x += event.getX(i);

y += event.getY(i);

}

//取平均值,得到的就是多点触控后产生的那个点的坐标

x /= pointerCount;

y /= pointerCount;

if(mLastPointerCount != pointerCount) {

isCanDrag = false;

mLastX = x;

mLastY = y;

}

mLastPointerCount = pointerCount;

RectF rectF = getMatrixRectF();

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

if(rectF.width() > getWidth() + 0.01 || rectF.height() > getHeight() + 0.01) {

if(getParent() instanceof ViewPager) {

getParent().requestDisallowInterceptTouchEvent(true);

}

}

break;

case MotionEvent.ACTION_MOVE:

if(rectF.width() > getWidth() + 0.01 || rectF.height() > getHeight() + 0.01) {

if(getParent() instanceof ViewPager) {

getParent().requestDisallowInterceptTouchEvent(true);

}

}

float deltaX = x - mLastX;

float deltaY = y - mLastY;

if(isCanDrag == false) {

isCanDrag = isMoveAction(deltaX , deltaY);

}

if(isCanDrag == true) {

if(getDrawable() != null) {

isCheckLeftAndRight = true;

isCheckTopAndBottom = true;

if(rectF.width() < getWidth()) {

isCheckLeftAndRight = false;

deltaX = 0;

}

if(rectF.height() < getHeight()) {

isCheckTopAndBottom = false;

deltaY = 0;

}

mScaleMatrix.postTranslate(deltaX, deltaY);

checkBorderWhenTranslate();

setImageMatrix(mScaleMatrix);

}

}

mLastX = x;

mLastY = y;

break;

case MotionEvent.ACTION_UP:

mLastPointerCount = 0;

break;

case MotionEvent.ACTION_CANCEL:

mLastPointerCount = 0;

break;

}

return true;

}

/**

  • 放大移动的过程中解决上下左右留白的情况

*/

private void checkBorderWhenTranslate() {

RectF rectF = getMatrixRectF();

float deltaX = 0;

float deltaY = 0;

//可以上下拖动且距离屏幕上方留白 根据Android系统坐标系往上移动的值要取负值

int width = getWidth();

int height = getHeight();

if(rectF.top > 0 && isCheckTopAndBottom) {

deltaY = -rectF.top;

}

if(rectF.bottom < height && isCheckTopAndBottom) {

deltaY = height - rectF.bottom;

}

if(rectF.left > 0 && isCheckLeftAndRight) {

deltaX = -rectF.left;

}

if(rectF.right < width && isCheckLeftAndRight) {

deltaX = width - rectF.right;

}

mScaleMatrix.postTranslate(deltaX, deltaY);

}

/**

*判断是否可以拖动

*/

private boolean isMoveAction(float deltaX, float deltaY) {

return Math.sqrt(deltaX * deltaX + deltaY * deltaY) > mTouchSlop;

}

/**

  • View.postDelay()方法延时执行双击放大缩小 在主线程中运行 没隔16ms给用户产生过渡的效果的

*/

private class AutoScaleRunnable implements Runnable {

//缩放目标值

private float mTargetScale;

//缩放中心点

private float x;

private float y;

private final float BIGGER = 1.07f;

private final float SMALL = 0.93f;

//可能是BIGGER可能是SMALLER

private float tmpScale;

//构造传入缩放目标值,缩放的中心点

public AutoScaleRunnable(float mTargetScale, float x, float y) {

this.mTargetScale = mTargetScale;

this.x = x;

this.y = y;

if(getCurrentScale() < mTargetScale) {

tmpScale = BIGGER; //双击放大

}

else if(getCurrentScale() > mTargetScale) {

tmpScale = SMALL; ///双击缩小

}

}

@Override

public void run() {

//执行缩放

mScaleMatrix.postScale(tmpScale , tmpScale , x , y);

checkBorderAndCenterWhenScale();

setImageMatrix(mScaleMatrix);

float currentScale = getCurrentScale();

//如果当前正在放大操作并且当前的放大尺度小于缩放的目标值,或者正在缩小并且缩小的尺度大于目标值

//则再次延时16ms递归调用直到缩放到目标值

if( (tmpScale > 1.0f && currentScale < mTargetScale) || (tmpScale < 1.0f && currentScale > mTargetScale) ) {

postDelayed(this , 16); //??this???

}

else {

//这里我们mTrgetScale / currentScale 用目标缩放尺寸除以当前的缩放尺寸

//得到缩放比,重新执行缩放到

//mMidScale或者mInitScale

float scale = mTargetScale / currentScale;

mScaleMatrix.postScale(scale, scale, x, y);

checkBorderAndCenterWhenScale();

setImageMatrix(mScaleMatrix);

isAutoScale = false;

}

}

}

}

(5)图片变换与加载

其中transform(new ImageTransform())

是图片变换的,可以自定义实现图片展示的样子,这里我加了一个图片比例缩放的变换,和屏幕宽度匹配

CompressTransformation

public class CompressTransformation implements Transformation {

public CompressTransformation() {

}

@Override

public Bitmap transform(Bitmap source) {

return WeChatBitmapToByteArray(source);

}

private Bitmap WeChatBitmapToByteArray(Bitmap source) {

// 首先进行一次大范围的压缩

ByteArrayOutputStream output = new ByteArrayOutputStream();

source.compress(Bitmap.CompressFormat.JPEG, 100, output);

float zoom = (float) Math.sqrt(100 * 1024 / (float) output.toByteArray().length); //获取缩放比例

// 设置矩阵数据

Matrix matrix = new Matrix();

matrix.setScale(zoom, zoom);

// 根据矩阵数据进行新bitmap的创建

Bitmap resultBitmap = Bitmap.createBitmap(source, 0, 0, source.getWidth(), source.getHeight(), matrix, true);

output.reset();

resultBitmap.compress(Bitmap.CompressFormat.JPEG, 100, output);

if (source != resultBitmap) {

source.recycle();

}

try {

output.close();

} catch (IOException e) {

e.printStackTrace();

}

return resultBitmap;

}

@Override

public String key() {

return “CompressTransformation”;

}

ImageLoad

public class ImageLoad {

public static void loadPlaceholder(Context context, String url, Target target) {

Picasso picasso = new Picasso.Builder(context).loggingEnabled(true).build();

picasso.load(url)

.placeholder(R.drawable.moren)

.error(R.drawable.moren)

.transform(new ImageTransform())

.into(target);

}

}

ImageTransform

public class ImageTransform implements Transformation {

//图片处理

标签:缩放,float,private,height,width,html,Android,public,TextView
来源: https://blog.csdn.net/m0_65145426/article/details/122104526

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有