[NUI] Add Value Indicator of Slider (#2533)
authorSeoyeon2Kim <34738918+Seoyeon2Kim@users.noreply.github.com>
Wed, 27 Jan 2021 01:55:33 +0000 (10:55 +0900)
committerdongsug-song <35130733+dongsug-song@users.noreply.github.com>
Wed, 27 Jan 2021 11:05:23 +0000 (20:05 +0900)
- Value Indicator is a tooltip of slider.
- Add some properties for value indicator :
  IsValueShown, ValueIndicatorText, ValueIndicatorSize, and ValueIndicatorUrl

Signed-off-by: Seoyeon Kim <seoyeon2.kim@samsung.com>
src/Tizen.NUI.Components/Controls/Slider.Internal.cs
src/Tizen.NUI.Components/Controls/Slider.cs
src/Tizen.NUI.Components/Style/SliderStyle.cs
src/Tizen.NUI.Components/Theme/DefaultTheme.cs
src/Tizen.NUI.Components/res/nui_component_default_slider_value_indicator.png [new file with mode: 0644]

index 619eef3..a03745b 100755 (executable)
@@ -39,6 +39,12 @@ namespace Tizen.NUI.Components
         private uint? trackThickness = null;
         // the value of the space between track and indicator object
         private Extents _spaceBetweenTrackAndIndicator = null;
+        // Whether the value indicator is shown or not
+        private bool isValueShown = false;
+        // the value indicator text
+        private TextLabel valueIndicatorText = null;
+        // the value indicator image object
+        private ImageView valueIndicatorImage = null;
 
         private PanGestureDetector panGestureDetector = null;
         private float currentSlidedOffset;
@@ -58,6 +64,10 @@ namespace Tizen.NUI.Components
             isFocused = false;
             isPressed = false;
             LayoutDirectionChanged += OnLayoutDirectionChanged;
+
+            panGestureDetector = new PanGestureDetector();
+            panGestureDetector.Attach(this);
+            panGestureDetector.Detected += OnPanGestureDetected;
         }
 
         private void OnLayoutDirectionChanged(object sender, LayoutDirectionChangedEventArgs e)
@@ -161,15 +171,53 @@ namespace Tizen.NUI.Components
                     slidedTrackImage.Add(thumbImage);
                 }
                 thumbImage.TouchEvent += OnTouchEventForThumb;
-
-                panGestureDetector = new PanGestureDetector();
-                panGestureDetector.Attach(thumbImage);
-                panGestureDetector.Detected += OnPanGestureDetected;
             }
 
             return thumbImage;
         }
 
+        private ImageView CreateValueIndicator()
+        {
+            if (null == valueIndicatorImage)
+            {
+                valueIndicatorImage = new ImageView()
+                {
+                    PositionUsesPivotPoint = true,
+                    ParentOrigin = Tizen.NUI.ParentOrigin.Center,
+                    PivotPoint = Tizen.NUI.PivotPoint.Center,
+                    WidthResizePolicy = ResizePolicyType.Fixed,
+                    HeightResizePolicy = ResizePolicyType.Fixed,
+                };
+                if (valueIndicatorText != null)
+                {
+                    valueIndicatorImage.Add(valueIndicatorText);
+                }
+                // TODO : ValueIndicator can be a child of Thumb
+                this.Add(valueIndicatorImage);
+            }
+
+            valueIndicatorImage.Hide();
+            return valueIndicatorImage;
+        }
+
+        private TextLabel CreateValueIndicatorText()
+        {
+            if (null == valueIndicatorText)
+            {
+                valueIndicatorText = new TextLabel()
+                {
+                    WidthResizePolicy = ResizePolicyType.Fixed,
+                    HeightResizePolicy = ResizePolicyType.Fixed
+                };
+                if (valueIndicatorImage != null)
+                {
+                    valueIndicatorImage.Add(valueIndicatorText);
+                }
+            }
+
+            return valueIndicatorText;
+        }
+
         private void OnPanGestureDetected(object source, PanGestureDetector.DetectedEventArgs e)
         {
             if (e.PanGesture.State == Gesture.StateType.Started)
@@ -182,6 +230,12 @@ namespace Tizen.NUI.Components
                 {
                     currentSlidedOffset = slidedTrackImage.SizeHeight;
                 }
+
+                if (isValueShown)
+                {
+                    valueIndicatorImage.Show();
+                }
+
                 if (null != sliderSlidingStartedHandler)
                 {
                     SliderSlidingStartedEventArgs args = new SliderSlidingStartedEventArgs();
@@ -206,6 +260,11 @@ namespace Tizen.NUI.Components
 
             if (e.PanGesture.State == Gesture.StateType.Finished)
             {
+                if (isValueShown)
+                {
+                    valueIndicatorImage.Hide();
+                }
+
                 if (null != slidingFinishedHandler)
                 {
                     SlidingFinishedArgs args = new SlidingFinishedArgs();
@@ -265,6 +324,19 @@ namespace Tizen.NUI.Components
                     highIndicatorText.PivotPoint = NUI.PivotPoint.CenterRight;
                     highIndicatorText.PositionUsesPivotPoint = true;
                 }
+                if (valueIndicatorImage != null)
+                {
+                    valueIndicatorImage.ParentOrigin = NUI.ParentOrigin.TopLeft;
+                    valueIndicatorImage.PivotPoint = NUI.PivotPoint.BottomCenter;
+                    valueIndicatorImage.PositionUsesPivotPoint = true;
+                }
+                if (valueIndicatorText != null)
+                {
+                    valueIndicatorText.ParentOrigin = NUI.ParentOrigin.TopCenter;
+                    valueIndicatorText.PivotPoint = NUI.PivotPoint.TopCenter;
+                    valueIndicatorText.PositionUsesPivotPoint = true;
+                    valueIndicatorText.Padding = new Extents(0, 0, 5, 0); // TODO : How to set the text as center
+                }
                 if (panGestureDetector != null)
                 {
                     if (!isInitial)
@@ -312,6 +384,19 @@ namespace Tizen.NUI.Components
                     highIndicatorText.PivotPoint = NUI.PivotPoint.TopCenter;
                     highIndicatorText.PositionUsesPivotPoint = true;
                 }
+                if (valueIndicatorImage != null)
+                {
+                    valueIndicatorImage.ParentOrigin = NUI.ParentOrigin.BottomCenter;
+                    valueIndicatorImage.PivotPoint = NUI.PivotPoint.BottomCenter;
+                    valueIndicatorImage.PositionUsesPivotPoint = true;
+                }
+                if (valueIndicatorText != null)
+                {
+                    valueIndicatorText.ParentOrigin = NUI.ParentOrigin.TopCenter;
+                    valueIndicatorText.PivotPoint = NUI.PivotPoint.TopCenter;
+                    valueIndicatorText.PositionUsesPivotPoint = true;
+                    valueIndicatorText.Padding = new Extents(0, 0, 5, 0); // TODO : How to set the text as center
+                }
                 if (panGestureDetector != null)
                 {
                     if (!isInitial)
@@ -496,11 +581,21 @@ namespace Tizen.NUI.Components
                 }
                 float slidedTrackLength = (float)BgTrackLength() * ratio;
                 slidedTrackImage.Size2D = new Size2D((int)(slidedTrackLength + round), (int)curTrackThickness); //Add const round to reach Math.Round function.
+
+                if (isValueShown)
+                {
+                    valueIndicatorImage.Position = new Position(slidedTrackImage.Size2D.Width, 0);
+                }
             }
             else if (direction == DirectionType.Vertical)
             {
                 float slidedTrackLength = (float)BgTrackLength() * ratio;
                 slidedTrackImage.Size2D = new Size2D((int)(curTrackThickness + round), (int)slidedTrackLength); //Add const round to reach Math.Round function.
+
+                if (isValueShown)
+                {
+                    valueIndicatorImage.Position = new Position(0, -(slidedTrackImage.Size2D.Height + thumbImage.Size.Height / 2));
+                }
             }
         }
 
index c7e55a3..24d7fe7 100755 (executable)
@@ -1,5 +1,5 @@
 /*
- * Copyright(c) 2019 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2021 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.
@@ -66,7 +66,6 @@ namespace Tizen.NUI.Components
     /// <since_tizen> 6 </since_tizen>
     public partial class Slider : Control
     {
-        /// This will be public opened in tizen_6.0 after ACR done. Before ACR, need to be hidden as inhouse API.
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly BindableProperty IndicatorTypeProperty = BindableProperty.Create("IndicatorType", typeof(IndicatorType), typeof(Slider), IndicatorType.None, propertyChanged: (bindable, oldValue, newValue) =>
         {
@@ -81,7 +80,6 @@ namespace Tizen.NUI.Components
             var instance = (Slider)bindable;
             return instance.privateIndicatorType;
         });
-        /// This will be public opened in tizen_6.0 after ACR done. Before ACR, need to be hidden as inhouse API.
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly BindableProperty SpaceBetweenTrackAndIndicatorProperty = BindableProperty.Create(nameof(SpaceBetweenTrackAndIndicator), typeof(uint), typeof(Slider), (uint)0, propertyChanged: (bindable, oldValue, newValue) =>
         {
@@ -96,7 +94,6 @@ namespace Tizen.NUI.Components
             var instance = (Slider)bindable;
             return instance.privateSpaceBetweenTrackAndIndicator;
         });
-        /// This will be public opened in tizen_6.0 after ACR done. Before ACR, need to be hidden as inhouse API.
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly BindableProperty TrackThicknessProperty = BindableProperty.Create(nameof(TrackThickness), typeof(uint), typeof(Slider), (uint)0, propertyChanged: (bindable, oldValue, newValue) =>
         {
@@ -111,6 +108,43 @@ namespace Tizen.NUI.Components
             var instance = (Slider)bindable;
             return instance.privateTrackThickness;
         });
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty IsValueShownProperty = BindableProperty.Create(nameof(IsValueShown), typeof(bool), typeof(Slider), true, propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            var instance = (Slider)bindable;
+            if (newValue != null)
+            {
+                bool newValueShown = (bool)newValue;
+                if (instance.isValueShown != newValueShown)
+                {
+                    instance.isValueShown = newValueShown;
+                }
+            }
+        },
+        defaultValueCreator: (bindable) =>
+        {
+            var instance = (Slider)bindable;
+            return instance.isValueShown;
+        });
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty ValueIndicatorTextProperty = BindableProperty.Create(nameof(ValueIndicatorText), typeof(string), typeof(Slider), string.Empty, propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            var instance = (Slider)bindable;
+            if (newValue != null)
+            {
+                string newText = (string)newValue;
+                instance.valueIndicatorText.Text = newText;
+                if (instance.sliderStyle != null)
+                {
+                    instance.sliderStyle.ValueIndicatorText.Text = newText;
+                }
+            }
+        },
+        defaultValueCreator: (bindable) =>
+        {
+            var instance = (Slider)bindable;
+            return instance.valueIndicatorText.Text;
+        });
 
         static Slider() { }
 
@@ -301,6 +335,8 @@ namespace Tizen.NUI.Components
                 result.HighIndicatorImage.CopyPropertiesFromView(highIndicatorImage);
                 result.LowIndicator.CopyPropertiesFromView(lowIndicatorText);
                 result.HighIndicator.CopyPropertiesFromView(highIndicatorText);
+                result.ValueIndicatorText.CopyPropertiesFromView(valueIndicatorText);
+                result.ValueIndicatorImage.CopyPropertiesFromView(valueIndicatorImage);
                 return result;
             }
         }
@@ -671,6 +707,82 @@ namespace Tizen.NUI.Components
             }
         }
 
+        /// <summary>
+        /// Flag to decide whether the value indicator is shown
+        /// </summary>
+        /// This will be public opened later after ACR done. Before ACR, need to be hidden as inhouse API.
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public bool IsValueShown
+        {
+            get
+            {
+                return (bool)GetValue(IsValueShownProperty);
+            }
+            set
+            {
+                SetValue(IsValueShownProperty, value);
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the text of value indicator.
+        /// </summary>
+        /// This will be public opened later after ACR done. Before ACR, need to be hidden as inhouse API.
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public string ValueIndicatorText
+        {
+            get
+            {
+                return (string)GetValue(ValueIndicatorTextProperty);
+            }
+            set
+            {
+                SetValue(ValueIndicatorTextProperty, value);
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the size of the value indicator image object.
+        /// </summary>
+        /// This will be public opened later after ACR done. Before ACR, need to be hidden as inhouse API.
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public Size ValueIndicatorSize
+        {
+            get
+            {
+                return valueIndicatorImage?.Size;
+            }
+            set
+            {
+                if (null != valueIndicatorImage)
+                {
+                    valueIndicatorImage.Size = value;
+                    sliderStyle.ValueIndicatorImage.Size = value;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the resource url of the value indicator image object.
+        /// </summary>
+        /// This will be public opened later after ACR done. Before ACR, need to be hidden as inhouse API.
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public string ValueIndicatorUrl
+        {
+            get
+            {
+                return valueIndicatorImage?.ResourceUrl;
+            }
+            set
+            {
+                if (null != valueIndicatorImage)
+                {
+                    valueIndicatorImage.ResourceUrl = value;
+                    sliderStyle.ValueIndicatorImage.ResourceUrl = value;
+                }
+            }
+        }
+
         private Extents spaceBetweenTrackAndIndicator
         {
             get
@@ -829,6 +941,16 @@ namespace Tizen.NUI.Components
                 CreateThumb().ApplyStyle(sliderStyle.Thumb);
             }
 
+            if (null != sliderStyle?.ValueIndicatorText)
+            {
+                CreateValueIndicatorText().ApplyStyle(sliderStyle.ValueIndicatorText);
+            }
+
+            if (null != sliderStyle?.ValueIndicatorImage)
+            {
+                CreateValueIndicator().ApplyStyle(sliderStyle.ValueIndicatorImage);
+            }
+
             EnableControlStatePropagation = true;
         }
 
@@ -858,10 +980,7 @@ namespace Tizen.NUI.Components
             {
                 if (null != panGestureDetector)
                 {
-                    if (null != thumbImage)
-                    {
-                        panGestureDetector.Detach(thumbImage);
-                    }
+                    panGestureDetector.Detach(this);
                     panGestureDetector.Detected -= OnPanGestureDetected;
                     panGestureDetector.Dispose();
                     panGestureDetector = null;
@@ -882,6 +1001,8 @@ namespace Tizen.NUI.Components
                 Utility.Dispose(highIndicatorImage);
                 Utility.Dispose(lowIndicatorText);
                 Utility.Dispose(highIndicatorText);
+                Utility.Dispose(valueIndicatorImage);
+                Utility.Dispose(valueIndicatorText);
             }
 
             base.Dispose(type);
@@ -891,7 +1012,7 @@ namespace Tizen.NUI.Components
         /// Update Slider by style.
         /// </summary>
         /// <since_tizen> 6 </since_tizen>
-        /// This will be public opened in tizen_5.5 after ACR done. Before ACR, need to be hidden as inhouse API.
+        /// This will be public opened later after ACR done. Before ACR, need to be hidden as inhouse API.
         [EditorBrowsable(EditorBrowsableState.Never)]
         protected override void OnUpdate()
         {
@@ -944,6 +1065,11 @@ namespace Tizen.NUI.Components
             PointStateType state = e.Touch.GetState(0);
             if (state == PointStateType.Down)
             {
+                if (isValueShown)
+                {
+                    valueIndicatorImage.Show();
+                }
+
                 Vector2 pos = e.Touch.GetLocalPosition(0);
                 CalculateCurrentValueByTouch(pos);
                 UpdateValue();
@@ -961,6 +1087,13 @@ namespace Tizen.NUI.Components
                     sliderSlidingFinishedHandler(this, args);
                 }
             }
+            else if (state == PointStateType.Up)
+            {
+                if (isValueShown)
+                {
+                    valueIndicatorImage.Hide();
+                }
+            }
             return false;
         }
 
@@ -989,6 +1122,7 @@ namespace Tizen.NUI.Components
             {
                 currentSlidedOffset = bgTrackLength - pos.Y;
             }
+
             if (bgTrackLength != 0)
             {
                 curValue = ((currentSlidedOffset / (float)bgTrackLength) * (maxValue - minValue)) + minValue;
index a7b7bd8..26a87a6 100755 (executable)
@@ -1,5 +1,5 @@
 /*
- * Copyright(c) 2019 Samsung Electronics Co., Ltd.
+ * Copyright(c) 2021 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.
@@ -27,7 +27,6 @@ namespace Tizen.NUI.Components
     /// <since_tizen> 8 </since_tizen>
     public class SliderStyle : ControlStyle
     {
-        /// This will be public opened in tizen_6.0 after ACR done. Before ACR, need to be hidden as inhouse API.
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly BindableProperty IndicatorTypeProperty = BindableProperty.Create(nameof(IndicatorType), typeof(IndicatorType?), typeof(SliderStyle), null, propertyChanged: (bindable, oldValue, newValue) =>
         {
@@ -42,7 +41,6 @@ namespace Tizen.NUI.Components
             var instance = (SliderStyle)bindable;
             return instance.privateIndicatorType;
         });
-        /// This will be public opened in tizen_6.0 after ACR done. Before ACR, need to be hidden as inhouse API.
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly BindableProperty SpaceBetweenTrackAndIndicatorProperty = BindableProperty.Create(nameof(SpaceBetweenTrackAndIndicator), typeof(uint?), typeof(SliderStyle), null, propertyChanged: (bindable, oldValue, newValue) =>
         {
@@ -57,7 +55,6 @@ namespace Tizen.NUI.Components
             var instance = (SliderStyle)bindable;
             return instance.privateSpaceBetweenTrackAndIndicator;
         });
-        /// This will be public opened in tizen_6.0 after ACR done. Before ACR, need to be hidden as inhouse API.
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly BindableProperty TrackThicknessProperty = BindableProperty.Create(nameof(TrackThickness), typeof(uint?), typeof(SliderStyle), null, propertyChanged: (bindable, oldValue, newValue) =>
         {
@@ -72,7 +69,6 @@ namespace Tizen.NUI.Components
             var instance = (SliderStyle)bindable;
             return instance.privateTrackThickness;
         });
-        /// This will be public opened in tizen_6.0 after ACR done. Before ACR, need to be hidden as inhouse API.
         [EditorBrowsable(EditorBrowsableState.Never)]
         public static readonly BindableProperty TrackPaddingProperty = BindableProperty.Create(nameof(TrackPadding), typeof(Extents), typeof(SliderStyle), null, propertyChanged: (bindable, oldValue, newValue) =>
         {
@@ -151,6 +147,20 @@ namespace Tizen.NUI.Components
         public TextLabelStyle HighIndicator { get; set; } = new TextLabelStyle();
 
         /// <summary>
+        /// Get or set the value indicator text.
+        /// </summary>
+        /// This will be public opened later after ACR done. Before ACR, need to be hidden as inhouse API.
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public TextLabelStyle ValueIndicatorText { get; set; } = new TextLabelStyle();
+
+        /// <summary>
+        /// Get or set the value indicator image.
+        /// </summary>
+        /// This will be public opened later after ACR done. Before ACR, need to be hidden as inhouse API.
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public ImageViewStyle ValueIndicatorImage { get; set; } = new ImageViewStyle();
+
+        /// <summary>
         /// Get or set Indicator type
         /// </summary>
         /// <since_tizen> 8 </since_tizen>
@@ -208,6 +218,8 @@ namespace Tizen.NUI.Components
                 HighIndicatorImage.CopyFrom(sliderStyle.HighIndicatorImage);
                 LowIndicator.CopyFrom(sliderStyle.LowIndicator);
                 HighIndicator.CopyFrom(sliderStyle.HighIndicator);
+                ValueIndicatorText.CopyFrom(sliderStyle.ValueIndicatorText);
+                ValueIndicatorImage.CopyFrom(sliderStyle.ValueIndicatorImage);
             }
         }
 
index 6d91e30..7a038ab 100644 (file)
@@ -72,6 +72,7 @@ namespace Tizen.NUI.Components
             ["SliderThumbImageResourceUrl"] = FrameworkInformation.ResourcePath + "nui_component_default_slider_thumb_n.png",
             ["SliderThumbBackgroundImageNormal"] = FrameworkInformation.ResourcePath + "nui_component_default_slider_thumb_bg_p.png",
             ["SliderThumbBackgroundImagePressed"] = FrameworkInformation.ResourcePath + "nui_component_default_slider_thumb_bg_p.png",
+            ["SliderValueIndicatorImage"] = FrameworkInformation.ResourcePath + "nui_component_default_slider_value_indicator.png",
             ["SwitchTrackImageResourceUrlNormal"] = FrameworkInformation.ResourcePath + "nui_component_default_switch_track_n.png",
             ["SwitchTrackImageResourceUrlSelected"] = FrameworkInformation.ResourcePath + "nui_component_default_switch_track_s.png",
             ["SwitchTrackImageResourceUrlDisabled"] = FrameworkInformation.ResourcePath + "nui_component_default_switch_track_d.png",
@@ -269,6 +270,11 @@ namespace Tizen.NUI.Components
                         Pressed = (string)theme.Resources["SliderThumbBackgroundImagePressed"],
                     }
                 },
+                ValueIndicatorImage = new ImageViewStyle()
+                {
+                    Size = new Size(83, 54),
+                    ResourceUrl = (string)theme.Resources["SliderValueIndicatorImage"],
+                },
             });
 
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Switch", new SwitchStyle()
diff --git a/src/Tizen.NUI.Components/res/nui_component_default_slider_value_indicator.png b/src/Tizen.NUI.Components/res/nui_component_default_slider_value_indicator.png
new file mode 100644 (file)
index 0000000..dea3b8b
Binary files /dev/null and b/src/Tizen.NUI.Components/res/nui_component_default_slider_value_indicator.png differ