【翻译】 Android上实现文字围绕图片的布局

       在这边文章中，我将会介绍如何去实现一个在Android系统中不常见的布局：文字围绕图片布局。

       这个布局并不属于Android模式，但在处理相同的情景下，它是一样的实用。

       在你正式使用它到实践项目前，你需对其进行一定的修改，毕竟它只是一个例子代码

       以下是例子的布局：

 

 <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"></TextView>

            <ImageView
                android:id="@+id/icon"
                android:src="@drawable/rectangle"
                android:layout_width="150dp"
                android:layout_height="150dp"></ImageView>

        </RelativeLayout>

    </ScrollView>

       你可以使用 LeadingMarginSpan.LeadingMarginSpan2 来实现我们的布局。

 

       通过实现LeadingMarginSpan.LeadingMarginSpan2 接口，我们可以指定”围绕段落“的行数以及“段落的第一行”和被围绕对象的边距。

 

class MyLeadingMarginSpan2 implements LeadingMarginSpan.LeadingMarginSpan2 {

        private int margin;
        private int lines;

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

        /**
         * Apply the margin
         *
         * @param first
         * @return
         */
        @Override
        public int getLeadingMargin(boolean first) {
            if (first) {
                return margin;
            } else {
                return 0;
            }
        }

        @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) {}


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

       我们只需要计算文本需要的行数，以及其实际的边距和右边距。

 

       在这里，我们所需的行数=图片的高度，边距=图片的宽度+一点点额外的边距。

 

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextView = (TextView) findViewById(R.id.text);
        mImageView = (ImageView) findViewById(R.id.icon);


        final ViewTreeObserver vto = mImageView.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                mImageView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                finalHeight = mImageView.getMeasuredHeight();
                finalWidth = mImageView.getMeasuredWidth();
                makeSpan();
            }
        });
    }
}

       我的实现简单而原始，用 float textLineHeight = mTextView.getPaint().getTextSize(); 计算文本的行数。读者可以通过添加一些padding，margin 或者你也可以通过类Rect来计算文本的四条边等方式来改善一下代码的效果：

 

 

 /**
     * This method builds the text layout
     */
    private void makeSpan() {

        /**
         * Get the text
         */
        String plainText=getResources().getString(R.string.text_sample);
        

        int allTextStart = 0;
        int allTextEnd = htmlText.length() - 1;

        /**
         * Calculate the lines number = image height.
         * You can improve it... it is just an example
         */
        int lines;
        Rect bounds = new Rect();
        mTextView.getPaint().getTextBounds(plainText.substring(0,10), 0, 1, bounds);

        //float textLineHeight = mTextView.getPaint().getTextSize();
        float fontSpacing=mTextView.getPaint().getFontSpacing();
        lines = (int) (finalHeight/fontSpacing);

        /**
         * Build the layout with LeadingMarginSpan2
         */
        MyLeadingMarginSpan2 span = new MyLeadingMarginSpan2(lines, finalWidth +10 );
        mSpannableString.setSpan(span, allTextStart, allTextEnd,
                   Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

        mTextView.setText(mSpannableString);
    }

       

 

       原文： http://gmariotti.blogspot.com/2014/03/snippet-align-textview-around-image.html

 

       本文由zhiweiofli编辑发布，转载请注明出处，谢谢。