From 042691b612dcd736da9126b81da04e68d07885ac Mon Sep 17 00:00:00 2001 From: Adeel Kazmi Date: Mon, 25 Nov 2019 17:34:45 +0000 Subject: [PATCH] A very simple scroll-view example Change-Id: I49298a830fd6faaf20325ef1f0339d012140b88e --- com.samsung.dali-demo.xml | 3 + .../simple-scroll-view-example.cpp | 171 +++++++++++++++++++++ resources/po/en_GB.po | 3 + resources/po/en_US.po | 3 + shared/dali-demo-strings.h | 6 +- tests-reel/dali-tests-reel.cpp | 1 + 6 files changed, 185 insertions(+), 2 deletions(-) create mode 100644 examples/simple-scroll-view/simple-scroll-view-example.cpp diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml index d9821bd..5751ee1 100644 --- a/com.samsung.dali-demo.xml +++ b/com.samsung.dali-demo.xml @@ -232,6 +232,9 @@ + + + diff --git a/examples/simple-scroll-view/simple-scroll-view-example.cpp b/examples/simple-scroll-view/simple-scroll-view-example.cpp new file mode 100644 index 0000000..a19d795 --- /dev/null +++ b/examples/simple-scroll-view/simple-scroll-view-example.cpp @@ -0,0 +1,171 @@ +/* + * Copyright (c) 2019 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. + * + */ + +// EXTERNAL INCLUDES +#include +#include + +using namespace Dali; +using namespace Dali::Toolkit; + +namespace +{ +const int NUMBER_OF_PAGES = 9; ///< Number of Pages going across +const int ROWS_PER_PAGE = 5; ///< Number of Images going down (rows) within a Page + +const float DISTANCE_BETWEEN_IMAGES = 6.0f; ///< The distance between the images + +} // unnamed namespace + +/** + * An example showing how to create a very simple scroll view + */ +class ExampleController : public ConnectionTracker +{ +public: + + /** + * Constructor + * @param application class, stored as reference + */ + ExampleController( Application& application ) + : mApplication( application ) + { + // Connect to the Application's Init and orientation changed signal + mApplication.InitSignal().Connect(this, &ExampleController::OnInit); + } + + ~ExampleController() = default; + +private: + + /** + * This method gets called once the main loop of application is up and running + */ + void OnInit(Application& app) + { + Stage stage = Dali::Stage::GetCurrent(); + stage.SetBackgroundColor( Color::WHITE ); + stage.KeyEventSignal().Connect(this, &ExampleController::OnKeyEvent); + + // Make the scroll view's size a certain percentage of the stage + const Vector2 pageSize = stage.GetSize() * 0.75f; + + // Create a scroll view and set our desired properties + ScrollView scrollView = ScrollView::New(); + scrollView.SetAnchorPoint( AnchorPoint::CENTER ); + scrollView.SetParentOrigin( ParentOrigin::CENTER ); + scrollView.SetSize( pageSize ); + scrollView.SetAxisAutoLock( true ); + stage.Add( scrollView ); + + // We want to the scroll-view so only one page is shown + scrollView.SetProperty( Actor::Property::CLIPPING_MODE, ClippingMode::CLIP_TO_BOUNDING_BOX ); + + // Create rulers for the X and Y domains, we want to disable vertical scrolling but enable horizontal scrolling + RulerPtr rulerX = new FixedRuler( pageSize.width ); // Snaps to a multiple of this when flicking + RulerPtr rulerY = new DefaultRuler; + rulerX->SetDomain( RulerDomain( 0.0f, pageSize.width * NUMBER_OF_PAGES, true ) ); // Set the domain to equal the number of pages used + rulerY->Disable(); + + scrollView.SetRulerX( rulerX ); + scrollView.SetRulerY( rulerY ); + + // Populate the Pages + for( int column = 0, textNumber = 0; column < NUMBER_OF_PAGES; column++ ) + { + Actor page = CreatePage( pageSize, textNumber ); + page.SetPosition( column * pageSize.x, 0.0f ); + scrollView.Add( page ); + } + + // Do a little animation from the last page to the first page on load + scrollView.ScrollTo( NUMBER_OF_PAGES - 1, 0.0f ); + scrollView.ScrollTo( 0 ); + } + + /** + * Creates a page using a source of images. + */ + Actor CreatePage( const Vector2& pageSize, int& textNumber ) + { + Actor page = Actor::New(); + page.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS ); + page.SetParentOrigin( ParentOrigin::CENTER ); + page.SetAnchorPoint( AnchorPoint::CENTER ); + + Stage stage = Stage::GetCurrent(); + + // Calculate the number of images going across (columns) within a page, the image size and the size of the text + const int imageColumns = round( ROWS_PER_PAGE * ( pageSize.width ) / ( pageSize.height ) ); + const Vector3 imageSize( ( pageSize.width / imageColumns ) - DISTANCE_BETWEEN_IMAGES, + ( pageSize.height / ROWS_PER_PAGE) - DISTANCE_BETWEEN_IMAGES, + 0.0f); + const float textPixelSize = imageSize.width / 3.0f; + + // Populate the page + for( int row = 0; row < ROWS_PER_PAGE; row++ ) + { + for( int column = 0; column < imageColumns; column++ ) + { + const Vector3 position( DISTANCE_BETWEEN_IMAGES * 0.5f + ( imageSize.x + DISTANCE_BETWEEN_IMAGES ) * column - pageSize.width * 0.5f, + DISTANCE_BETWEEN_IMAGES * 0.5f + ( imageSize.y + DISTANCE_BETWEEN_IMAGES ) * row - pageSize.height * 0.5f, + 0.0f); + + Control item = TextLabel::New( std::to_string( textNumber++ ) ); + item.SetProperty( Actor::Property::POSITION, position + imageSize * 0.5f ); + item.SetProperty( Actor::Property::SIZE, imageSize ); + item.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER ); + item.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER ); + item.SetProperty( TextLabel::Property::TEXT_COLOR, Color::BLACK ); + item.SetProperty( TextLabel::Property::PIXEL_SIZE, textPixelSize ); + item.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::CENTER ); + item.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, VerticalAlignment::CENTER ); + item.SetProperty( TextLabel::Property::OUTLINE, Property::Map{ { "width", 2 }, { "color", Color::WHITE } } ); + item.SetProperty( Control::Property::BACKGROUND, Vector4( Random::Range( 0.0f, 1.0f ), Random::Range( 0.0f, 1.0f ), Random::Range( 0.0f, 1.0f ), 0.7f ) ); + page.Add(item); + } + } + + return page; + } + + /** + * Main key event handler + */ + void OnKeyEvent(const KeyEvent& event) + { + if(event.state == KeyEvent::Down) + { + if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) ) + { + mApplication.Quit(); + } + } + } + +private: + Application& mApplication; ///< Application instance +}; + +int DALI_EXPORT_API main(int argc, char **argv) +{ + Application app = Application::New(&argc, &argv, DEMO_THEME_PATH); + ExampleController test(app); + app.MainLoop(); + return 0; +} diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po index dc284c4..b520b9d 100755 --- a/resources/po/en_GB.po +++ b/resources/po/en_GB.po @@ -184,6 +184,9 @@ msgstr "Script-based UI" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "Scroll View" +msgid "DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW" +msgstr "Simple Scroll View" + msgid "DALI_DEMO_STR_TITLE_SPARKLE" msgstr "Sparkle" diff --git a/resources/po/en_US.po b/resources/po/en_US.po index aded425..9647ce0 100755 --- a/resources/po/en_US.po +++ b/resources/po/en_US.po @@ -187,6 +187,9 @@ msgstr "Script-based UI" msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW" msgstr "Scroll View" +msgid "DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW" +msgstr "Simple Scroll View" + msgid "DALI_DEMO_STR_TITLE_SPARKLE" msgstr "Sparkle" diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h index 48ad510..354338f 100644 --- a/shared/dali-demo-strings.h +++ b/shared/dali-demo-strings.h @@ -102,9 +102,10 @@ extern "C" #define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS") #define DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING") #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL") -#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL") #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI") #define DALI_DEMO_STR_TITLE_SCROLL_VIEW dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCROLL_VIEW") +#define DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW") +#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL") #define DALI_DEMO_STR_TITLE_SKYBOX dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SKYBOX") #define DALI_DEMO_STR_TITLE_SPARKLE dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SPARKLE") #define DALI_DEMO_STR_TITLE_STYLING dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_STYLING") @@ -199,9 +200,10 @@ extern "C" #define DALI_DEMO_STR_TITLE_RENDERING_RAY_MARCHING "Ray Marching" #define DALI_DEMO_STR_TITLE_RENDERING_RADIAL_PROGRESS "Radial Progress" #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL "Renderer Stencils" -#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL "Simple Visuals Control" #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI "Script Based UI" #define DALI_DEMO_STR_TITLE_SCROLL_VIEW "Scroll View" +#define DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW "Simple Scroll View" +#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL "Simple Visuals Control" #define DALI_DEMO_STR_TITLE_SKYBOX "Skybox" #define DALI_DEMO_STR_TITLE_SPARKLE "Sparkle" #define DALI_DEMO_STR_TITLE_STYLING "Styling" diff --git a/tests-reel/dali-tests-reel.cpp b/tests-reel/dali-tests-reel.cpp index 0b7d19a..18a3fa2 100644 --- a/tests-reel/dali-tests-reel.cpp +++ b/tests-reel/dali-tests-reel.cpp @@ -49,6 +49,7 @@ int DALI_EXPORT_API main(int argc, char **argv) demo.AddExample(Example("text-overlap.example", DALI_DEMO_STR_TITLE_TEXT_OVERLAP)); demo.AddExample(Example("visual-fitting-mode.example", DALI_DEMO_STR_TITLE_VISUAL_FITTING_MODE)); demo.AddExample(Example("visual-transitions.example", DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS)); + demo.AddExample(Example("simple-scroll-view.example", DALI_DEMO_STR_TITLE_SIMPLE_SCROLL_VIEW)); demo.AddExample(Example("simple-text-label.example", DALI_DEMO_STR_TITLE_TEXT_LABEL)); demo.AddExample(Example("simple-text-field.example", DALI_DEMO_STR_TITLE_TEXT_FIELD)); demo.AddExample(Example("simple-text-renderer.example", DALI_DEMO_STR_TITLE_TEXT_RENDERER)); -- 2.7.4