Google Currents like page-by-page reading style

1k Views Asked by At

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?

1

There are 1 best solutions below

3
On

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.