4 # Item View {#item-view}
6 An Item view is a scrollable container that contains several items.
7 It can have several layouts.
8 There are a few built-in layouts that the application writer can use:
10 |GRID |SPIRAL |DEPTH |
11 |:----------------------:|:------------------------:|:-----------------------:|
12 |![ ](item-view/grid.png)|![ ](item-view/spiral.png)|![ ](item-view/depth.png)|
14 The application writer can also create their own custom layout by inheriting from Dali::Toolkit::ItemLayout.
18 To create an item-view, the application writer has to provide an item-factory.
19 An ItemFactory provides methods to create items and how many items there are among other things.
22 class MyFactory : public Dali::Toolkit::ItemFactory
25 virtual unsigned int GetNumberOfItems()
27 // Should return the number of items
31 virtual Actor NewItem( unsigned int itemId )
33 // We should create the actor here that represents our item based on the itemId given.
35 // Here we'll create an ImageView which uses the the itemId to parse the image in a particular directory.
36 std::ostringstream imageName;
37 imageName << "my-image-folder/" << itemId << ".png"; // If item was 10, then this would result in my-image-folder/10.png
39 // Create the Image View from the image and return
40 return Dali::Toolkit::ImageView::New( imageName.str() );
44 These overridden methods in our factory will be called by the Item View.
46 ## Creating an ItemView
49 MyFactory factory; // Should store this as a member variable
50 Dali::Toolkit::ItemView itemView = Dali::Toolkit::ItemView::New( factory ); // Pass in our factory
51 itemView.SetParentOrigin( ParentOrigin::CENTER );
52 itemView.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
54 // Now create a layout
55 Dali::Toolkit::ItemLayoutPtr spiralLayout = Dali::Toolkit::DefaultItemLayout::New( Dali::Toolkit::DefaultItemLayout::SPIRAL );
57 // ... and add the layout to the item view
58 itemView.AddLayout( spiralLayout );
60 // More layouts can be created and added to the item-view
62 // Activate the layout
63 itemView.ActivateLayout(
64 0, // The layout ID matches the order in which layouts are added
65 Dali::Stage::GetCurrent().GetSize(), // Use the stage's size as our item-view size
66 0 ); // We want the item-view to appear straight away
68 // And add to the stage
69 Dali::Stage::GetCurrent().Add( itemView );
73 The item-view provides an action to stop the scroll animation if desired.
76 Property::Map attributes;
77 itemView.DoAction( "stopScrolling", attributes );