Documents – Multiple Image Layer and Page Zoom/Scroll Property

Multiple layers solution gives each page most potential chance to become special and unique. In this tutorials, we will show you how to work with multiple image layer and page zoom/scroll property, check the tutorial video first:

If you are not familiar with image layer or page layer for Dolphin App Template, check these two tutorials first:

XML EXPLANATION FOR PAGE&LAYER TAG

WORK WITH IMAGE

Ok, when you get familiar with image and page tags, let’s continue. There is already a multiple layer usage demo in the Dolphin App Template project folder, you can test “multiple_layer_demo.xml” showed as below, which is in DolphinViewController.m

The demo in “multiple_layer_demo.xml” is very similar with the demo video you watched here. You can click small image on the first page, and they will jump to the target page they have been set in the XML. The xml define for such function is like below, very easy to be understand:

<page>
<layer> <!– the bottom image layer for first page–>
<type>img</type>
<src>6.jpg</src>
<x>0</x>
<y>0</y>
<width>1024</width>
<height>768</height>
<ratiomode>2</ratiomode>
<target_page_id>-1</target_page_id>
</layer>
<layer><!–the small image above the bottom image layer for first page–>
<type>img</type>
<src>s1.jpg</src>
<x>125</x>
<y>275</y>
<width>200</width>
<height>200</height>
<ratiomode>2</ratiomode>
<target_page_id>1</target_page_id> <!– jump to page id 1 (page id counting from zero)
</layer>
<layer>
<type>img</type>
<src>s3.jpg</src>
<x>425</x>
<y>275</y>
<width>200</width>
<height>200</height>
<ratiomode>2</ratiomode>
<target_page_id>2</target_page_id><!– jump to page id 2–>
</layer>
</page>

Enough easy, right? Just add more layers you want within the page tag, if you want your specific image layer jump to certain page, set the target_page_id, otherwise, set the value with -1, or just delete target_page_id tag.

For each page’s own scroll and zoom property, it’s also easy to be understand, if you set page’s own zoom&scroll value, they will use their own, otherwise, the use global value for page zoom and scroll.

<page_prop>
<single_page_zoom_min>1</single_page_zoom_min>
<single_page_zoom_max>2</single_page_zoom_max>
<scroll_width>1024</scroll_width>
<scroll_height>1280</scroll_height>
</page_prop>

Both page and image have scroll_width and scroll_height property, but they have different meaning. Page’s scroll value means its movable area while image layer’s means its limit area. See below image for detail explanation:

The own scroll value provide your app more flexible use, for example, on one page, your left image be a static one, and right one is a long one that could move vertically.

By using these specific arguments for page and layer, your app will look different than a simple slideshow.

This entry was posted in Documents - Dolphin App Template. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>