[NUI] Support Fade Scroll Bar feature.
authoreverLEEst(SangHyeon Lee) <dltkdgus1764@gmail.com>
Wed, 18 May 2022 11:00:10 +0000 (04:00 -0700)
committerSeoyeon2Kim <34738918+Seoyeon2Kim@users.noreply.github.com>
Fri, 27 May 2022 06:15:42 +0000 (15:15 +0900)
scrollbar is now automatically fade in/out when it stay long enough to threshold time.

Scrollablebase :
FadeScollbar boolean Property is enabling scrollbar fading.
default value is true.

ScrollbarBase :
FadeOutThreshold is internal unsigned integar value threshold time for fading out. 500ms is default value.
FadeDuration is internal integar value duration for fading animation. 200ms is default value.
FadeIn(): internal method for fade in animation.
FadeOut(): internal method for fade out animation. fade out will be excuted on delay of FadeOutThreshold.

src/Tizen.NUI.Components/Controls/ScrollableBase.cs
src/Tizen.NUI.Components/Controls/ScrollableBaseBindableProperty.cs
src/Tizen.NUI.Components/Controls/Scrollbar.cs
src/Tizen.NUI.Components/Controls/ScrollbarBase.cs
test/Tizen.NUI.Tests/Tizen.NUI.Components.Devel.Tests/testcase/Controls/TSScrollableBase.cs

index 6cba3ea..4855dc1 100755 (executable)
@@ -154,6 +154,7 @@ namespace Tizen.NUI.Components
         private int mPageWidth = 0;
         private float mPageFlickThreshold = 0.4f;
         private float mScrollingEventThreshold = 0.001f;
+        private bool fadeScrollbar = true;
 
         private class ScrollableBaseCustomLayout : AbsoluteLayout
         {
@@ -531,6 +532,49 @@ namespace Tizen.NUI.Components
                     else
                     {
                         scrollBar.Show();
+                        if (fadeScrollbar)
+                        {
+                            scrollBar.Opacity = 1.0f;
+                            scrollBar.FadeOut();
+                        }
+                    }
+                }
+            }
+        }
+
+        /// <summary>
+        /// The boolean flag for automatic fading Scrollbar.
+        /// Scrollbar will be faded out when scroll stay in certain position longer than the threshold.
+        /// Scrollbar will be faded in scroll position changes.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public bool FadeScrollbar
+        {
+            get => (bool)GetValue(FadeScrollbarProperty);
+            set => SetValue(FadeScrollbarProperty, value);
+        }
+
+        private bool InternalFadeScrollbar
+        {
+            get
+            {
+                return fadeScrollbar;
+            }
+            set
+            {
+                fadeScrollbar = value;
+
+                if (scrollBar != null && !hideScrollbar)
+                {
+                    if (value)
+                    {
+                        scrollBar.FadeOut();
+                    }
+                    else
+                    {
+                        scrollBar.Opacity = 1.0f;
+                        // Removing fadeout timer and animation.
+                        scrollBar.FadeIn();
                     }
                 }
             }
@@ -1015,6 +1059,11 @@ namespace Tizen.NUI.Components
                 float viewportLength = isHorizontal ? Size.Width : Size.Height;
                 float currentPosition = isHorizontal ? ContentContainer.CurrentPosition.X : ContentContainer.CurrentPosition.Y;
                 Scrollbar.Update(contentLength, viewportLength, -currentPosition);
+
+                if (!hideScrollbar && fadeScrollbar)
+                {
+                    Scrollbar.FadeOut();
+                }
             }
         }
 
@@ -1072,18 +1121,33 @@ namespace Tizen.NUI.Components
         {
             ScrollEventArgs eventArgs = new ScrollEventArgs(ContentContainer.CurrentPosition);
             ScrollDragStarted?.Invoke(this, eventArgs);
+
+            if (!hideScrollbar && fadeScrollbar)
+            {
+                scrollBar?.FadeIn();
+            }
         }
 
         private void OnScrollDragEnded()
         {
             ScrollEventArgs eventArgs = new ScrollEventArgs(ContentContainer.CurrentPosition);
             ScrollDragEnded?.Invoke(this, eventArgs);
+
+            if (!hideScrollbar && fadeScrollbar)
+            {
+                scrollBar?.FadeOut();
+            }
         }
 
         private void OnScrollAnimationStarted()
         {
             ScrollEventArgs eventArgs = new ScrollEventArgs(ContentContainer.CurrentPosition);
             ScrollAnimationStarted?.Invoke(this, eventArgs);
+
+            if (!hideScrollbar && fadeScrollbar)
+            {
+                scrollBar?.FadeIn();
+            }
         }
 
         private void OnScrollAnimationEnded()
@@ -1093,6 +1157,11 @@ namespace Tizen.NUI.Components
 
             ScrollEventArgs eventArgs = new ScrollEventArgs(ContentContainer.CurrentPosition);
             ScrollAnimationEnded?.Invoke(this, eventArgs);
+
+            if (!hideScrollbar && fadeScrollbar)
+            {
+                scrollBar?.FadeOut();
+            }
         }
 
         private void OnScroll()
index 4198a35..9ceb2f1 100755 (executable)
@@ -310,5 +310,24 @@ namespace Tizen.NUI.Components
             var instance = (ScrollableBase)bindable;
             return instance.stepScrollDistance;
         });
+
+        /// <summary>
+        /// FadeScrollbarProperty
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public static readonly BindableProperty FadeScrollbarProperty = BindableProperty.Create(nameof(FadeScrollbar), typeof(bool), typeof(ScrollableBase), default(bool), propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            var instance = (ScrollableBase)bindable;
+            if (newValue != null)
+            {
+                instance.InternalFadeScrollbar = (bool)newValue;
+            }
+        },
+        defaultValueCreator: (bindable) =>
+        {
+            var instance = (ScrollableBase)bindable;
+            return instance.InternalFadeScrollbar;
+        });
+
     }
 }
index a18fcec..a8950ec 100755 (executable)
@@ -98,6 +98,9 @@ namespace Tizen.NUI.Components
         private Color thumbColor;
         private PaddingType trackPadding = new PaddingType(4, 4, 4, 4);
         private bool isHorizontal;
+        private uint fadeOutThreshold = 500;
+        private int fadeDuration = 200;
+        private Timer fadeOutTimer;
 
         #endregion Fields
 
@@ -256,6 +259,22 @@ namespace Tizen.NUI.Components
             }
         }
 
+        /// <inheritdoc/>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        internal override uint FadeOutThreshold
+        {
+            get => fadeOutThreshold;
+            set => fadeOutThreshold = value;
+        }
+
+        /// <inheritdoc/>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        internal override int FadeDuration
+        {
+            get => fadeDuration;
+            set => fadeDuration = value;
+        }
+
         #endregion Properties
 
 
@@ -456,6 +475,49 @@ namespace Tizen.NUI.Components
 
         /// <inheritdoc/>
         [EditorBrowsable(EditorBrowsableState.Never)]
+        internal override void FadeOut()
+        {
+            if (fadeOutTimer == null)
+            {
+                fadeOutTimer = new Timer(fadeOutThreshold);
+                fadeOutTimer.Tick += ((object target, Timer.TickEventArgs args) =>
+                {
+                    var anim = EnsureOpacityAnimation();
+
+                    if (Opacity != 0.0f)
+                    {
+                        anim.AnimateTo(this, "Opacity", 0.0f, 0, fadeDuration);
+                        anim.Play();
+                    }
+                    fadeOutTimer = null;
+                    return false;
+                });
+                fadeOutTimer.Start();
+            }
+        }
+
+        /// <inheritdoc/>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        internal override void FadeIn()
+        {
+            if (fadeOutTimer != null)
+            {
+                fadeOutTimer.Stop();
+                fadeOutTimer.Dispose();
+                fadeOutTimer = null;
+            }
+
+            var anim = EnsureOpacityAnimation();
+
+            if (Opacity != 1.0)
+            {
+                anim.AnimateTo(this, "Opacity", 1.0f, 0, fadeDuration);
+                anim.Play();
+            }
+        }
+
+        /// <inheritdoc/>
+        [EditorBrowsable(EditorBrowsableState.Never)]
         public override void ApplyStyle(ViewStyle viewStyle)
         {
             base.ApplyStyle(viewStyle);
index c8f3077..8d90ef5 100755 (executable)
@@ -104,6 +104,20 @@ namespace Tizen.NUI.Components
         public abstract void Initialize(float contentLength, float viewportLength, float currentPosition, bool isHorizontal = false);
 
         /// <summary>
+        /// Fade out scroll bar with delay. fade in effect will be erased after delay timeout.
+        /// See <see cref="FadeOutThreshold"/>, <see cref="FadeDuration"/>.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        internal virtual void FadeOut() {}
+
+        /// <summary>
+        /// Fade in scroll bar. fade out effect will be erased.
+        /// See <see cref="FadeDuration"/>.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        internal virtual void FadeIn() {}
+
+        /// <summary>
         /// Scroll position given to ScrollTo or Update.
         /// </summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
@@ -115,6 +129,19 @@ namespace Tizen.NUI.Components
         [EditorBrowsable(EditorBrowsableState.Never)]
         public abstract float ScrollCurrentPosition { get; }
 
+        /// <summary>
+        /// The milisecond threshold for fading out scroll bar.
+        /// scroll bar will be faded out when scroll stay in certain position longer than this threshold.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        internal virtual uint FadeOutThreshold { get; set; }
+
+        /// <summary>
+        /// The milisecond duration for fading scroll bar animation.
+        /// </summary>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        internal virtual int FadeDuration { get; set; }
+
         #endregion Methods
     }
 }
index ad3835a..83da3e6 100755 (executable)
@@ -589,5 +589,32 @@ namespace Tizen.NUI.Components.Devel.Tests
             testingTarget.Dispose();
             tlog.Debug(tag, $"ScrollableBaseStepScrollDistance END (OK)");
         }
+
+
+        [Test]
+        [Category("P1")]
+        [Description("ScrollableBase FadeScrollbar")]
+        [Property("SPEC", "Tizen.NUI.Components.ScrollableBase.FadeScrollbar A")]
+        [Property("SPEC_URL", "-")]
+        [Property("CRITERIA", "PRW")]
+        [Property("COVPARAM", "")]
+        [Property("AUTHOR", "sh10233.lee@samsung.com")]
+        public void ScrollableBaseFadeScrollbar()
+        {
+            tlog.Debug(tag, $"ScrollableBaseFadeScrollbar START");
+
+            var testingTarget = new ScrollableBase();
+            Assert.IsNotNull(testingTarget, "null handle");
+            Assert.IsInstanceOf<ScrollableBase>(testingTarget, "Should return ScrollableBase instance.");
+
+            testingTarget.FadeScrollbar = false;
+            Assert.AreEqaul(false, testingTarget.FadeScrollbar, "Should be equal.");
+
+            testingTarget.FadeScrollbar = true;
+            Assert.AreEqaul(true, testingTarget.FadeScrollbar, "Should be equal.");
+
+            testingTarget.Dispose();
+            tlog.Debug(tag, $"ScrollableBaseFadeScrollbar END (OK)");
+        }
     }
 }