Multi-Column Text Displays in Android

Question

I want to display text in 2 column.

Ex. I have large String , First string add in first column and after getting end of screen height , text should be add on second column. like news papaer.

I have try below code , but its give me java.lang.StringIndexOutOfBoundsException

java code

final TextView tvl = (TextView)findViewById(R.id.textl);
    final TextView tvr = (TextView)findViewById(R.id.textr);
    final String text = "sdf";
    tvl.post(new Runnable() {
    @Override
    public void run() {
    TextMeasure(text,tvl,tvr);
    }
    });
private void TextMeasure(String text,
            TextView tvl,TextView tvr) {
            // Get number of lines of text that will fit on the screen
            int linesPerScreen = tvl.getHeight()/(tvl.getLineHeight() );
            // Measure how much text will fit across the TextView
            Paint paint = tvl.getPaint();
            int textWidth = paint.breakText(text, 0, text.length(),
            true, tvl.getWidth(), null);
            // Total amount of text to fill the TextView is
            // approximately:
            int totalText = textWidth * linesPerScreen;
            String leftText = text.substring(0,totalText);
            String rightText = text.substring(totalText,
            text.length());
            tvl.setText(leftText);
            tvr.setText(rightText);
            }

xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  android:orientation="horizontal"
  android:weightSum="2"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="@string/hello_world" />
     <TextView
    android:id="@+id/textr"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="@string/hello_world" />

</LinearLayout>

Answer 1

I just created an example project which renders text to multiple columns: https://github.com/viht0ri/ColumnLayout

This approach uses android/text/Layout class to format and draw the text.

protected void onDraw(Canvas canvas) {
    if(mTextLayoutNeeded) {
        createLayouts(getWidth(), getHeight());
    }
    super.onDraw(canvas);
    canvas.save();
    canvas.translate(getPaddingLeft(), getPaddingTop());
    for(Layout l : layouts) {
        l.draw(canvas);
        canvas.translate(mColumnWidth, 0);
        canvas.translate(mSpacing, 0);
    }
    canvas.restore();
}

private void createLayouts(int width, int height) {
    layouts.clear();
    if(mText == null) {
        return;
    }
    int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
    int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
    Layout masterLayout = createLayout(mColumnWidth, mText, mPaint);
    int startLine = 0;
    int usedWidth = 0;
    while(usedWidth < availableWidth - mSpacing - mColumnWidth) {
        int startLineTop = masterLayout.getLineTop(startLine);
        int endLine = startLine;
        for(int i = startLine; i < masterLayout.getLineCount(); i++) {
            if(masterLayout.getLineBottom(i) - startLineTop < availableHeight) {
                endLine = i;
            } else if(endLine == startLine) {
                //A large image can be larger than the available height, skip the content
                Toast.makeText(getContext(), "Skipping too large content", Toast.LENGTH_SHORT).show();
                startLine++;
                startLineTop = masterLayout.getLineTop(startLine);
                endLine = startLine;
            } else {
                break;
            }
        }
        int columnStart = masterLayout.getLineStart(startLine);
        int columnEnd = masterLayout.getLineEnd(endLine);
        layouts.add(createLayout(mColumnWidth, mText, columnStart, columnEnd, mPaint));
        if(endLine == masterLayout.getLineCount() - 1) {
            break;
        }
        usedWidth += mColumnWidth;
        startLine = endLine;
    }
    mTextLayoutNeeded = false;
}

private static Layout createLayout(int width, CharSequence text, TextPaint paint) {
    return new StaticLayout(text, 0, text.length(), paint,
            width, Layout.Alignment.ALIGN_NORMAL, 1f, 0, true);
}

private static Layout createLayout(int width, CharSequence text, int offset, int end, TextPaint paint) {
    return new StaticLayout(text, offset, end, paint,
            width, Layout.Alignment.ALIGN_NORMAL, 1f, 0, true);
}

Answer 2

在尝试从文本获取子字符串之前，请确保totalText变量小于text.length（）

Answer 3

You can use Table Row and insert TextView inside it. Then break the string in two parts and put them in two textview placed adjacent to each other.

<TableRow>

   <TextView
        android:text=""
        android:id="+id/col1"
        android:padding="10dip" />

    <TextView
        android:text=""
        android:id="+id/col2"
        android:gravity="right"
        android:padding="10dip" />

</TableRow>

After breaking string in two parts put them in two TextView in TableLayout.

This would work.