`

自定义View实现HTML图文环绕效果

阅读更多
Android中并没有提供HTML图文环绕效果的View,最接近的算是TextView中的ImageSpan了,但并未完全实现图文环绕(图文混排)的效果。
1、Android系统TextView的ImageSpan实现图文环绕


代码如下:
TextView tv = new TextView(this);
        
SpannableString spanStr = new SpannableString("掌声那历史的房间里是副经理撒旦法阿斯顿及福利费是到发顺丰");
ImageSpan imageSpan = new ImageSpan(this, R.drawable.a);
spanStr.setSpan(imageSpan, 3, 5, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
tv.setText(spanStr);
        
setContentView(tv);



2、Android中自定义View实现图文环绕


代码如下:
FloatImageText view = new FloatImageText(this);
view.setText("电视里发生了房间里是积分拉萨积分拉萨积分拉萨减肥啦空间  撒旦法发大水发撒旦法看完了鸡肉味容积率为热键礼物i经二路文件容量为积分拉萨解放路口上飞机撒离开房间爱水立方法拉圣诞节福禄寿");
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.a);
view.setImageBitmap(bm, 30, 30);


import java.util.ArrayList;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Paint.FontMetrics;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
/**
 * 模拟CSS中的float浮动效果
 */
public class FloatImageText extends View {
    private Bitmap mBitmap;
    private final Rect bitmapFrame = new Rect();
    private final Rect tmp = new Rect();
    private int mTargetDentity = DisplayMetrics.DENSITY_DEFAULT;
    
    private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private String mText;
    private ArrayList<TextLine> mTextLines;
    private final int[] textSize = new int[2];

    public FloatImageText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public FloatImageText(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public FloatImageText(Context context) {
        super(context);
        init();
    }
    
    private void init() {
        mTargetDentity = getResources().getDisplayMetrics().densityDpi;
        mTextLines = new ArrayList<TextLine>();
        
        mPaint.setTextSize(14);
        mPaint.setColor(Color.RED);
        
    }
    
    

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int w = 0, h = 0;
        //图片大小
        w += bitmapFrame.width();
        h += bitmapFrame.height();
        
        //文本宽度
        if(null != mText && mText.length() > 0) {
            mTextLines.clear();
            int size = resolveSize(Integer.MAX_VALUE, widthMeasureSpec);
            measureAndSplitText(mPaint, mText, size);
            final int textWidth = textSize[0], textHeight = textSize[1];
            w += textWidth; //内容宽度
            if(h < textHeight) { //内容高度
                h = (int) textHeight;
            }
        }
        
        w = Math.max(w, getSuggestedMinimumWidth());
        h = Math.max(h, getSuggestedMinimumHeight());
        
        setMeasuredDimension(
                resolveSize(w, widthMeasureSpec), 
                resolveSize(h, heightMeasureSpec));
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        //绘制图片
        if(null != mBitmap) {
            canvas.drawBitmap(mBitmap, null, bitmapFrame, null);
        }
        
        //绘制文本
        TextLine line;
        final int size = mTextLines.size();
        for(int i = 0; i < size; i++) {
            line = mTextLines.get(i);
            canvas.drawText(line.text, line.x, line.y, mPaint);
        }
        System.out.println(mTextLines);
    }
    
    
    public void setImageBitmap(Bitmap bm) {
        setImageBitmap(bm, null);
    }
    
    public void setImageBitmap(Bitmap bm, int left, int top) {
        setImageBitmap(bm, new Rect(left, top, 0, 0));
    }
    
    public void setImageBitmap(Bitmap bm, Rect bitmapFrame) {
        mBitmap = bm;
        computeBitmapSize(bitmapFrame);
        requestLayout();
        invalidate();
    }
    
    public void setText(String text) {
        mText = text;
        requestLayout();
        invalidate();
    }
    
    private void computeBitmapSize(Rect rect) {
        if(null != rect) {
            bitmapFrame.set(rect);
        }
        if(null != mBitmap) {
            if(rect.right == 0 && rect.bottom == 0) {
                final Rect r = bitmapFrame;
                r.set(r.left, r.top, 
                        r.left + mBitmap.getScaledHeight(mTargetDentity), 
                        r.top + mBitmap.getScaledHeight(mTargetDentity));
            }
        } else {
            bitmapFrame.setEmpty();
        }
    }
    
    private void measureAndSplitText(Paint p, String content, int maxWidth) {
        FontMetrics fm = mPaint.getFontMetrics();
        final int lineHeight = (int) (fm.bottom - fm.top);
        
        final Rect r = new Rect(bitmapFrame);
//        r.inset(-5, -5);
        
        final int length = content.length();
        int start = 0, end = 0, offsetX = 0, offsetY = 0;
        int availWidth = maxWidth;
        TextLine line;
        boolean onFirst = true;
        boolean newLine = true;
        while(start < length) {
            end++;
            if(end == length) { //剩余的不足一行的文本
                if(start <= length - 1) {
                    if(newLine) offsetY += lineHeight;
                    line = new TextLine();
                    line.text = content.substring(start, end - 1);
                    line.x = offsetX;
                    line.y = offsetY;
                    mTextLines.add(line);
                }
                break;
            }
            p.getTextBounds(content, start, end, tmp);
            if(onFirst) { //确定每个字符串的坐标
                onFirst = false;
                final int height = lineHeight + offsetY;
                if(r.top >= height) { //顶部可以放下一行文字
                    offsetX = 0;
                    availWidth = maxWidth;
                    newLine = true;
                } else if(newLine && (r.bottom >= height && r.left >= tmp.width())) { //中部左边可以放文字
                    offsetX = 0;
                    availWidth = r.left;
                    newLine = false;
                } else if(r.bottom >= height && maxWidth - r.right >= tmp.width()) { //中部右边
                    offsetX = r.right;
                    availWidth = maxWidth - r.right;
                    newLine = true;
                } else { //底部
                    offsetX = 0;
                    availWidth = maxWidth;
                    if(offsetY < r.bottom) offsetY = r.bottom;
                    newLine = true;
                }
            }
            
            if(tmp.width() > availWidth) { //保存一行能放置的最大字符串
                onFirst = true;
                line = new TextLine();
                line.text = content.substring(start, end - 1);
                line.x = offsetX;
                mTextLines.add(line);
                if(newLine) {
                    offsetY += lineHeight;
                    line.y = offsetY;
                } else {
                    line.y = offsetY + lineHeight;
                }
                
                start = end - 1;
            }
        }
        textSize[1] = offsetY;
    }
    
    class TextLine {
        String text;
        int x;
        int y;
        
        @Override
        public String toString() {
            return "TextLine [text=" + text + ", x=" + x + ", y=" + y + "]";
        }
    }
}
  • 大小: 15.1 KB
  • 大小: 39.9 KB
分享到:
评论

相关推荐

    Android自定义View实现转盘旋转的效果

    Android 自定义 View 实现转盘旋转的效果 Android 的自定义 View 为开发者定义和使用个性化的 View 提供了很好的支持,想要使用自己定义的 View,需要继承 View 类,并重写构造函数和 onDraw() 函数。onDraw 函数...

    自定义view实现跑马灯效果

    标题提到的"自定义view实现跑马灯效果"是指当TextView内显示的文字长度小于TextView本身长度时,无法直接实现跑马灯效果,此时需要通过自定义View来完成这一功能。 1. **自定义View的基本步骤** - 创建一个新的...

    BookPage-Android自定义View实现翻页效果,并附带实现教程.zip

    仿真书籍翻页效果BookPageView简介:实现了仿真翻页效果,教程完整地描述了翻页原理分析到性能优化的过程教程博客:Android自定义View——从零开始实现书籍翻页效果(一) Android自定义View——从零开始实现书籍...

    自定义view实现图文 测量文字尺寸

    本篇文章将详细讲解如何通过自定义View实现图文结合的功能,并探讨如何测量和设置文字的位置,包括右对齐、左对齐和居中。 首先,我们需要创建一个新的Java类继承自`View`或`ViewGroup`。这里我们将假设我们选择`...

    自定义View实现炫酷跑马灯效果

    在Android开发中,可以通过自定义View来实现这一效果。本文将深入探讨如何利用自定义View来创建炫酷的跑马灯效果,并讨论图片优化的三种方法。 一、自定义View实现跑马灯效果 1. 基础原理 跑马灯效果本质上是通过...

    Android自定义VIew实现卫星菜单效果浅析

    总的来说,实现自定义卫星菜单效果涉及理解Android View的工作原理,掌握如何解析和使用自定义属性,以及如何绘制和动画化View。通过这种方式,开发者可以构建出独特且互动性强的用户界面,增强应用的用户体验。在...

    Android自定义View实现开关按钮选择效果

    Android自定义View实现开关按钮效果,适用于Android进阶初级开发者参考探讨。博文地址:http://blog.csdn.net/jaynm/article/details/52601935

    android自定义View扫描人脸效果

    本文利用SrcIn实现一个人脸扫描的效果,步骤如下: 1、准备两个人脸照片(一明一暗),暗照片作为背景,亮照片作为src前景显示 2、然后通过SrcIn用一个透明矩形框(Dst)与亮照片(src)取交集即可得出一个亮照片的...

    android项目下对图片高斯模糊毛玻璃自定义view

    本项目旨在教你如何在Android项目中创建一个自定义View,用于实现高斯模糊和毛玻璃效果,并且允许开发者自定义模糊程度。以下是关于这个主题的详细讲解。 一、高斯模糊原理 高斯模糊是一种图像处理技术,通过对图像...

    Android 自定义View实现水平温度计

    本项目"Android 自定义View实现水平温度计"就是这样一个实例,它通过自定义View来展示一个水平方向的温度计,可以直观地显示当前温度状态。以下是关于这个项目的一些关键知识点和实现细节: 1. **自定义View基础**...

    Android自定义View—仿雷达扫描效果

    本篇文章将探讨如何创建一个仿雷达扫描效果的自定义View。雷达扫描效果常见于许多应用中,如游戏、安全监控或者定位服务,它通过模拟雷达探测的方式来展示信息。 首先,我们需要创建一个新的Java类,继承自`View`或...

    Android自定义view实现水印效果

    在Android开发中,自定义View是一种常见的需求,用于实现特定的视觉效果或功能。本教程将探讨如何通过自定义View来实现水印效果,让应用能够在屏幕上动态地展示自定义的文字水印。水印通常用于保护版权或者增加信息...

    Android自定义View——贝塞尔曲线实现水波纹效果

    Android自定义View——贝塞尔曲线实现水波纹效果

    Android自定义View实现QQ气泡效果

    本教程将探讨如何利用Android自定义View实现QQ气泡效果,包括手势拖动、贝塞尔曲线绘制以及动态的回弹和爆炸动画。 首先,我们要理解`自定义View`的概念。自定义View是在Android系统提供的基本View类基础上进行扩展...

    Android 自定义View实现环形带刻度的进度条

    本篇文章将深入探讨如何实现一个环形带刻度的进度条,这个自定义View适用于各种需要展示进度的情况,比如加载、计时器等。我们将通过以下步骤来构建这个组件: 1. **基础布局**: 首先,我们需要一个圆形的布局...

    自定义view之刮刮乐实现

    本文将深入探讨如何实现一个“刮刮乐”效果的自定义View,这是一个常见于各种促销活动中的趣味功能,用户可以刮开一层遮盖物,揭示隐藏的信息或图像。 首先,我们需要了解自定义View的基本流程。创建自定义View通常...

    Android自定义view实现代码复用

    本教程将通过一个具体的示例——HZLoginView,深入讲解如何在Android中创建自定义View并实现代码复用及自定义属性。 首先,理解自定义View的基本步骤: 1. 创建一个新的Java类:通常,我们继承自Android的基础View...

    【原创】Android自定义View实现图片显示并能缩放、拖拽、切换

    本文将详细解析如何通过自定义View来实现图片显示,并且支持手势缩放、拖拽以及切换的功能。 首先,我们需要创建一个新的继承自`View`的类,例如命名为`CustomImageView`。在这个类中,我们将处理所有的绘图逻辑和...

    Android 自定义View实现动画时钟

    本项目"Android 自定义View实现动画时钟"就是一个很好的示例,它展示了如何利用自定义View和ValueAnimator来创建一个实时更新并带有动画效果的时钟组件。 首先,自定义View通常涉及到以下几个步骤: 1. **创建View...

    Android 自定义View实现时钟表盘效果

    本篇文章将探讨如何实现一个时钟表盘效果的自定义View,这涉及到图形绘制、时间更新机制以及动画效果等多个方面的知识。 首先,我们要了解自定义View的基本步骤。创建自定义View通常包括以下几个部分: 1. **定义...

Global site tag (gtag.js) - Google Analytics