【通译】 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);    }

? ? ? ?

?

?

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

?

?

?

?

?

?

?

?