4

I'm learning how to implement one-page reading style, like in Google Currents, for my app.

The contents(text) are adjusted based on the screen size and there is no scroll, no zoom. The overflowed text are in the next page. (I knew that it is using ViewPager.)

Here is the screen shoots: First-page second-page with overflowed text

My questions are:

  • how can I fit(adjust) the contents(text) to the screen?
  • how can I automatically parse overflowed text to the next screen? (so that the user will only need to swipe between screens for reading.)

Also, I'm considering to use TextView for the content. (GoogleCurrent used WebView, I think) My app don't need to use WebView. Will it be possible for textview to achieve like that?

Swan
  • 886
  • 1
  • 9
  • 23

1 Answers1

3

I implemented something like this with several TextViews. First of all, I created a ViewPager for swyping between TextViews. After than I separate long text to several blocks, one per page. To get text for page I use this function:

TextView tv = new TextView(context); //creating text view
        int width = mtv.getWidth() - tv.getPaddingLeft()-tv.getPaddingRight(); //get width for text
        int lHeight = tv.getLineHeight(); getting line height
        int height = ((View)mtv.getParent()).getHeight() - tv.getPaddingBottom()-tv.getPaddingTop(); // getting height of text
        int linesCount = (int)Math.floor((float)height/lHeight); // get line count on page
        String tmpText = "";
        for (int i =0; i<linesCount; i++)
        {
            int index = Math.min(mtv.getLayout().getPaint().breakText(text, true, width, new float[0]), text.indexOf('\n')+1); // breaking text to lines. To use this you need mtv to be measured
            String t = text.substring(0, index); //getting text for this textview
            if (index+1 < text.length() && (text.charAt(index+1)!=' ' || text.charAt(index+1)!='\n') && t.lastIndexOf(" ")>0) 
                index = t.lastIndexOf(" ")+1; // hack for situation when line starts with " "

            text = text.substring(index);//getting text for next iteration
            t = t.substring(0, index);
            tmpText+=t;
        }
        //I use spannable string for links and some styles. Recalculating spans for new indexes
        SpannableString s = new SpannableString(tmpText);
        Object os[] = spanned.getSpans(offset, offset + tmpText.length(), Object.class);
        for (Object o: os)
        {
            int start = spanned.getSpanStart(o)-offset;
            int end = spanned.getSpanEnd(o)-offset;
            if (start < 0)
                start = 0;
            if (end>=s.length())
                end = s.length()-1;
            s.setSpan(o, start, end, spanned.getSpanFlags(o));
        }
        offset+=tmpText.length();

        while (text.startsWith(" ") || text.startsWith("\n"))
        {
            text = text.substring(1);
            offset++;
        }
        tv.setText(s);

Nad I think, that google uses TextView, not webView. Read about Spanned and Spannable. It's have ability to show links, images, text with different styles in one textView.

Alexander Mikhaylov
  • 1,790
  • 1
  • 13
  • 23
  • Do you have any idea how to justify text without using a webView ? Thanks ! – Gaurav Arora Feb 21 '13 at 05:52
  • oh, long waited answer is arrived! :) thanks for the answer @Demand. I'll test it out tonight! :) Actually, google did use WebView for reflowing the text. I dump View Hierarchy to inspect it. – Swan Feb 24 '13 at 16:42
  • Hi, Can you please add more codes to answer to give me right direction? Since I'm still beginner, I don't get everything you wanted to demonstrate. Is the variable "mtv" the textView? And what are the "text (String resource?)", "spanned (or Spanned?)", and "offset"? Where should I declare those variables? – Swan Feb 25 '13 at 09:38