Skip to content

Commit

Permalink
added rainbow() view extension & released 1.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
skydoves committed Aug 24, 2019
1 parent 474786e commit 4f4c193
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 38 deletions.
43 changes: 26 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
Add a dependency code to your **module**'s `build.gradle` file.
```gradle
dependencies {
implementation "com.github.skydoves:rainbow:1.0.0"
implementation "com.github.skydoves:rainbow:1.0.1"
}
```

Expand All @@ -42,40 +42,48 @@ Rainbow(myCardView).palette { // constructs a palette for collecting colors.
+contextColor(R.color.green_200)
+contextColor(R.color.blue_200)
+color(Color.WHITE) // getting a color
}.withAlpha(225) // sets alpha
}.withAlpha(225) // sets alpha (0~255)
.foreground() // applies gradations to myCardView
```

Here is a kotlin-extesion way to apply gradations using `View.rainbow()` method to views.

```kotlin
myLinearLayout.rainbow().palette {
+contextColor(R.color.skyBlue)
+contextColor(R.color.colorPrimary)
}.background(orientation = RainbowOrientation.TOP_BOTTOM, radius = 8)
```

<img src="https://user-images.githubusercontent.com/24237865/63633706-6c37ed80-c687-11e9-9316-b29530c7f1a8.jpg" align="right" width="32%"/>

### Background, Foreground
We can apply gradations composed with palette colors to the background or foreground.<br>
The `forground()` would be used for your `CardView` or something others.
We can apply gradations composed with palette colors to the view's background or foreground.<br>
The `forground()` method can be applied to your `CardView` or something others.

```kotlin
Rainbow(myCardView).palette { // constructs a palette for collecting colors.
+contextColor(R.color.red_200) // getting a color from the resource
Rainbow(myCardView).palette {
+contextColor(R.color.red_200)
+contextColor(R.color.yellow_200)
}.background() or .foreground()
```

And we can control the gradation orientation and corner radius. <br>
We can change eight kinds of orientation using `RainbowOrientation`.
And we can control the gradient orientation and corner radius. <br>
We can use 8 kinds of orientation which `RainbowOrientation`.
```kotlin
background(orientation = RainbowOrientation.RIGHT_LEFT, radius = 8)
background(orientation = RainbowOrientation.TOP_BOTTOM, radius = 8)
foreground(orientation = RainbowOrientation.DIAGONAL_TOP_LEFT, radius = 8)
foreground(RainbowOrientation.DIAGONAL_BOTTOM_RIGHT, radius = 8)
foreground(RainbowOrientation.DIAGONAL_TOP_LEFT, 8)
foreground(RainbowOrientation.DIAGONAL_BOTTOM_RIGHT, 8)
```

### Tinting
We can change tint colors to some kinds of views which can be tint.<br>
Here are views can be tint: TextView(drawable), ImageView, [CompoundButton](https://www.google.com/search?q=CompoundButton&oq=compo&aqs=chrome.0.69i59l2j69i57j69i60l2j69i61.4868j0j4&sourceid=chrome&ie=UTF-8), [TintableBackgroundView](https://developer.android.com/reference/androidx/core/view/TintableBackgroundView).
We can change some kinds of view's tint colors which can be applied tint.<br>
Here are views can be applied tint: TextView(drawable), ImageView, [CompoundButton](https://www.google.com/search?q=CompoundButton&oq=compo&aqs=chrome.0.69i59l2j69i57j69i60l2j69i61.4868j0j4&sourceid=chrome&ie=UTF-8), [TintableBackgroundView](https://developer.android.com/reference/androidx/core/view/TintableBackgroundView).

```kotlin
Rainbow(myCheckBox).palette {
+contextColor(R.color.red_200)
+contextColor(R.color.yellow_200)
}.tint()
```

Expand All @@ -90,7 +98,7 @@ val drawable = Rainbow(myCheckBox).palette {
```

### RainbowView
RainbowView is a gradient view for implementing a gradations. <br><br>
RainbowView is a gradient view for implementing gradations. <br><br>
Add following XML namespace inside your XML layout file.

```gradle
Expand Down Expand Up @@ -128,7 +136,7 @@ Tha `rainbowView_colors` attributes gets color list from the color-array from yo
```

### BinaryRainbowView
BinaryRainbowView is a gradient view for implementing a simple gradation effect. <br>
BinaryRainbowView is a gradient view for implementing a simple view with gradations.

```gradle
<com.skydoves.rainbow.BinaryRainbowView
Expand All @@ -143,7 +151,7 @@ BinaryRainbowView is a gradient view for implementing a simple gradation effect.
```

### Shuffle
`RainbowView` and `BinaryRainbowView` provides shuffling the palette colors using `shuffleColors()` method.
`RainbowView` and `BinaryRainbowView` provides shuffling the palette colors using `shuffleColors()` method. The gradation colors placement will be changed randomly.
```kotlin
rainbow.shuffleColors()
```
Expand All @@ -152,11 +160,12 @@ rainbow.shuffleColors()
Here are some usages for Java developers.

```java
new Rainbow(view)
new Rainbow(myView)
.addContextColor(R.color.red_100)
.addContextColor(R.color.orange_100)
.addContextColor(R.color.yellow_100)
.addContextColor(R.color.green_100)
.withAlpha(255)
.background(RainbowOrientation.RIGHT_LEFT, 8);
```

Expand Down
6 changes: 6 additions & 0 deletions app/src/main/java/com/skydoves/rainbowdemo/MainActivity.kt
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import com.skydoves.rainbow.Rainbow
import com.skydoves.rainbow.RainbowOrientation
import com.skydoves.rainbow.color
import com.skydoves.rainbow.contextColor
import com.skydoves.rainbow.rainbow
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
Expand All @@ -31,6 +32,11 @@ class MainActivity : AppCompatActivity() {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

cardView0.rainbow().palette {
+contextColor(R.color.skyBlue)
+contextColor(R.color.colorPrimary)
}.background(orientation = RainbowOrientation.TOP_BOTTOM, radius = 8)

Rainbow(cardView0).palette {
+contextColor(R.color.skyBlue)
+contextColor(R.color.colorPrimary)
Expand Down
4 changes: 2 additions & 2 deletions dependencies.gradle
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
ext.versions = [
minSdk : 16,
compileSdk : 29,
versionCode : 1,
versionName : '1.0.0',
versionCode : 2,
versionName : '1.0.1',

gradleBuildTool : '3.4.2',
spotlessGradle : '3.23.1',
Expand Down
30 changes: 16 additions & 14 deletions rainbow/src/main/java/com/skydoves/rainbow/Rainbow.kt
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,20 @@ import androidx.core.widget.CompoundButtonCompat
import androidx.core.widget.ImageViewCompat
import androidx.core.widget.TextViewCompat

/** An easy way to give gradation effect and tinting. */
@DslMarker
annotation class RainbowDsl

/** creates an instance of [Rainbow] by a view. */
fun View.rainbow(): Rainbow = Rainbow(this)

/** An easy way to apply gradations and tinting for Android. */
class Rainbow(val view: View) {

private val rainbowColorList = mutableListOf<ContextColor>()
private var alpha = 255

/** constructs a palette for collecting colors. */
@RainbowDsl
fun palette(block: Rainbow.() -> Unit): Rainbow {
val rainbow = Rainbow(view)
rainbow.block()
Expand Down Expand Up @@ -127,7 +134,10 @@ class Rainbow(val view: View) {
}

/** gets the gradation drawable which composed with palette colors. */
fun getDrawable(orientation: RainbowOrientation = RainbowOrientation.LEFT_RIGHT, radius: Int = 0): GradientDrawable {
fun getDrawable(
orientation: RainbowOrientation = RainbowOrientation.LEFT_RIGHT,
radius: Int = 0
): GradientDrawable {
return getGradientDrawable(orientation, radius)
}

Expand All @@ -138,9 +148,7 @@ class Rainbow(val view: View) {
return gradient
}

private fun emptyColors(): Boolean {
return rainbowColorList.isEmpty()
}
private fun emptyColors(): Boolean = rainbowColorList.isEmpty()

private fun getColorStateList(): ColorStateList {
val states = mutableListOf<Int>()
Expand All @@ -150,15 +158,9 @@ class Rainbow(val view: View) {
return ColorStateList(arrayOf(states.toIntArray()), rainbowColorList.toIntArray()).withAlpha(alpha)
}

operator fun ContextColor.unaryPlus() {
rainbowColorList.add(this)
}
operator fun ContextColor.unaryPlus() = rainbowColorList.add(this)

operator fun List<Int>.unaryPlus() {
rainbowColorList.addAll(this.toContextColorList())
}
operator fun List<Int>.unaryPlus() = rainbowColorList.addAll(this.toContextColorList())

operator fun IntArray.unaryPlus() {
rainbowColorList.addAll(this.toContextColorList())
}
operator fun IntArray.unaryPlus() = rainbowColorList.addAll(this.toContextColorList())
}
9 changes: 4 additions & 5 deletions rainbow/src/main/java/com/skydoves/rainbow/ViewExtension.kt
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,10 @@ internal const val outRangeColor = 65555

/** dp size to px size. */
internal fun View.dp2Px(dp: Int): Float {
val scale = resources.displayMetrics.density
return dp * scale
val scale = resources.displayMetrics.density
return dp * scale
}

/** px size to dp size. */
internal fun View.px2Dp(px: Float): Float {
return px / (context.resources.displayMetrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT)
}
internal fun View.px2Dp(px: Float): Float =
px / (context.resources.displayMetrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT)

0 comments on commit 4f4c193

Please sign in to comment.