Skip to content

Commit

Permalink
Merge pull request #12 from Trendyol/multiple_focusing
Browse files Browse the repository at this point in the history 
Multiple Focusing
  • Loading branch information
@bsobe
bsobe authored Nov 4, 2020
2 parents be54243 + 203158b commit b59cff3
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 82 deletions.
7 changes: 4 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

# Showcase
<img src="https://raw.githubusercontent.com/Trendyol/showcase/master/screenshots/1.png" width="170"/> <img src="https://raw.githubusercontent.com/Trendyol/showcase/master/screenshots/2.png" width="170"/> <img src="https://raw.githubusercontent.com/Trendyol/showcase/master/screenshots/3.png" width="170"/> <img src="https://raw.githubusercontent.com/Trendyol/showcase/master/screenshots/4.png" width="170"/>
<img src="https://raw.githubusercontent.com/Trendyol/showcase/master/screenshots/1.png" width="170"/> <img src="https://raw.githubusercontent.com/Trendyol/showcase/master/screenshots/2.png" width="170"/> <img src="https://raw.githubusercontent.com/Trendyol/showcase/master/screenshots/3.png" width="170"/> <img src="https://raw.githubusercontent.com/Trendyol/showcase/master/screenshots/4.png" width="170"/> <img src="https://raw.githubusercontent.com/Trendyol/showcase/master/screenshots/5.png" width="170"/>

With **Showcase**, you can easily show tooltips. **Showcase** will highlight the view and show tooltip on it. You can customize title and description text fields, backgrounds and arrow positions. Also you can have callback when user quits from **Showcase**.

Expand All @@ -25,7 +25,7 @@ dependencies {
You can easily use ShowcaseManager.Builder to create **Showcase**.
```
val showcaseManager = ShowcaseManager.Builder()
.view(myView)
.focus(myView)
.titleText("Title about myView")
.descriptionText("Little bit info for my lovely myView")
.titleTextSize(22F)
Expand All @@ -42,7 +42,8 @@ showcaseManager.show(context)
# Builder Configuration
| Usage | Description | Optional | Default Value | StyleRes |
| ------------- |-------------| ------------- |------------- |------------- |
| `builder.view(View)` | view to be focused on | no | null | no |
| `builder.focus(View)` | view to be focused on | no | null | no |
| `builder.focus(Array<View>)` | view array to be focused on | no | null | no |
| `builder.resId(Int)` | Showcase.Theme style | yes | null | yes |
| `builder.titleText(String)` | text to be showed on top of the tooltip | yes | "" | no |
| `builder.descriptionText(String)` | description text will be displayed on tooltip | yes | "" | no |
Expand Down
64 changes: 35 additions & 29 deletions library/src/main/java/com/trendyol/showcase/showcase/ShowcaseManager.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ data class ShowcaseManager private constructor(

class Builder {

private var focusView: View? = null
private var focusViews: Array<out View>? = null
private var titleText: String = Constants.DEFAULT_TEXT
private var descriptionText: String = Constants.DEFAULT_TEXT

Expand Down Expand Up @@ -109,7 +109,9 @@ data class ShowcaseManager private constructor(
private var textPosition: TextPosition = Constants.DEFAULT_TEXT_POSITION
private var imageUrl: String = Constants.DEFAULT_TEXT

fun view(view: View) = apply { focusView = view }
fun focus(view: View) = apply { focusViews = arrayOf(view) }

fun focus(vararg view: View) = apply { focusViews = view }

fun titleText(title: String) = apply { titleText = title }

Expand Down Expand Up @@ -181,44 +183,48 @@ data class ShowcaseManager private constructor(
fun imageUrl(url: String) = apply { imageUrl = url }

fun build(): ShowcaseManager {
if (focusView == null) {
if (focusViews.isNullOrEmpty()) {
throw Exception("view should not be null!")
}

val rect = Rect()

focusView?.getGlobalVisibleRect(rect)
focusViews!!.forEach {
val viewRect = Rect()
it.getGlobalVisibleRect(viewRect)
rect.union(viewRect)
}

val showcaseModel = ShowcaseModel(
rect.toRectF(),
TooltipFieldUtil.calculateRadius(focusView!!),
titleText,
descriptionText,
titleTextColor,
descriptionTextColor,
popupBackgroundColor,
closeButtonColor,
showCloseButton,
highlightType,
arrowResource,
arrowPosition,
arrowPercentage,
windowBackgroundColor,
windowBackgroundAlpha,
titleTextSize,
descriptionTextSize,
highlightPadding,
cancellableFromOutsideTouch,
isDebugMode,
textPosition,
imageUrl)

return ShowcaseManager(showcaseModel, resId)
rectF = rect.toRectF(),
radius = TooltipFieldUtil.calculateRadius(rect),
titleText = titleText,
descriptionText = descriptionText,
titleTextColor = titleTextColor,
descriptionTextColor = descriptionTextColor,
popupBackgroundColor = popupBackgroundColor,
closeButtonColor = closeButtonColor,
showCloseButton = showCloseButton,
highlightType = highlightType,
arrowResource = arrowResource,
arrowPosition = arrowPosition,
arrowPercentage = arrowPercentage,
windowBackgroundColor = windowBackgroundColor,
windowBackgroundAlpha = windowBackgroundAlpha,
titleTextSize = titleTextSize,
descriptionTextSize = descriptionTextSize,
highlightPadding = highlightPadding,
cancellableFromOutsideTouch = cancellableFromOutsideTouch,
isDebugMode = isDebugMode,
textPosition = textPosition,
imageUrl = imageUrl
)

return ShowcaseManager(showcaseModel = showcaseModel, resId = resId)
}
}

companion object {

const val HIGHLIGHT_CLICKED = "highlight_clicked"
}
}
8 changes: 4 additions & 4 deletions library/src/main/java/com/trendyol/showcase/util/TooltipFieldUtil.kt
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
package com.trendyol.showcase.util

import android.content.res.Resources
import android.view.View
import android.graphics.Rect
import com.trendyol.showcase.ui.tooltip.ArrowPosition
import kotlin.math.pow
import kotlin.math.sqrt
Expand All @@ -14,9 +14,9 @@ object TooltipFieldUtil {
return if (screenHeight / 2 > verticalCenter) ArrowPosition.UP else ArrowPosition.DOWN
}

fun calculateRadius(view: View): Float {
val x = view.width.toDouble() / 2
val y = view.height.toDouble() / 2
fun calculateRadius(rect: Rect): Float {
val x = rect.width().toDouble() / 2
val y = rect.height().toDouble() / 2

return sqrt(x.pow(2) + y.pow(2)).toFloat()
}
Expand Down
98 changes: 59 additions & 39 deletions sample/src/main/java/com/trendyol/sample/MainActivity.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,64 +22,84 @@ protected void onCreate(Bundle savedInstanceState) {
final Button buttonTop = findViewById(R.id.button_top);
final Button buttonCenter = findViewById(R.id.button_center);
final Button buttonBottom = findViewById(R.id.button_bottom);
final Button buttonMultipleView = findViewById(R.id.button_focus_multiple_view);
final View textView = findViewById(R.id.textView);
final View imageView = findViewById(R.id.imageView);

buttonTop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
new ShowcaseManager.Builder()
.view(buttonTop)
.titleText("Title For Top!")
.descriptionText("Simple, short description for top tooltip.")
.titleTextColor(ContextCompat.getColor(getBaseContext(), R.color.colorAccent))
.descriptionTextColor(ContextCompat.getColor(getBaseContext(), R.color.colorPrimary))
.backgroundColor(ContextCompat.getColor(getBaseContext(), R.color.colorPrimaryDark))
.imageUrl("https://cdn.dsmcdn.com/Assets/t/y/creative/mobile/InstantDelivery/instant-ty-onboarding.png")
.showCloseButton(true)
.arrowPosition(ArrowPosition.AUTO)
.highlightType(HighlightType.RECTANGLE)
.textPosition(TextPosition.START)
.windowBackgroundAlpha(255)
.titleTextSize(30F)
.build()
.show(MainActivity.this, 0);
.focus(buttonTop)
.titleText("Title For Top!")
.descriptionText("Simple, short description for top tooltip.")
.titleTextColor(ContextCompat.getColor(getBaseContext(), R.color.colorAccent))
.descriptionTextColor(ContextCompat.getColor(getBaseContext(), R.color.colorPrimary))
.backgroundColor(ContextCompat.getColor(getBaseContext(), R.color.colorPrimaryDark))
.imageUrl("https://cdn.dsmcdn.com/Assets/t/y/creative/mobile/InstantDelivery/instant-ty-onboarding.png")
.showCloseButton(true)
.arrowPosition(ArrowPosition.AUTO)
.highlightType(HighlightType.RECTANGLE)
.textPosition(TextPosition.START)
.windowBackgroundAlpha(255)
.titleTextSize(30F)
.build()
.show(MainActivity.this, 0);
}
});

buttonCenter.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new ShowcaseManager.Builder()
.view(buttonCenter)
.titleText("Title For Center!")
.descriptionText("Center is here.")
.titleTextColor(ContextCompat.getColor(getBaseContext(), R.color.white))
.backgroundColor(ContextCompat.getColor(getBaseContext(), R.color.colorPrimaryDark))
.closeButtonColor(ContextCompat.getColor(getBaseContext(), R.color.white))
.showCloseButton(true)
.arrowPosition(ArrowPosition.DOWN)
.highlightType(HighlightType.CIRCLE)
.arrowPercentage(100)
.textPosition(TextPosition.CENTER)
.build()
.show(MainActivity.this, 0);
.focus(buttonCenter)
.titleText("Title For Center!")
.descriptionText("Center is here.")
.titleTextColor(ContextCompat.getColor(getBaseContext(), R.color.white))
.backgroundColor(ContextCompat.getColor(getBaseContext(), R.color.colorPrimaryDark))
.closeButtonColor(ContextCompat.getColor(getBaseContext(), R.color.white))
.showCloseButton(true)
.arrowPosition(ArrowPosition.DOWN)
.highlightType(HighlightType.CIRCLE)
.arrowPercentage(100)
.textPosition(TextPosition.CENTER)
.build()
.show(MainActivity.this, 0);
}
});

buttonBottom.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new ShowcaseManager.Builder()
.view(buttonBottom)
.titleText("Title without a description")
.titleTextSize(16)
.showCloseButton(true)
.arrowResource(R.drawable.ic_custom_arrow_down)
.arrowPosition(ArrowPosition.AUTO)
.highlightType(HighlightType.RECTANGLE)
.highlightPadding(8F)
.textPosition(TextPosition.START)
.build()
.show(MainActivity.this, 0);
.focus(buttonBottom)
.titleText("Title without a description")
.titleTextSize(16)
.showCloseButton(true)
.arrowResource(R.drawable.ic_custom_arrow_down)
.arrowPosition(ArrowPosition.AUTO)
.highlightType(HighlightType.RECTANGLE)
.highlightPadding(8F)
.textPosition(TextPosition.START)
.build()
.show(MainActivity.this, 0);
}
});

buttonMultipleView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new ShowcaseManager.Builder()
.focus(textView, imageView)
.titleText("Multiple View Focus")
.titleTextSize(16)
.showCloseButton(true)
.arrowPosition(ArrowPosition.UP)
.highlightType(HighlightType.RECTANGLE)
.highlightPadding(8F)
.textPosition(TextPosition.START)
.build()
.show(MainActivity.this, 0);
}
});
}
Expand Down
51 changes: 44 additions & 7 deletions sample/src/main/res/layout/activity_main.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,64 @@
android:id="@+id/button_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Top"
android:text="Showcase - Rectangle 1"
app:layout_constraintBottom_toTopOf="@id/button_center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside" />

<Button
android:id="@+id/button_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
android:text="Showcase - Circle"
app:layout_constraintBottom_toTopOf="@id/button_focus_multiple_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="Button Center" />
app:layout_constraintTop_toBottomOf="@id/button_top" />

<Button
android:id="@+id/button_focus_multiple_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Showcase - MultipleView"
app:layout_constraintBottom_toTopOf="@id/button_bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/button_center" />

<Button
android:id="@+id/button_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Bottom"
android:text="Showcase - Rectangle 2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/button_focus_multiple_view" />

<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:src="@android:drawable/ic_media_play"
app:layout_constraintEnd_toStartOf="@id/textView"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/button_focus_multiple_view"
app:tint="@color/colorPrimaryDark" />

<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textColor="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="@id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/imageView"
app:layout_constraintTop_toTopOf="@id/imageView" />

</androidx.constraintlayout.widget.ConstraintLayout>
Binary file added screenshots/5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b59cff3

Please sign in to comment.