Android文字周围图片bug

时间:2014-09-30 01:57:35

标签: android textview imageview textwrapping

通过关注此question,我能够在图像周围找到文字。但是,我有以下问题。

enter image description here

如您所见,顶部图像的空间显示在右侧的每个段落中。在问题中有人遇到这个问题,并建议改变' ss.length()'对于'行'。这似乎有效,除非第一段太短,下一段会与图像重叠。

我稍微修改了FlowTextHelper类以使用来自Html的文本。这是我使用的代码:

public class FlowTextHelper {
    private static boolean mNewClassAvailable;

    /* class initialization fails when this throws an exception */
    static {
        try {
            Class.forName("android.text.style.LeadingMarginSpan$LeadingMarginSpan2");
            mNewClassAvailable = true;
        } catch (Exception ex) {
            mNewClassAvailable = false;
        }
    }

    public static void tryFlowText(String text, View thumbnailView, TextView messageView, Display display, int addPadding){
        // There is nothing I can do for older versions, so just return
        if(!mNewClassAvailable) return;

        // Get height and width of the image and height of the text line
        thumbnailView.measure(display.getWidth(), display.getHeight());
        int height = thumbnailView.getMeasuredHeight();
        int width = thumbnailView.getMeasuredWidth() + addPadding;
        messageView.measure(width, height); //to allow getTotalPaddingTop
        int padding = messageView.getTotalPaddingTop();
        float textLineHeight = messageView.getPaint().getTextSize();

        // Set the span according to the number of lines and width of the image
        int lines =  (int)Math.round((height - padding) / textLineHeight);
        //SpannableString ss = new SpannableString(text);
        //For an html text you can use this line:
        if(!text.equals("")) {
            SpannableStringBuilder ss = (SpannableStringBuilder) Html.fromHtml(text);
            ss.setSpan(new MyLeadingMarginSpan2(lines, width), 0, ss.length(), 0);
            messageView.setText(ss);
            messageView.setMovementMethod(LinkMovementMethod.getInstance()); // links

            // Align the text with the image by removing the rule that the text is to the right of the image
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) messageView.getLayoutParams();
            int[] rules = params.getRules();
            rules[RelativeLayout.RIGHT_OF] = 0;
        }
    }
}

public class MyLeadingMarginSpan2 implements LeadingMarginSpan.LeadingMarginSpan2 {
    private int margin;
    private int lines;

    public MyLeadingMarginSpan2(int lines, int margin) {
        this.margin = margin;
        this.lines = lines;
    }

    @Override
    public int getLeadingMargin(boolean first) {
        return first ? margin : 0;
    }

    @Override
    public int getLeadingMarginLineCount() {
        return lines;
    }

    @Override
    public void drawLeadingMargin(Canvas c, Paint p, int x, int dir,
                                  int top, int baseline, int bottom, CharSequence text,
                                  int start, int end, boolean first, Layout layout) {}
}

是什么导致每个段落重复空间,我该如何摆脱它?任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:4)

我花了好几个小时来解决这个问题,但感谢这里找到的答案解决了这个问题: text wrapping around image in android

基本如下:

首先在textview中添加一个边距并设置文本

final RelativeLayout.LayoutParams params = RelativeLayout.LayoutParams)messageView.getLayoutParams();
params.setMargins(marginWidth, 0, 0, 0);
messageView.setText(Html.fromHtml(text));

然后添加OnGlobalLayoutListener并在onGlobalLayout()调用中计算实际需要边距的行数。您将线条分成2个单独的spannables,并仅将Margin添加到第一个:

        messageView.getViewTreeObserver().addOnGlobalLayoutListener( new OnGlobalLayoutListener() {

            @SuppressLint("NewApi")
            @SuppressWarnings("deprecation")
            @Override
            public void onGlobalLayout() {

                int linesCount = messageView.getLayout().getLineCount();
                // restore the margin
                params.setMargins(0, 0, 0, 0);
                SpannableString spanS =  new  SpannableString ( Html.fromHtml(text) );

                if (linesCount <= lines) {
                    spanS.setSpan(new MyLeadingMarginSpan2(lines, width), 0, spanS.length(), 0);
                    messageView.setText(spanS);
                } else {
                    // find the breakpoint where to break the String.
                    int breakpoint = messageView.getLayout().getLineEnd(lines-1);

                    Spannable s1 = new SpannableStringBuilder(spanS, 0, breakpoint);
                    s1.setSpan(new MyLeadingMarginSpan2(lines, width), 0, s1.length(), 0);
                    Spannable s2 = new SpannableStringBuilder(System.getProperty("line.separator"));
                    Spannable s3 = new SpannableStringBuilder(spanS, breakpoint, spanS.length());
                    // It is needed to set a zero-margin span on for the text under the image to prevent the space on the right!
                    s3.setSpan(new MyLeadingMarginSpan2(0, 0), 0, s3.length(), 0);
                    messageView.setText(TextUtils.concat(s1, s2, s3));
                }

                // remove the GlobalLayoutListener
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) {
                     messageView.getViewTreeObserver().removeOnGlobalLayoutListener(this);                           
                 } else {
                     messageView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                 }
            }
        });

答案 1 :(得分:0)

如果您需要在图片周围换行文字,请使用此库FlowTextView

该库表现良好,可以与几行一起使用。但是,它不支持字体的屏幕像素大小。我找到了这个answer的解决方法,以便您可以将像素大小转换为sp。

我希望这可以帮助任何人,而且你不会浪费我使用原始帖子中的问题所花费的时间。