Flipping page PD code hope this post is allowed

Smee

Well-Known Member
Licensed User
Longtime User
I picked this code up from the web and it is public domain. However it is written in what i think is Java or maybe even C coz i am not familiar with either of them.

I have translated the comments from vietnamese by a web translator. As you can see it is pretty well commented.Anyone able to convert to B4A?

B4X:
. About StaticLayout:

+ Inherited from class android.text.Layout

+ Constructor:

StaticLayout (CharSequence source, TextPaint paint, int width, align Layout.Alignment, spacingmult float, float spacingadd, boolean includepad)

StaticLayout work is arranged according to your text layout has been established. It uses the parameters:

- CharSequence source: your text

- TextPaint paint: specified text color, font, font size, style ... and used to draw text on the canvas (see the Canvas and the method of draw).

- Int width: the width of the pages (the text is, regardless of alignment) that you want.

- Layout.Alignment align:

- Spacingmult float, float spacingadd: line spacing, ...

- Boolean includepad:

+ StaticLayout "write" your words ntn?

StaticLayout use the method draw (Canvas canvas) to render text on a canvas. Thus we can get a Bitmap object as follows:

 

Bitmap.createBitmap bitmap = (width, height, Bitmap.Config.ARGB_8888);

/ / Create a canvas to paint on

Canvas c = new Canvas (bitmap);

/ / Draw on the canvas

staticlayout.draw (c);

 

II. Implementation:

 

1. Preparation:

- As you saw, StaticLayout will draw text on the canvas and we obtained a bitmap DC. For simplicity, m going to use this bitmap ImageView to view.

- The first is to create a new project, named here m BitmapTest.

- The layout of main.xml you edit as follows:

 

<? Xml version = "1.0" encoding = "utf-8"?>

<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"

    android: orientation = "vertical"

    android: layout_width = "fill_parent"

    android: layout_height = "fill_parent"

    >

    <ImageView

            android: id = "@ + id / imgview"

            android: layout_width = "fill_parent"

android: layout_height = "fill_parent"

            android: src = "# ffFDF8A6"

    > </ ImageView>

</ LinearLayout>

 

▲ Here, the id is the image ImageView will undertake the tasks display bitmap collection of DC.

 

▲ Run at this time will give you a yellow screen (ffFDF8A6).

-Fine-tuning a little better for the program:

+ The correct method you onCreate () as follows for the program in full screen:

 

public void onCreate (Bundle savedInstanceState) {

                        super.onCreate (savedInstanceState);

                        requestWindowFeature (Window.FEATURE_NO_TITLE);

        getWindow (). setFlags (WindowManager.LayoutParams.FLAG_FULLSCREEN,

                                WindowManager.LayoutParams.FLAG_FULLSCREEN);

setContentView (R.layout.main);

}

 

-Next, we need a text. You can select any text, but enough to ensure long-fai.

 

String story = "<noi dung>"

 

-Declare a few more required parameters:

 

/ / Width, height: length, wide-screen

            int width, height;

            / / Other parameters

            int textSize = 20 / / font size

            int textColor = 0xffA7573E / / text color

            0xffFDF8A6 pageColor = int / / background color

            topPadding int = 30, leftPadding = 10 / / based on, based as

            / / Paint to draw text

      TextPaint myTextPaint;

 

-Add the following line of activity onCreate method to find the width, height of the screen:

Display display = ((WindowManager) this.getSystemService (Context.WINDOW_SERVICE)). GetDefaultDisplay ();

            width = display.getWidth ();

            display.getHeight height = ();

 

TextPaint-declaration:

+ You can add fonts for more vivid:

 

/ / Set the font

Tf = Typeface.createFromAsset typeface (this.getAssets (), "fonts / UVNDaLat_R.TTF");

/ / Set the parameters of the font

TextPaint myTextPaint = new ();

            myTextPaint.setColor (textColor);

            myTextPaint.setTextSize (textSize);

            myTextPaint.bgColor = pageColor;

            myTextPaint.setAntiAlias ​​(true);

            myTextPaint.setTypeface (tf);

 

2.Tien of

-Here m going to use SL to draw the text on the screen:

/ /

            getPageBitmap public Bitmap () {

                        Bitmap pageContentBitmap;

                        / / Bitmap containing the text

                        Bitmap.createBitmap pageContentBitmap = (width, height, Bitmap.Config.ARGB_8888);

                        / / Create a canvas to paint on

                        Canvas c = new Canvas (pageContentBitmap);

                        / / Create text StaticLayout content

                        Layout = new StaticLayout StaticLayout (story, myTextPaint, width - (leftPadding <<1), Layout.Alignment.ALIGN_NORMAL, 0.5f, 10F, false);

                        / / Draw on the canvas

                        layout.draw (c);

                        pageContentBitmap return;

      }

 

▲ Here width parameter is passed to the width - (leftPadding <<1) for the purpose of base left for the text (margins writing, kok wrote the entire width of the screen).

 

-Displaying bitmap on the screen:

declared and set pictures for ImageView:

image = (ImageView) findViewById (R.id.imgview);

image.setImageBitmap (getPageBitmap ());

 

▲ You'll run the Address text was drawn up. NHG Address drawing position (0.0) of the screen. We need to adjust a little method getPageBitmap ():

/ /

            getPageBitmap public Bitmap () {

                        Bitmap pageBitmap, pageContentBitmap;

                        / / Bitmap background

                        Bitmap.createBitmap pageBitmap = (width, height, Bitmap.Config.ARGB_8888);

                        / / Bitmap containing the text

                        Bitmap.createBitmap pageContentBitmap = (width-(leftPadding <<1), height-topPadding, Bitmap.Config.ARGB_8888);

                        / / Create a canvas to paint on

                        Canvas c = new Canvas (pageContentBitmap);

                        / / Create text StaticLayout content

                        Layout = new StaticLayout StaticLayout (story, myTextPaint, width

                                                - (LeftPadding <<1), Layout.Alignment.ALIGN_NORMAL, 0.5f, 10F, false);

                        / / Draw on the canvas

                        layout.draw (c);

                        / / Canvas of background to draw on the image content

                        C2 = new Canvas Canvas (pageBitmap);

                        / / Fill the background

                        c2.drawColor (pageColor);

                        / / Draw image content

                        c2.drawBitmap (pageContentBitmap, leftPadding <<1, topPadding, myTextPaint);

                        pageBitmap return;

      }

 

▲ Here, we use a background bitmap, then draw a bitmap that contains text to the location (leftPadding <<1, topPadding). Then return the bitmap to show on screen.

 

H-Bi, run the program would result in re-aligns the text. However, there are extra lines at the bottom of the screen. This is because SL only works WRAP-TEXT so you get the same results as DC display long text in a TextView.

 

So how to solve this problem ntn?

 

If you want to remove the extra text at the bottom line, then your text fai subdivided so that they match the page size. In other words, you know fai Add locations to cut text. Position at the bottom line-the last line of page (gold position).

Luckily, SL gives us two method:

- Public int getLineForVertical (vertical int): Returns the line is located at coordinates (0, vertical)

- Public int getOffsetForHorizontal (int line, float horiz): Returns the index of the text lies in the line and the coordinates (horiz, 0);

-And this is what m did:

/ /

            public void splitTextIntoPages () {

                        / / The index used to cut text

                        offsetI int = 0, offsetII = 0;

                        / / Create the Static Layout for the entire text

                        Layout = new StaticLayout StaticLayout (story, myTextPaint, width

                                                - (LeftPadding <<1), Layout.Alignment.ALIGN_NORMAL, 0.5f, 10F, false);

                        / / Total lines

                        layout.getLineCount totalLines = int ();

                        / / Number of lines per page

                        layout.getLineForVertical linePerPage = int (height - (topPadding <<1));

                        

                        / / Loop to the end

                        int i = 0;

                        

                        do {

                                    / /

                                    Log.i ("Notice", "Dang divided ...");

                                    / /

                                    int line = Math.min (linePerPage * (i +1), totalLines-1);

                                    / / Character position of the page

                                    offsetII = layout.getOffsetForHorizontal (line, width - (leftPadding <<1));

                                    / / Get substring

                                    String sub = story.substring (offsetI, offsetII);

                                    / /

                                    offsetI = offsetII;

                                    / / Add to Favorites

                                    listOfPages.add (sub);

                                    / /

                                    i + +;

                        } While (offsetII <story.length ());

            }

▲ In each iteration, we will get "gold position" and cut the text based on it. The text is cut (to match the page size) are stored in order to Vector <String> listOfPages.

 

-Try to display the first page:

+ Method onCreate (): add splitTextIntoPages () in front of the set photos to ImageView.

GetPageBitmap + method (), you edit the report SL:

Layout = new StaticLayout StaticLayout (listOfPages.elementAt (0), myTextPaint, width-(leftPadding <<1), Layout.Alignment.ALIGN_NORMAL, 0.5f, 10F, false);

 

▲ Run program will see the surplus spent.

 

-To display the following pages you can do the following:

+ Added variable index page: int index = 0;

+ OnCreate method:

image.setOnClickListener (new OnClickListener () {

 

                                    @ Override

                                    public void onClick (View v) {

                                                / /

                                                if (index> listOfPages.size () -1) {

                                                            index = 0;

                                                }

                                                / / Set image

                                                image.setImageBitmap (getPageBitmap ());

                                                / /

                                                index + +;

                                                / /

                                                

                                    }

                  });

GetPageBitmap + method (): fix declaration SL:

Layout = new StaticLayout StaticLayout (listOfPages.elementAt (index), myTextPaint, width

                                          - (LeftPadding <<1), Layout.Alignment.ALIGN_NORMAL, 0.5f, 10F, false);

 

So every time you click on the image, a new page will be frequently displayed.

Tut to this end. Hope this information helps you.

Download source code: http://www.mediafire.com/?bt9p65ud4nf59wm
 

JogiDroid

Member
Licensed User
Longtime User
Sometimes it is just easier to describe exactly what you want to achieve.. and then just code it in B4A.
 
Upvote 0

agraham

Expert
Licensed User
Longtime User
I thought from your other posts that you wanted an animated page turn. That code doesn't do that. If you get the zip from the mediafire link at the bottom you will find that it is a complete Android project written in Java and there is a compiled apk in the zip that will show you what it does.
 
Upvote 0

JogiDroid

Member
Licensed User
Longtime User
sometimes that is easier said than done

No offense, I was just meaning that if you describe what you want to achieve is easier to me help than reading some random code chunk and wondering what you really want to achieve.. 1:1 code porting is not practical always..
 
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
Thanks for your reply Andrew,

As usual you are correct. I did not realise about the apk file and when i installed it i see what you mean. Oh well hopefully that will be of use to someone. I thought i had traced everything from the video i saw correctly.

Anyway this link

https://github.com/harism/android_page_curl

shows the jpgs in the files that DOES do the page flip. unfortunately there is no apk file in the distro. I have tried to compile the project in netbeans but my limited knowledge is letting me down.

Maybe someone else can have a look
:sign0163:

UPDATE:

These 2 youtube videos show the code in action
Android: page curl/flip effect - YouTube
Android: Page flip/curl. - YouTube

it looks great. I am sure a lot of people could use this sort of stuff in their projects

Hint Hint ;)
 
Last edited:
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
No offense, I was just meaning that if you describe what you want to achieve is easier to me help than reading some random code chunk and wondering what you really want to achieve.. 1:1 code porting is not practical always..

Haha. Its ok no offence was taken. I am just very new to android and trying to get my head around it whilst coding at the same time. Unfortunately my ambitions are exceeding my capabilities in this case and i am trying everything i can to reach my goal.

Cheers
:D
 
Upvote 0

agraham

Expert
Licensed User
Longtime User
Try this but be warned there is a lot more work needed to to get this properly functional. All I've done is wrapped the actual page turning view so Basic4android can instantiate it and hard coded a few blank pages. At the moment I presently don't really understand the views interface methods so there is some trial and error to come before I can produce a fully working view.
 

Attachments

  • PageTurnView0.001.zip
    27.7 KB · Views: 295
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
Andrew,

You are an absolute belter. So much in such a short time
:sign0188::sign0087:
:sign0060:

Update:
I tried to send you an email but i canot find it. couldn't send you a pm either

Joe

I put these co-ordinates in
Activity.AddView(ptv, -100, -20, 120%x,110%y )
and it looks fantastic on my tablet. It is so smooth. I cannot wait for your improvements to this library.

Thank you so much
 
Last edited:
Upvote 0

nfordbscndrd

Well-Known Member
Licensed User
Longtime User
Wow! This is really cool.

Here's some feedback, just in case it helps:

1. When I ran the app as in your download, I got a small page on the left half of the screen and when I turned the page, most of it went off-screen on the left so I couldn't see the back of each page.

2. When I used Smee's values on my 10.1" Toshiba, the page started on the right edge of the screen and when turned, the back of the page could be seen, but it left a gap on the left side of the screen.

3. On my 7" Archos 70, just the opposite -- gap on the right, flush on the left when turned.
 
Upvote 0

Cableguy

Expert
Licensed User
Longtime User
All I've done is wrapped the actual page turning view so Basic4android can instantiate it and hard coded a few blank pages.

JUST???? This is quite impressive...I must ask, wich view interfaces? what is thereleft to expose other than the turning efect? You got me intrigued on this one...
Anyway, I can see a new entry to my Listing...and it will be a very visited one I bet.

I haven't said this often, as I don't need to..because you already know, but this time I have to say...Great Work!
 
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
Wow! This is really cool.

That is not the word for it. I predict that this will be one of the best libraries ever. Re your values, i just played around till i got the best result. ATM andrew has just hardcoded for testing purposes, so it really only can be used for viewing the screen effects but i can see this producing some Killer apps for the tablet and pusing B4A to the forefront of development IDE's

Thanks Andrew:sign0188:
:wav:
 
Upvote 0

Smee

Well-Known Member
Licensed User
Longtime User
JUST???? This is quite impressive...I must ask, wich view interfaces? what is thereleft to expose other than the turning efect? ......

I haven't said this often, as I don't need to..because you already know, but this time I have to say...Great Work!

the pages will need to be able to respond to a touch event to test which page has been loaded or mybe a grid system to see where on the page has been touched. Also maybe loading a view on to each page.

The possibilities for this are AWESOME. I'm EXCITED

Joe
 
Upvote 0

agraham

Expert
Licensed User
Longtime User
the pages will need to be able to respond to a touch event to test which page has been loaded or mybe a grid system to see where on the page has been touched.
It won't work this way. The only user gesture event available will be LongClick - which paradoxically is raised on a short click as anything longer invokes the page turning mechanism which swallows all the following gesture events. I don't know why it's not the Click event but this happens too deep in the bowels of the view to bother finding out and probably can't be altered anyway. Once the user has started turning a page another event requests the bitmap for a given page number. A third event requests the total number of pages available. That's all there is to it once you've set all the options and placed the view on an activity.

I'll post a working library some time later today once I've gone through the help text and tried it on a couple of other devices.
 
Upvote 0
Top