Add support for reversing the SlideToActView (#67)

* Added a `slider_reversed` boolean attribute * Added a boolean Kotlin attribute `isReversed` to control the reverse behavior * Extended handling of mPosition to support inverted position * Added screenshots and section in the README file * Added an extra layout with example of a reversed slider Fixes #3 Fixes #65
cortinico · May 1, 2019 · 4ae44be · 4ae44be
1 parent 8543fce
commit 4ae44be
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,7 @@ A simple *Slide to Unlock* **Material** widget for **Android**, written in [**Ko
         * [``text``, ``text_size``, ``text_style``, ``text_appearance``](#text-text_size-text_style-text_appearance)
         * [``slider_height``](#slider_height)
         * [``slider_locked``](#slider_locked)
+        * [``slider_reversed``](#slider_reversed)
         * [``slider_icon``](#slider_icon)
         * [``rotate_icon``](#rotate_icon)
         * [``android:elevation``](#androidelevation)
@@ -157,6 +158,20 @@ SlideToActView sta = (SlideToActView) findViewById(R.id.slider);
 sta.setLocked(true);
 ```
 
+#### ``slider_reversed``
+
+Use the ``slider_reversed`` attribute to **reverse the slider** (this is a boolean attribute). When a slider is reversed, the cursor will appear on the right and will progress to the left. (default is false).
+
+<p align="center">
+  <img src="assets/reversed_slider.gif" alt="reversed_slider gif"/>
+</p>
+
+You can also toggle this attribute programmatically with the provided setter.
+
+```java
+SlideToActView sta = (SlideToActView) findViewById(R.id.slider);
+sta.setReversed(true);
+```
 
 #### ``slider_icon``
 

diff --git a/assets/reversed_slider.gif b/assets/reversed_slider.gif
diff --git a/example/src/main/java/com/ncorti/slidetoact/example/MainActivity.java b/example/src/main/java/com/ncorti/slidetoact/example/MainActivity.java
@@ -30,6 +30,7 @@ protected void onCreate(Bundle savedInstanceState) {
         findViewById(R.id.button_event_callbacks).setOnClickListener(this);
         findViewById(R.id.button_locked_slider).setOnClickListener(this);
         findViewById(R.id.button_custom_icon).setOnClickListener(this);
+        findViewById(R.id.button_reversed_slider).setOnClickListener(this);
     }
 
     public boolean onCreateOptionsMenu(Menu menu) {

diff --git a/example/src/main/java/com/ncorti/slidetoact/example/SampleActivity.java b/example/src/main/java/com/ncorti/slidetoact/example/SampleActivity.java
@@ -61,6 +61,9 @@ protected void onCreate(Bundle savedInstanceState) {
             case R.id.button_custom_icon:
                 setContentView(R.layout.content_custom_icon);
                 break;
+            case R.id.button_reversed_slider:
+                setContentView(R.layout.content_reversed_slider);
+                break;
             default:
                 finish();
                 break;

diff --git a/example/src/main/res/layout/activity_main.xml b/example/src/main/res/layout/activity_main.xml
@@ -88,5 +88,11 @@
             android:layout_height="wrap_content"
             android:text="@string/custom_icon" />
 
+        <Button
+            android:id="@+id/button_reversed_slider"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:text="@string/reversed_slider" />
+
     </LinearLayout>
 </ScrollView>
diff --git a/example/src/main/res/layout/content_reversed_slider.xml b/example/src/main/res/layout/content_reversed_slider.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <LinearLayout
+        android:id="@+id/slide_container"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:clipToPadding="false"
+        android:orientation="vertical">
+
+        <com.ncorti.slidetoact.SlideToActView
+            android:id="@+id/slide_reversed"
+            style="@style/SlideToActView.Example"
+            app:slider_reversed="true"
+            app:text="Reversed Slider" />
+
+    </LinearLayout>
+</ScrollView>
diff --git a/example/src/main/res/values/strings.xml b/example/src/main/res/values/strings.xml
@@ -10,6 +10,7 @@
     <string name="event_callback">Event Callback</string>
     <string name="locked_slider">Locked Slider</string>
     <string name="custom_icon">Custom Icon</string>
+    <string name="reversed_slider">Reversed Slider</string>
     <string name="event_log">Event Log</string>
     <string name="welcome_body">Press the following buttons to checkout different SlideToActView and understand each parameter. You can reset the sliders pressing the Reset button in the Toolbar. Enjoy :)</string>
 </resources>
diff --git a/slidetoact/src/main/java/com/ncorti/slidetoact/SlideToActView.kt b/slidetoact/src/main/java/com/ncorti/slidetoact/SlideToActView.kt
@@ -121,7 +121,7 @@ class SlideToActView @JvmOverloads constructor (
             invalidate()
         }
 
-    /** Slider cursor position (between 0 and (`reaWidth - mAreaHeight)) */
+    /** Slider cursor position (between 0 and (`mAreaWidth - mAreaHeight)) */
     private var mPosition: Int = 0
         set(value) {
             field = value
@@ -133,6 +133,13 @@ class SlideToActView @JvmOverloads constructor (
             }
             mPositionPerc = value.toFloat() / (mAreaWidth - mAreaHeight).toFloat()
             mPositionPercInv = 1 - value.toFloat() / (mAreaWidth - mAreaHeight).toFloat()
+            mEffectivePosition = mPosition
+        }
+
+    /** Slider cursor effective position. This is used to handle the `reversed` scenario. */
+    private var mEffectivePosition : Int = 0
+        set(value) {
+            field = if (isReversed) (mAreaWidth - mAreaHeight) - value else value
         }
 
     /** Positioning of text */
@@ -203,6 +210,15 @@ class SlideToActView @JvmOverloads constructor (
     /** Public flag to lock the slider */
     var isLocked = false
 
+    /** Public flag to reverse the slider by 180 degree */
+    var isReversed = false
+        set(value) {
+            field = value
+            // We reassign the position field to trigger the re-computation of the effective position.
+            mPosition = mPosition
+            invalidate()
+        }
+
     /** Public flag to lock the rotation icon */
     var isRotateIcon = true
 
@@ -258,6 +274,7 @@ class SlideToActView @JvmOverloads constructor (
             textAppearance = layoutAttrs.getResourceId(R.styleable.SlideToActView_text_appearance, 0)
 
             isLocked = layoutAttrs.getBoolean(R.styleable.SlideToActView_slider_locked, false)
+            isReversed = layoutAttrs.getBoolean(R.styleable.SlideToActView_slider_reversed, false)
             isRotateIcon = layoutAttrs.getBoolean(R.styleable.SlideToActView_rotate_icon, true)
             isAnimateCompletion = layoutAttrs.getBoolean(R.styleable.SlideToActView_animate_completion, true)
 
@@ -279,8 +296,9 @@ class SlideToActView @JvmOverloads constructor (
             layoutAttrs.recycle()
         }
 
-        mInnerRect = RectF((mActualAreaMargin + mPosition).toFloat(), mActualAreaMargin.toFloat(),
-            (mAreaHeight + mPosition).toFloat() - mActualAreaMargin.toFloat(),
+        mInnerRect = RectF((mActualAreaMargin + mEffectivePosition).toFloat(),
+                mActualAreaMargin.toFloat(),
+            (mAreaHeight + mEffectivePosition).toFloat() - mActualAreaMargin.toFloat(),
             mAreaHeight.toFloat() - mActualAreaMargin.toFloat())
 
         mOuterRect = RectF(mActualAreaWidth.toFloat(), 0f, mAreaWidth.toFloat() - mActualAreaWidth.toFloat(), mAreaHeight.toFloat())
@@ -346,6 +364,9 @@ class SlideToActView @JvmOverloads constructor (
         // Text horizontal/vertical positioning (both centered)
         mTextXPosition = mAreaWidth.toFloat() / 2
         mTextYPosition = (mAreaHeight.toFloat() / 2) - (mTextPaint.descent() + mTextPaint.ascent()) / 2
+
+        // Make sure the position is recomputed.
+        mPosition = 0
     }
 
     override fun onDraw(canvas: Canvas?) {
@@ -365,15 +386,20 @@ class SlideToActView @JvmOverloads constructor (
         // Inner Cursor
         // ratio is used to compute the proper border radius for the inner rect (see #8).
         val ratio = (mAreaHeight - 2 * mActualAreaMargin).toFloat() / mAreaHeight.toFloat()
-        mInnerRect.set((mActualAreaMargin + mPosition).toFloat(),
+        mInnerRect.set((mActualAreaMargin + mEffectivePosition).toFloat(),
                 mActualAreaMargin.toFloat(),
-                (mAreaHeight + mPosition).toFloat() - mActualAreaMargin.toFloat(),
+                (mAreaHeight + mEffectivePosition).toFloat() - mActualAreaMargin.toFloat(),
                 mAreaHeight.toFloat() - mActualAreaMargin.toFloat())
         canvas.drawRoundRect(mInnerRect, mBorderRadius.toFloat() * ratio, mBorderRadius.toFloat() * ratio, mInnerPaint)
 
         // Arrow angle
+        // We compute the rotation of the arrow and we apply .rotate transformation on the canvas.
+        canvas.save()
+        if (isReversed) {
+            canvas.rotate(180f, mInnerRect.centerX(), mInnerRect.centerY())
+        }
         if (isRotateIcon) {
-            mArrowAngle = -180 * mPositionPerc
+            mArrowAngle = 180 * mPositionPerc * (if (isReversed) 1 else -1)
             canvas.rotate(mArrowAngle, mInnerRect.centerX(), mInnerRect.centerY())
         }
         mDrawableArrow.setBounds(mInnerRect.left.toInt() + mArrowMargin,
@@ -384,10 +410,7 @@ class SlideToActView @JvmOverloads constructor (
             mDrawableArrow.bounds.top <= mDrawableArrow.bounds.bottom) {
             mDrawableArrow.draw(canvas)
         }
-
-        if (isRotateIcon) {
-            canvas.rotate(-1 * mArrowAngle, mInnerRect.centerX(), mInnerRect.centerY())
-        }
+        canvas.restore()
 
         // Tick drawing
         mDrawableTick.setBounds(
@@ -402,7 +425,6 @@ class SlideToActView @JvmOverloads constructor (
         } else {
             (mDrawableTick as AnimatedVectorDrawableCompat).setTint(innerColor)
         }
-
         if (mFlagDrawTick) {
             mDrawableTick.draw(canvas)
         }
@@ -475,17 +497,19 @@ class SlideToActView @JvmOverloads constructor (
      * @return A boolean that informs if user has pressed or not
      */
     private fun checkInsideButton(x: Float, y: Float): Boolean {
-        return (0 < y && y < mAreaHeight && mPosition < x && x < (mAreaHeight + mPosition))
+        return (0 < y && y < mAreaHeight && mEffectivePosition < x && x < (mAreaHeight + mEffectivePosition))
     }
 
     /**
      * Private method for increasing/decreasing the position
-     * Ensure that position never exits from its range [0, (mAreaWidth - mAreaHeight)]
+     * Ensure that position never exits from its range [0, (mAreaWidth - mAreaHeight)].
+     *
+     * Please note that the increment is inverted in case of a reversed slider.
      *
      * @param inc Increment to be performed (negative if it's a decrement)
      */
     private fun increasePosition(inc: Int) {
-        mPosition += inc
+        mPosition = if (isReversed) mPosition - inc else mPosition + inc
         if (mPosition < 0)
             mPosition = 0
         if (mPosition > (mAreaWidth - mAreaHeight))

diff --git a/slidetoact/src/main/res/values/attrs.xml b/slidetoact/src/main/res/values/attrs.xml
@@ -15,6 +15,7 @@
         <attr name="border_radius" format="dimension" />
         <attr name="slider_height" format="dimension" />
         <attr name="slider_locked" format="boolean" />
+        <attr name="slider_reversed" format="boolean" />
         <attr name="slider_icon" format="reference" />
         <attr name="slider_icon_color" format="color"/>
         <attr name="rotate_icon" format="boolean" />