Merge pull request #28 from icechen1/master

Use rectangle shapes for highlight areas + other changes

Author: iammert

README.md

@@ -17,6 +17,7 @@ new MaterialIntroView.Builder(this)
                 .enableFadeAnimation(true)
                 .performClick(true)
                 .setInfoText("Hi There! Click this card and see what happens.")
+                .setShapeType(ShapeType.CIRCLE)
                 .setTarget(view)
                 .setUsageId("intro_card") //THIS SHOULD BE UNIQUE ID
                 .show();
@@ -79,6 +80,18 @@ dependencies {
 .setInfoTextSize(30) //Change text size
 ```
 ```java
+.setShapeType(ShapeType.CIRCLE) //Change shape of focus area
+.setShapeType(ShapeType.RECTANGLE) //Change shape of focus area
+```
+```java
+.setCustomShape(Shape shape) //Use custom shape
+```
+```java
+// Allow this showcase overlay to only show up once. Prevents multiple screens from showing at the same time.
+// Useful if you wish to show a tour step in a code that gets called multiple times
+.setIdempotent(true)
+```
+```java
 .setUsageId("intro_fab_button") //Store intro view status whether it is learnt or not
 ```
 ```java
@@ -112,12 +125,25 @@ config.setFadeAnimationEnabled(true);
 .setConfiguration(config) //
 ```
 
-# Demos
+# Use Custom Shapes
+You can use your own highlight shapes if Circle and Rectangle do not work for you. See source for `Circle` and `Rect` for implementation example.
+```java
+public class MyShape extends Shape {
+    // ... your implementation
+}
 
-<img src="https://raw.githubusercontent.com/iammert/MaterialIntroView/master/art/art_drawer.png"/> <img src="https://raw.githubusercontent.com/iammert/MaterialIntroView/master/art/art_focus_all.png"/>
+//... in your app code
 
-<img src="https://raw.githubusercontent.com/iammert/MaterialIntroView/master/art/art_focus_normal.png"/> <img src="https://raw.githubusercontent.com/iammert/MaterialIntroView/master/art/art_gravity_left.png"/>
+.setCustomShape(MyShape shape)
 
+```
+
+# Demos
+![Alt text](/art/art_drawer.png?raw=true)
+![Alt text](/art/art_focus_all.png?raw=true)
+![Alt text](/art/art_focus_normal.png?raw=true)
+![Alt text](/art/art_gravity_left.png?raw=true)
+![Alt text](/art/art_rectangle.png?raw=true)
 # TODO
 
 * [ ] Sample app will be more detailed about using library.

art/art_rectangle.png

@@ -4,62 +4,31 @@
 import android.graphics.Paint;
 import android.graphics.Point;
 
-import co.mobiwise.materialintro.utils.Constants;
 import co.mobiwise.materialintro.target.Target;
 
 /**
  * Created by mertsimsek on 25/01/16.
  */
-public class Circle {
-
-    private Target target;
-
-    private Focus focus;
-
-    private FocusGravity focusGravity;
+public class Circle extends Shape {
 
     private int radius;
 
     private Point circlePoint;
 
-    private int padding;
-
-    public Circle(Target target) {
-        this(target, Focus.MINIMUM);
-    }
-
-    public Circle(Target target,Focus focus) {
-        this(target, focus, FocusGravity.CENTER, Constants.DEFAULT_TARGET_PADDING);
-    }
-
     public Circle(Target target, Focus focus, FocusGravity focusGravity, int padding) {
-        this.target = target;
-        this.focus = focus;
-        this.focusGravity = focusGravity;
-        this.padding = padding;
+        super(target, focus, focusGravity, padding);
         circlePoint = getFocusPoint();
         calculateRadius(padding);
     }
 
+    @Override
     public void draw(Canvas canvas, Paint eraser, int padding){
         calculateRadius(padding);
         circlePoint = getFocusPoint();
         canvas.drawCircle(circlePoint.x, circlePoint.y, radius, eraser);
     }
 
-    private Point getFocusPoint(){
-        if(focusGravity == FocusGravity.LEFT){
-            int xLeft = target.getRect().left + (target.getPoint().x - target.getRect().left) / 2;
-            return new Point(xLeft, target.getPoint().y);
-        }
-        else if(focusGravity == FocusGravity.RIGHT){
-            int xRight = target.getPoint().x + (target.getRect().right - target.getPoint().x) / 2;
-            return new Point(xRight, target.getPoint().y);
-        }
-        else
-            return target.getPoint();
-    }
-
+    @Override
     public void reCalculateAll(){
         calculateRadius(padding);
         circlePoint = getFocusPoint();
@@ -81,12 +50,28 @@ else if(focus == Focus.ALL)
         radius = side + padding;
     }
 
-    public int getRadius(){
+    private int getRadius(){
         return radius;
     }
 
+    @Override
     public Point getPoint(){
         return circlePoint;
     }
 
+    @Override
+    public int getHeight() {
+        return 2 * getRadius();
+    }
+
+    @Override
+    public boolean isTouchOnFocus(double x, double y) {
+        int xV = getPoint().x;
+        int yV = getPoint().y;
+
+        double dx = Math.pow(x - xV, 2);
+        double dy = Math.pow(y - yV, 2);
+        return (dx + dy) <= Math.pow(radius, 2);
+    }
+
 }

materialintro/src/main/java/co/mobiwise/materialintro/shape/Circle.java

@@ -0,0 +1,69 @@
+package co.mobiwise.materialintro.shape;
+
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.Point;
+import android.graphics.RectF;
+
+import co.mobiwise.materialintro.target.Target;
+
+/**
+ * Created by mertsimsek on 25/01/16.
+ */
+public class Rect extends Shape {
+
+    RectF adjustedRect;
+
+    public Rect(Target target) {
+        super(target);
+        calculateAdjustedRect();
+    }
+
+    public Rect(Target target, Focus focus) {
+        super(target, focus);
+        calculateAdjustedRect();
+    }
+
+    public Rect(Target target, Focus focus, FocusGravity focusGravity, int padding) {
+        super(target, focus, focusGravity, padding);
+        calculateAdjustedRect();
+    }
+
+    @Override
+    public void draw(Canvas canvas, Paint eraser, int padding) {
+        canvas.drawRoundRect(adjustedRect, padding, padding, eraser);
+    }
+
+    private void calculateAdjustedRect() {
+        RectF rect = new RectF();
+        rect.set(target.getRect());
+
+        rect.left -= padding;
+        rect.top -= padding;
+        rect.right += padding;
+        rect.bottom += padding;
+
+        adjustedRect = rect;
+    }
+
+    @Override
+    public void reCalculateAll(){
+        calculateAdjustedRect();
+    }
+
+    @Override
+    public Point getPoint(){
+        return target.getPoint();
+    }
+
+    @Override
+    public int getHeight() {
+        return (int) adjustedRect.height();
+    }
+
+    @Override
+    public boolean isTouchOnFocus(double x, double y) {
+        return adjustedRect.contains((float) x, (float) y);
+    }
+
+}

materialintro/src/main/java/co/mobiwise/materialintro/shape/Rect.java

@@ -0,0 +1,66 @@
+package co.mobiwise.materialintro.shape;
+
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.Point;
+
+import co.mobiwise.materialintro.target.Target;
+import co.mobiwise.materialintro.utils.Constants;
+
+/**
+ * Created by yuchen on 3/17/16.
+ */
+public abstract class Shape {
+
+    protected Target target;
+
+    protected Focus focus;
+
+    protected FocusGravity focusGravity;
+
+    protected int padding;
+
+    public Shape(Target target) {
+        this(target, Focus.MINIMUM);
+    }
+
+    public Shape(Target target,Focus focus) {
+        this(target, focus, FocusGravity.CENTER, Constants.DEFAULT_TARGET_PADDING);
+    }
+
+    public Shape(Target target, Focus focus, FocusGravity focusGravity, int padding) {
+        this.target = target;
+        this.focus = focus;
+        this.focusGravity = focusGravity;
+        this.padding = padding;
+    }
+
+    public abstract void draw(Canvas canvas, Paint eraser, int padding);
+
+    protected Point getFocusPoint(){
+        if(focusGravity == FocusGravity.LEFT){
+            int xLeft = target.getRect().left + (target.getPoint().x - target.getRect().left) / 2;
+            return new Point(xLeft, target.getPoint().y);
+        }
+        else if(focusGravity == FocusGravity.RIGHT){
+            int xRight = target.getPoint().x + (target.getRect().right - target.getPoint().x) / 2;
+            return new Point(xRight, target.getPoint().y);
+        }
+        else
+            return target.getPoint();
+    }
+
+    public abstract void reCalculateAll();
+
+    public abstract Point getPoint();
+
+    public abstract int getHeight();
+
+    /**
+     * Determines if a click is on the shape
+     * @param x x-axis location of click
+     * @param y y-axis location of click
+     * @return true if click is inside shape
+     */
+    public abstract boolean isTouchOnFocus(double x, double t);
+}

materialintro/src/main/java/co/mobiwise/materialintro/shape/Shape.java

@@ -0,0 +1,11 @@
+package co.mobiwise.materialintro.shape;
+
+/**
+ * Created by yuchen on 3/17/16.
+ */
+public enum ShapeType {
+    /**
+     * Allows the target area to be highlighted by either a circle or rectangle
+     */
+    CIRCLE, RECTANGLE
+}