examples/layouting/grid-example.cpp

   1 /*
   2  * Copyright (c) 2018 Samsung Electronics Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  */
  17
  18 #include <string>
  19 #include "grid-example.h"
  20 #include "layout-utilities.h"
  21 #include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
  22 #include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
  23 #include <dali-toolkit/devel-api/controls/control-devel.h>
  24 #include <dali-toolkit/devel-api/layouting/absolute-layout.h>
  25 #include <dali-toolkit/devel-api/layouting/grid.h>
  26
  27 using namespace Dali;
  28 using namespace Dali::Toolkit;
  29
  30 namespace
  31 {
  32 const char* const TITLE = "Grid Example";
  33
  34 // Helper function to create ImageViews with given filename and size.
  35 void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
  36 {
  37   imageView = ImageView::New();
  38   Property::Map imagePropertyMap;
  39   imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
  40   imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = filename;
  41   imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
  42   imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
  43   imageView.SetProperty(Toolkit::ImageView::Property::IMAGE , imagePropertyMap );
  44   imageView.SetName("ImageView");
  45   imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
  46   imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
  47 }
  48
  49 enum CurrentExample
  50 {
  51   GRID_EXACT_WIDTH = 0,
  52   ITEMS_WITH_MARGINS,
  53   GRID_MATCH_PARENT,
  54   GRID_WRAP_CONTENT,
  55   ADD_ITEMS,
  56   CHANGE_TO_3_COLUMNS
  57 };
  58
  59 }
  60
  61 namespace Demo
  62 {
  63
  64 GridExample::GridExample()
  65 : Example( TITLE ),
  66   mToggleStatus( GRID_EXACT_WIDTH )
  67 {
  68 }
  69
  70 void GridExample::Create()
  71 {
  72   // The Init signal is received once (only) during the Application lifetime
  73   mToggleStatus = 0;
  74   auto stage = Stage::GetCurrent();
  75
  76   // This layout will be the size of the stage but allow the Grid layout to be any size.
  77   mRootLayoutControl = LayoutUtilities::CreateRootContainer();
  78   stage.Add( mRootLayoutControl );
  79
  80   // Create a table view to show a pair of buttons above each image.
  81   mGridContainer = Control::New();
  82
  83   // Create LinearLayout for this control.
  84   auto gridLayout = Grid::New();
  85   gridLayout.SetAnimateLayout(true);
  86   gridLayout.SetNumberOfColumns( 2 );
  87   DevelControl::SetLayout( mGridContainer, gridLayout );
  88   mGridContainer.SetName("GridContainer");
  89   mGridContainer.SetBackgroundColor( Color::WHITE );
  90   mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
  91   mGridContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
  92   mGridContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents( 20,20,20,20 ) );
  93   mGridContainer.SetParentOrigin( ParentOrigin::CENTER );
  94
  95   mRootLayoutControl.Add( mGridContainer );
  96
  97   for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
  98   {
  99     ImageView imageView;
 100     CreateChildImageView( imageView, DEMO_IMAGE_DIR "gallery-small-23.jpg" , Size(100.0f, 100.0f) );
 101     mImageViews.push_back( imageView );
 102     mGridContainer.Add( mImageViews[x] );
 103   }
 104
 105   // Button toggles the size of the layout
 106   mToggleButton = PushButton::New();
 107   mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set Width 300" );
 108   mToggleButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
 109   mToggleButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
 110   mToggleButton.ClickedSignal().Connect( this, &Demo::GridExample::ToggleButtonClicked );
 111   mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 112   mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
 113
 114   stage.Add( mToggleButton );
 115 }
 116
 117 void GridExample::Remove()
 118 {
 119   mImageViews.clear();
 120   UnparentAndReset( mGridContainer );
 121   UnparentAndReset( mRootLayoutControl );
 122   UnparentAndReset( mToggleButton );
 123 }
 124
 125 void GridExample::ChangeTo3Columns()
 126 {
 127   Grid gridLayout = Grid::DownCast( DevelControl::GetLayout(mGridContainer) );
 128   if ( gridLayout )
 129   {
 130     gridLayout.SetNumberOfColumns( 3 );
 131   }
 132 }
 133
 134 void GridExample::AddItemsInteractively()
 135 {
 136   if( mImageViews.size() < MAX_NUMBER_OF_IMAGE_VIEWS )
 137   {
 138     ImageView imageView;
 139     CreateChildImageView( imageView, DEMO_IMAGE_DIR "gallery-small-23.jpg" , Size(100.0f, 100.0f) );
 140     mImageViews.push_back( imageView );
 141     mGridContainer.Add( imageView);
 142
 143     // Add item button shows how many items left to add.
 144     unsigned int numberOfAdditonalImageViews = MAX_NUMBER_OF_IMAGE_VIEWS-INITIAL_NUMBER_OF_IMAGE_VIEWS;
 145     unsigned int remainingImageViews = numberOfAdditonalImageViews - ( ( mImageViews.size() - INITIAL_NUMBER_OF_IMAGE_VIEWS) );
 146     std::string buttonLabel( "Add item["+ std::to_string( numberOfAdditonalImageViews-remainingImageViews ) +"/"+
 147                                           std::to_string( numberOfAdditonalImageViews)+"]" );
 148     mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, buttonLabel );
 149   }
 150 }
 151
 152 void GridExample::AddMarginToItems()
 153 {
 154   for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
 155   {
 156     mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents( 20,20,20,10));
 157   }
 158 }
 159
 160 void GridExample::RemoveMarginsFromItems()
 161 {
 162   for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
 163   {
 164     mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents());
 165   }
 166 }
 167
 168 void GridExample::MatchParentOnWidth()
 169 {
 170   mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,ChildLayoutData::MATCH_PARENT );
 171 }
 172
 173 void GridExample::WrapContentOnWidth()
 174 {
 175   mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
 176 }
 177
 178 void GridExample::SetExactWidth()
 179 {
 180   mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,  300 );
 181 }
 182
 183 bool GridExample::ToggleButtonClicked( Toolkit::Button button )
 184 {
 185   switch( mToggleStatus )
 186   {
 187     case GRID_EXACT_WIDTH :
 188     {
 189       SetExactWidth();
 190       mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set Child Margin" );
 191       mToggleStatus = ITEMS_WITH_MARGINS;
 192       break;
 193     }
 194     case ITEMS_WITH_MARGINS :
 195     {
 196       AddMarginToItems();
 197       mToggleStatus = GRID_MATCH_PARENT;
 198       mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set width MATCH_PARENT" );
 199       break;
 200     }
 201     case GRID_MATCH_PARENT :
 202     {
 203       RemoveMarginsFromItems();
 204       MatchParentOnWidth();
 205       mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set width WRAP_CONTENT" );
 206       mToggleStatus = GRID_WRAP_CONTENT;
 207       break;
 208     }
 209     case GRID_WRAP_CONTENT :
 210     {
 211       WrapContentOnWidth();
 212       mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Add item" );
 213       mToggleStatus = ADD_ITEMS;
 214       break;
 215     }
 216     case ADD_ITEMS :
 217     {
 218       if( mGridContainer.GetChildCount() < MAX_NUMBER_OF_IMAGE_VIEWS )
 219       {
 220         AddItemsInteractively();
 221       }
 222
 223       if( mGridContainer.GetChildCount() == MAX_NUMBER_OF_IMAGE_VIEWS )
 224       {
 225         // Remove button when no more items to add
 226         mToggleStatus= CHANGE_TO_3_COLUMNS;
 227         mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Change Columns" );
 228       }
 229       break;
 230     }
 231     case CHANGE_TO_3_COLUMNS :
 232     {
 233       ChangeTo3Columns();
 234       mToggleStatus = GRID_EXACT_WIDTH;
 235       UnparentAndReset( mToggleButton );
 236       break;
 237     }
 238     default :
 239     {
 240       mToggleStatus = GRID_EXACT_WIDTH;
 241     }
 242   }
 243   return true;
 244 }
 245
 246 } // namespace Demo