From: Agnelo Vaz Date: Tue, 12 Jun 2018 16:22:09 +0000 (+0100) Subject: Absolute layout demo X-Git-Tag: dali_1.3.29~3 X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-demo.git;a=commitdiff_plain;h=df6b2d6fe20310eddd269892dcef84aca24bc409;hp=94209fff2d09075cb1dc0f0f52e741d2fa61240c Absolute layout demo Change-Id: I5b722e7aadcbbd4b308d07b61d19e78891f5eddd --- diff --git a/examples/layouting/absolute-example.cpp b/examples/layouting/absolute-example.cpp new file mode 100644 index 0000000..6088878 --- /dev/null +++ b/examples/layouting/absolute-example.cpp @@ -0,0 +1,152 @@ +/* + * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +#include +#include "absolute-example.h" +#include +#include +#include +#include + +using namespace Dali; +using namespace Dali::Toolkit; + + +namespace +{ + +struct ImageDetails +{ + const char * name; + Vector2 position; + Size size; +}; + +ImageDetails IMAGES[] = +{ + { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 0.0f, 0.0f ), Size( 100.0f, 100.0f ) }, + { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 100.0f, 0.0f ), Size( 100.0f, 100.0f ) }, + { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 0.0f, 100.0f ), Size( 100.0f, 100.0f ) }, + { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 200.0f, 200.0f ), Size( 100.0f, 100.0f ) }, +}; +unsigned int IMAGE_COUNT=sizeof(IMAGES)/sizeof(IMAGES[0]); + +// Helper function to create ImageViews with given filename and size. +void CreateChildImageView( ImageView& imageView, unsigned imageIndex ) +{ + imageView = ImageView::New(); + Property::Map imagePropertyMap; + imagePropertyMap[ Visual::Property::TYPE ] = Toolkit::Visual::IMAGE; + imagePropertyMap[ ImageVisual::Property::URL ] = IMAGES[imageIndex].name; + imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = IMAGES[imageIndex].size.width ; + imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = IMAGES[imageIndex].size.height; + imageView.SetProperty( ImageView::Property::IMAGE , imagePropertyMap ); + imageView.SetName("ImageView"); + imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT ); + imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS ); + imageView.SetProperty( Dali::Actor::Property::POSITION, Vector3( IMAGES[imageIndex].position ) ); +} + +} // namespace + +namespace Demo +{ + +AbsoluteExample::AbsoluteExample() +: mRootLayoutControl(), + mAbsoluteLayoutContainer(), + mLayoutSizeToggleStatus( true ), + mToggleButton() +{ + +} + +void AbsoluteExample::Create() +{ + // Create a root layout, ideally Dali would have a default layout in the root layer. + // Without this root layer the mAbsoluteLayout (or any other layout) will not + // honour WIDTH_SPECIFICATION or HEIGHT_SPECIFICATION settings. + // It uses the default stage size and ideally should have a layout added to it. + auto stage = Stage::GetCurrent(); + mRootLayoutControl = Control::New(); + auto rootLayout = AbsoluteLayout::New(); + DevelControl::SetLayout( mRootLayoutControl, rootLayout ); + mRootLayoutControl.SetAnchorPoint( AnchorPoint::CENTER ); + mRootLayoutControl.SetParentOrigin( ParentOrigin::CENTER ); + stage.Add( mRootLayoutControl ); + + // Create an Absolute Layout to show ImageViews at explictly provided positions. + mAbsoluteLayoutContainer = Control::New(); + mAbsoluteLayoutContainer.SetBackgroundColor( Color::WHITE ); + auto absoluteLayout = AbsoluteLayout::New(); + DevelControl::SetLayout( mAbsoluteLayoutContainer, absoluteLayout ); + mAbsoluteLayoutContainer.SetName("AbsoluteLayout"); + + mAbsoluteLayoutContainer.SetAnchorPoint( AnchorPoint::CENTER ); + mAbsoluteLayoutContainer.SetParentOrigin( ParentOrigin::CENTER ); + + // Initially absolute layout to use these specifications, toggle button will alter them. + mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT ); + mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::WRAP_CONTENT ); + + mRootLayoutControl.Add( mAbsoluteLayoutContainer ); + + for( unsigned int x = 0; x < NUMBER_OF_IMAGE_VIEWS; x++ ) + { + CreateChildImageView( mImageViews[x], x%IMAGE_COUNT ); + mAbsoluteLayoutContainer.Add( mImageViews[x] ); + } + + // Button toggles the size of the layout + mToggleButton = PushButton::New(); + mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Change layout size" ); + mToggleButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER ); + mToggleButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER ); + mToggleButton.ClickedSignal().Connect( this, &Demo::AbsoluteExample::ChangeSizeClicked ); + mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH ); + mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT ); + + stage.Add( mToggleButton ); + +} + +void AbsoluteExample::Remove() +{ + UnparentAndReset( mAbsoluteLayoutContainer ); + UnparentAndReset( mToggleButton ); + UnparentAndReset( mRootLayoutControl ); +} + +bool AbsoluteExample::ChangeSizeClicked( Toolkit::Button button ) +{ + if ( true == mLayoutSizeToggleStatus ) + { + mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, 480 ); + mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, 700 ); + mLayoutSizeToggleStatus = false; + } + else + { + mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT ); + mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::WRAP_CONTENT ); + mLayoutSizeToggleStatus = true; + } + + return true; +} + +} // namespace Demo \ No newline at end of file diff --git a/examples/layouting/absolute-example.h b/examples/layouting/absolute-example.h new file mode 100644 index 0000000..a46ca99 --- /dev/null +++ b/examples/layouting/absolute-example.h @@ -0,0 +1,67 @@ +#ifndef DALI_DEMO_ABSOLUTE_EXAMPLE_H +#define DALI_DEMO_ABSOLUTE_EXAMPLE_H + +/* + * Copyright (c) 2017 Samsung Electronics Co., Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +#include +#include +#include +#include "example.h" + +using namespace Dali; +using namespace Dali::Toolkit; + +namespace Demo +{ + +/** + * @file absolute-example.hcpp + * @brief Example of a Linear Layout with padding applied, enables updating of padding values for + * one of the children. + */ +class AbsoluteExample: public ConnectionTracker, public Example +{ +public: + static const unsigned int NUMBER_OF_IMAGE_VIEWS = 4; + + AbsoluteExample(); + + // Creates a Absolute Layout Example and displays it. + virtual void Create() override; + + // Remove and destroy this layout + virtual void Remove() override; + +private: + + + // Callback when change size button is pressed + bool ChangeSizeClicked( Toolkit::Button button ); + +private: + + Toolkit::Control mRootLayoutControl; + Toolkit::Control mAbsoluteLayoutContainer; + Toolkit::ImageView mImageViews[ NUMBER_OF_IMAGE_VIEWS ]; + bool mLayoutSizeToggleStatus; + Toolkit::PushButton mToggleButton; +}; + +} // namespace Demo + +#endif // DALI_DEMO_ABSOLUTE_EXAMPLE_H diff --git a/examples/layouting/layouting-examples.cpp b/examples/layouting/layouting-examples.cpp index 745f92d..d677b41 100644 --- a/examples/layouting/layouting-examples.cpp +++ b/examples/layouting/layouting-examples.cpp @@ -27,6 +27,7 @@ #include "linear-example.h" #include "padding-example.h" #include "example.h" +#include "absolute-example.h" using namespace Dali; using namespace Dali::Toolkit; @@ -47,6 +48,7 @@ void CreateExamples( ExampleContainer& container ) { container.push_back( ExamplePointer( new Demo::LinearExample ) ); container.push_back( ExamplePointer( new Demo::PaddingExample ) ); + container.push_back( ExamplePointer( new Demo::AbsoluteExample ) ); } } // anonymous namespace diff --git a/examples/layouting/linear-example.cpp b/examples/layouting/linear-example.cpp index 0347c6b..a499005 100644 --- a/examples/layouting/linear-example.cpp +++ b/examples/layouting/linear-example.cpp @@ -71,7 +71,6 @@ namespace Demo void LinearExample::Create() { - // The Init signal is received once (only) during the Application lifetime auto stage = Stage::GetCurrent(); mDirectionButton = PushButton::New(); diff --git a/examples/layouting/padding-example.cpp b/examples/layouting/padding-example.cpp index 9941ce9..fc8ba41 100644 --- a/examples/layouting/padding-example.cpp +++ b/examples/layouting/padding-example.cpp @@ -21,6 +21,7 @@ #include #include #include +#include using namespace Dali; using namespace Dali::Toolkit; @@ -53,9 +54,19 @@ void PaddingExample::Create() { // The Init signal is received once (only) during the Application lifetime - // Creates a default view with a default tool bar. - // The view is added to the stage. + // Create a root layout, ideally Dali would have a default layout in the root layer. + // Without this root layer the mAbsoluteLayout (or any other layout) will not + // honour WIDTH_SPECIFICATION or HEIGHT_SPECIFICATION settings. + // It uses the default stage size and ideally should have a layout added to it. auto stage = Stage::GetCurrent(); + auto rootLayoutControl = Control::New(); + rootLayoutControl.SetName( "AbsoluteLayout"); + auto rootLayout = AbsoluteLayout::New(); + DevelControl::SetLayout( rootLayoutControl, rootLayout ); + rootLayoutControl.SetAnchorPoint( AnchorPoint::CENTER ); + rootLayoutControl.SetParentOrigin( ParentOrigin::CENTER ); + stage.Add( rootLayoutControl ); + // Create a table view to show a pair of buttons above each image. mHorizontalBox = Control::New(); @@ -63,11 +74,13 @@ void PaddingExample::Create() auto hboxLayout = HboxLayout::New(); DevelControl::SetLayout( mHorizontalBox, hboxLayout ); mHorizontalBox.SetName("HBox"); - + mHorizontalBox.SetBackgroundColor( Color::WHITE ); + mHorizontalBox.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, 480 ); + mHorizontalBox.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, 700 ); mHorizontalBox.SetAnchorPoint( AnchorPoint::CENTER ); mHorizontalBox.SetParentOrigin( ParentOrigin::CENTER ); - stage.Add( mHorizontalBox ); + rootLayoutControl.Add( mHorizontalBox ); mToggleButton = Toolkit::PushButton::New(); mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Toggle Padding on #2" ); @@ -86,13 +99,13 @@ void PaddingExample::Create() // Set Padding for second ImageView if( 1 == x ) { - mImageViews[x].SetProperty(Toolkit::Control::Property::PADDING, Extents(10.0f,10.0f,5.0f, 5.0f)); + mImageViews[x].SetProperty(Toolkit::Control::Property::PADDING, Extents( 10.0f,10.0f,5.0f, 5.0f)); } // Set margin for first ImageView if( 0 == x ) { - mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents(10.0f,10.0f,0.0f, 0.0f)); + mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents( 10.0f,10.0f,0.0f, 0.0f)); } mHorizontalBox.Add( mImageViews[x] );