【翻譯】 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編輯釋出，轉載請注明出處，謝謝。