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 {
  67 }
  68
  69 void GridExample::Create()
  70 {
  71   // The Init signal is received once (only) during the Application lifetime
  72   mToggleStatus = 0;
  73   auto stage = Stage::GetCurrent();
  74
  75   // This layout will be the size of the stage but allow the Grid layout to be any size.
  76   mRootLayoutControl = LayoutUtilities::CreateRootContainer();
  77   stage.Add( mRootLayoutControl );
  78
  79   // Create a table view to show a pair of buttons above each image.
  80   mGridContainer = Control::New();
  81
  82   // Create LinearLayout for this control.
  83   auto gridLayout = Grid::New();
  84   gridLayout.SetAnimateLayout(true);
  85   gridLayout.SetNumberOfColumns( 2 );
  86   DevelControl::SetLayout( mGridContainer, gridLayout );
  87   mGridContainer.SetName("GridContainer");
  88   mGridContainer.SetBackgroundColor( Color::WHITE );
  89   mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
  90   mGridContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
  91   mGridContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents( 20,20,20,20 ) );
  92   mGridContainer.SetParentOrigin( ParentOrigin::CENTER );
  93
  94   mRootLayoutControl.Add( mGridContainer );
  95
  96   for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
  97   {
  98     ImageView imageView;
  99     CreateChildImageView( imageView, DEMO_IMAGE_DIR "gallery-small-23.jpg" , Size(100.0f, 100.0f) );
 100     mImageViews.push_back( imageView );
 101     mGridContainer.Add( mImageViews[x] );
 102   }
 103
 104   // Button toggles the size of the layout
 105   mToggleButton = PushButton::New();
 106   mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set Width 300" );
 107   mToggleButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
 108   mToggleButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
 109   mToggleButton.ClickedSignal().Connect( this, &Demo::GridExample::ToggleButtonClicked );
 110   mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 111   mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
 112
 113   stage.Add( mToggleButton );
 114 }
 115
 116 void GridExample::Remove()
 117 {
 118   mImageViews.clear();
 119   UnparentAndReset( mGridContainer );
 120   UnparentAndReset( mRootLayoutControl );
 121   UnparentAndReset( mToggleButton );
 122 }
 123
 124 void GridExample::ChangeTo3Columns()
 125 {
 126   Grid gridLayout = Grid::DownCast( DevelControl::GetLayout(mGridContainer) );
 127   if ( gridLayout )
 128   {
 129     gridLayout.SetNumberOfColumns( 3 );
 130   }
 131 }
 132
 133 void GridExample::AddItemsInteractively()
 134 {
 135   if( mImageViews.size() < MAX_NUMBER_OF_IMAGE_VIEWS )
 136   {
 137     ImageView imageView;
 138     CreateChildImageView( imageView, DEMO_IMAGE_DIR "gallery-small-23.jpg" , Size(100.0f, 100.0f) );
 139     mImageViews.push_back( imageView );
 140     mGridContainer.Add( imageView);
 141
 142     // Add item button shows how many items left to add.
 143     unsigned int numberOfAdditonalImageViews = MAX_NUMBER_OF_IMAGE_VIEWS-INITIAL_NUMBER_OF_IMAGE_VIEWS;
 144     unsigned int remainingImageViews = numberOfAdditonalImageViews - ( ( mImageViews.size() - INITIAL_NUMBER_OF_IMAGE_VIEWS) );
 145     std::string buttonLabel( "Add item["+ std::to_string( numberOfAdditonalImageViews-remainingImageViews ) +"/"+
 146                                           std::to_string( numberOfAdditonalImageViews)+"]" );
 147     mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, buttonLabel );
 148   }
 149 }
 150
 151 void GridExample::AddMarginToItems()
 152 {
 153   for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
 154   {
 155     mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents( 20,20,20,10));
 156   }
 157 }
 158
 159 void GridExample::RemoveMarginsFromItems()
 160 {
 161   for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
 162   {
 163     mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents());
 164   }
 165 }
 166
 167 void GridExample::MatchParentOnWidth()
 168 {
 169   mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,ChildLayoutData::MATCH_PARENT );
 170 }
 171
 172 void GridExample::WrapContentOnWidth()
 173 {
 174   mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
 175 }
 176
 177 void GridExample::SetExactWidth()
 178 {
 179   mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,  300 );
 180 }
 181
 182 bool GridExample::ToggleButtonClicked( Toolkit::Button button )
 183 {
 184   switch( mToggleStatus )
 185   {
 186     case GRID_EXACT_WIDTH :
 187     {
 188       SetExactWidth();
 189       mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set Child Margin" );
 190       mToggleStatus = ITEMS_WITH_MARGINS;
 191       break;
 192     }
 193     case ITEMS_WITH_MARGINS :
 194     {
 195       AddMarginToItems();
 196       mToggleStatus = GRID_MATCH_PARENT;
 197       mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set width MATCH_PARENT" );
 198       break;
 199     }
 200     case GRID_MATCH_PARENT :
 201     {
 202       RemoveMarginsFromItems();
 203       MatchParentOnWidth();
 204       mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set width WRAP_CONTENT" );
 205       mToggleStatus = GRID_WRAP_CONTENT;
 206       break;
 207     }
 208     case GRID_WRAP_CONTENT :
 209     {
 210       WrapContentOnWidth();
 211       mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Add item" );
 212       mToggleStatus = ADD_ITEMS;
 213       break;
 214     }
 215     case ADD_ITEMS :
 216     {
 217       if( mGridContainer.GetChildCount() < MAX_NUMBER_OF_IMAGE_VIEWS )
 218       {
 219         AddItemsInteractively();
 220       }
 221
 222       if( mGridContainer.GetChildCount() == MAX_NUMBER_OF_IMAGE_VIEWS )
 223       {
 224         // Remove button when no more items to add
 225         mToggleStatus= CHANGE_TO_3_COLUMNS;
 226         mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Change Columns" );
 227       }
 228       break;
 229     }
 230     case CHANGE_TO_3_COLUMNS :
 231     {
 232       ChangeTo3Columns();
 233       mToggleStatus = GRID_EXACT_WIDTH;
 234       UnparentAndReset( mToggleButton );
 235       break;
 236     }
 237     default :
 238     {
 239       mToggleStatus = GRID_EXACT_WIDTH;
 240     }
 241   }
 242   return true;
 243 }
 244
 245 } // namespace Demo