plugins/dali-script-v8/docs/content/scroll-view.js

   1 /**
   2  *
   3 ## ScrollView API
   4
   5 ScrollView is a container where the actors inside it can be scrolled manually
   6 (via touch or pan gesture) or automatically.
   7
   8 By default, ScrollView can scroll to any position both horizontally and
   9 vertically and no snapping is enabled.
  10
  11 Scroll mode can be specified to define how ScrollView should handle scrolling
  12 in X and Y axes respectively (i.e. whether scrolling is enabled horizontally
  13 or vertically, how scrolling is snapped, and the boundary to prevent ScrollView
  14 to scroll beyond a certain position in the axes).
  15
  16 ![ ](../assets/img/scroll-view/scroll-view.png)
  17
  18 ### Example of creating a ScrollView
  19
  20 ```
  21   // Create a scroll view
  22   var scrollView = new dali.Control("ScrollView");
  23   var stageSize = dali.stage.getSize();
  24   scrollView.size = [stageSize.x, stageSize.y, 0.0];
  25   scrollView.parentOrigin = dali.CENTER;
  26   scrollView.anchorPoint = dali.CENTER;
  27
  28   dali.stage.add( scrollView );
  29
  30   // Add actors to a scroll view with 3 pages
  31   var pageRows = 1;
  32   var pageColumns = 3;
  33   for(var pageRow = 0; pageRow < pageRows; pageRow++)
  34   {
  35     for(var pageColumn = 0; pageColumn < pageColumns; pageColumn++)
  36     {
  37       var pageActor = new dali.Control();
  38       pageActor.widthResizePolicy = "FILL_TO_PARENT";
  39       pageActor.heightResizePolicy = "FILL_TO_PARENT";
  40       pageActor.parentOrigin = dali.CENTER;
  41       pageActor.anchorPoint = dali.CENTER;
  42       pageActor.position = [pageColumn * stageSize.x, pageRow * stageSize.y, 0.0];
  43       pageActor.name = "pageActor" + pageColumn;
  44
  45       // Add images in a 3x4 grid layout for each page
  46       var imageRows = 4;
  47       var imageColumns = 3;
  48       var margin = 10.0;
  49       var imageSize = [(stageSize.x / imageColumns) - margin, (stageSize.y / imageRows) - margin, 0.0];
  50
  51       for(var row = 0; row < imageRows; row++)
  52       {
  53         for(var column = 0; column < imageColumns;column++)
  54         {
  55           var imageView = new dali.Control("ImageView");
  56           var imageId = row * imageColumns + column;
  57           imageView.image = "./image-" + imageId + ".jpg";
  58           imageView.parentOrigin = dali.CENTER;
  59           imageView.anchorPoint = dali.CENTER;
  60           imageView.size = imageSize;
  61           imageView.position = [ margin * 0.5 + (imageSize[0] + margin) * column - stageSize.x * 0.5 + imageSize[0] * 0.5,
  62                                  margin * 0.5 + (imageSize[1] + margin) * row - stageSize.y * 0.5 + imageSize[1] * 0.5,
  63                                  0.0 ];
  64           pageActor.add(imageView);
  65           var position = imageView.position;
  66         }
  67       }
  68
  69       scrollView.add( pageActor );
  70     }
  71   }
  72
  73   // Set scroll view to have 3 pages in X axis and allow page snapping,
  74   // and also disable scrolling in Y axis.
  75   var scrollMode = {
  76                      xAxisScrollEnabled  : true,
  77                      xAxisSnapToInterval : stageSize.x,                // Define the snap points
  78                      xAxisScrollBoundary : stageSize.x * pageColumns,  // i.e. Define 3 pages
  79                      yAxisScrollEnabled  : false
  80                    }
  81
  82   scrollView.setScrollMode(scrollMode);
  83
  84 ```
  85
  86  @class ScrollView
  87  @extends Actor
  88
  89 */