Skip to content

Commit ff6db85

Browse files
emmaatkinsemmaatkins
authored
HMA-6411 Donut Stripes + Animation + Editable List View Padding (#93)
* HMA-6411 donut stripes animation and editable list view padding * HMA-6411 animation changes to donut and padding changes to ELV * HMA-6411 requested changes * HMA-6411 divider margins * HMA-6411 column spacing * HMA-6411 screenshots * HMA-6411 colours change * HMA-6411 screenshots * HMA-6411 minimum no stripe + dark color changes * HMA-6411 screenshots * HMA-6411 logic bug fix * HMA-6411 screenshot * HMA-6411 changelog
1 parent 7742cd1 commit ff6db85

17 files changed

+112
-23
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ Allowed headings:
1818

1919
### Additions
2020

21-
* `DonutChartView` now supports three segments.
21+
* `DonutChartView` now supports three segments and stripes.
22+
* Added new `EditableListView` component.
2223

2324
### Changed
2425

‎components/src/main/java/uk/gov/hmrc/components/molecule/donut/DonutChartView.kt‎

Lines changed: 87 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@ package uk.gov.hmrc.components.molecule.donut
1717

1818
import android.content.Context
1919
import android.graphics.Canvas
20+
import android.graphics.DashPathEffect
2021
import android.graphics.Paint
2122
import android.graphics.RectF
2223
import android.provider.Settings
2324
import android.util.AttributeSet
2425
import android.view.View
2526
import android.view.animation.Animation
27+
import android.view.animation.DecelerateInterpolator
2628
import android.view.animation.Transformation
2729
import androidx.core.content.ContextCompat
2830
import uk.gov.hmrc.components.R
@@ -38,12 +40,16 @@ class DonutChartView @JvmOverloads constructor(
3840
private val color2: Int
3941
private val color3: Int
4042

41-
private val color1Paint: Paint
42-
private val color2Paint: Paint
43-
private val color3Paint: Paint
43+
private val stripes1: Boolean
44+
private val stripes2: Boolean
45+
private val stripes3: Boolean
46+
47+
private lateinit var color1Paint: Paint
48+
private lateinit var color2Paint: Paint
49+
private lateinit var color3Paint: Paint
4450

4551
private val donutWidth = context.resources.getDimension(R.dimen.donut_width)
46-
private var rect: RectF? = null
52+
private lateinit var rect: RectF
4753
private val startAngle: Float = LEFT_OF_CIRCLE
4854
private var value1SweepAngle: Float = 0f
4955
private var value2SweepAngle: Float = 0f
@@ -64,13 +70,29 @@ class DonutChartView @JvmOverloads constructor(
6470
R.styleable.DonutChartView_color3,
6571
ContextCompat.getColor(context, R.color.hmrc_donut_chart_color_3)
6672
)
73+
stripes1 = getBoolean(
74+
R.styleable.DonutChartView_stripes1,
75+
false
76+
)
77+
stripes2 = getBoolean(
78+
R.styleable.DonutChartView_stripes2,
79+
false
80+
)
81+
stripes3 = getBoolean(
82+
R.styleable.DonutChartView_stripes3,
83+
true
84+
)
6785
} finally {
6886
recycle()
6987
}
88+
}
89+
}
7090

71-
color1Paint = donutPaintWithColour(color1)
72-
color2Paint = donutPaintWithColour(color2)
73-
color3Paint = donutPaintWithColour(color3)
91+
private fun stripesOrPlain(stripes: Boolean, color: Int): Paint {
92+
return if (stripes) {
93+
donutPaintWithStripes(color)
94+
} else {
95+
donutPaintWithColour(color)
7496
}
7597
}
7698

@@ -80,6 +102,27 @@ class DonutChartView @JvmOverloads constructor(
80102
color = paintColor
81103
}
82104

105+
private fun donutPaintWithStripes(paintColor1: Int): Paint {
106+
val width = rect.width()
107+
val height = rect.height()
108+
val diameter = min(width, height)
109+
val radius = diameter / 2F
110+
111+
val circumference: Float = (2F * Math.PI * radius).toFloat()
112+
val dashPlusGapSize = (circumference / TOTAL_NUM_OF_DASHES)
113+
val intervals = floatArrayOf(dashPlusGapSize * INTERVAL_GAP, dashPlusGapSize * INTERVAL_GAP)
114+
115+
val path = DashPathEffect(intervals, 0F)
116+
117+
val paint2 = Paint(Paint.ANTI_ALIAS_FLAG).apply {
118+
style = Paint.Style.STROKE
119+
strokeWidth = donutWidth
120+
color = paintColor1
121+
pathEffect = path
122+
}
123+
return paint2
124+
}
125+
83126
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
84127
val w = resolveSizeAndState(suggestedMinimumWidth, widthMeasureSpec, 1)
85128
val h = resolveSizeAndState(MeasureSpec.getSize(w), heightMeasureSpec, 0)
@@ -101,10 +144,35 @@ class DonutChartView @JvmOverloads constructor(
101144
}
102145

103146
override fun onDraw(canvas: Canvas?) {
147+
val white = stripesOrPlain(false, ContextCompat.getColor(context, R.color.hmrc_white_background))
148+
104149
canvas?.apply {
105-
drawArc(rect!!, startAngle, value1SweepAngle, false, color1Paint)
106-
drawArc(rect!!, startAngle, value2SweepAngle, false, color2Paint)
107-
drawArc(rect!!, startAngle, value3SweepAngle, false, color3Paint)
150+
if (value1SweepAngle - startAngle < DEGREES_FOR_NO_STRIPES) {
151+
color1Paint = donutPaintWithColour(color1)
152+
drawArc(rect, startAngle, value1SweepAngle, false, color1Paint)
153+
} else {
154+
color1Paint = stripesOrPlain(stripes1, color1)
155+
drawArc(rect, startAngle, value1SweepAngle, false, white)
156+
drawArc(rect, startAngle, value1SweepAngle, false, color1Paint)
157+
}
158+
159+
if (0f - value2SweepAngle < DEGREES_FOR_NO_STRIPES) {
160+
color2Paint = donutPaintWithColour(color2)
161+
drawArc(rect, startAngle, value2SweepAngle, false, color2Paint)
162+
} else {
163+
color2Paint = stripesOrPlain(stripes2, color2)
164+
drawArc(rect, startAngle, value2SweepAngle, false, white)
165+
drawArc(rect, startAngle, value2SweepAngle, false, color2Paint)
166+
}
167+
168+
if (0f - value3SweepAngle < DEGREES_FOR_NO_STRIPES) {
169+
color3Paint = donutPaintWithColour(ContextCompat.getColor(context, R.color.hmrc_pink))
170+
drawArc(rect, startAngle, value3SweepAngle, false, color3Paint)
171+
} else {
172+
color3Paint = stripesOrPlain(stripes3, color3)
173+
drawArc(rect, startAngle, value3SweepAngle, false, white)
174+
drawArc(rect, startAngle, value3SweepAngle, false, color3Paint)
175+
}
108176
}
109177
}
110178

@@ -137,14 +205,17 @@ class DonutChartView @JvmOverloads constructor(
137205
setOnAnimationEnd {
138206
Value3ArcAnimation(value3Spread).apply {
139207
duration = (value3Duration * animationScale).toLong()
208+
interpolator = DecelerateInterpolator()
140209
startAnimation(this)
141210
}
142211
}
143212
duration = (value2Duration * animationScale).toLong()
213+
interpolator = DecelerateInterpolator()
144214
startAnimation(this)
145215
}
146216
}
147217
duration = (value1Duration * animationScale).toLong()
218+
interpolator = DecelerateInterpolator()
148219
startAnimation(this)
149220
}
150221
}
@@ -182,13 +253,16 @@ class DonutChartView @JvmOverloads constructor(
182253
}
183254

184255
companion object {
185-
private const val VALUE_1_ANIMATION_DURATION = 600L
186-
private const val VALUE_2_ANIMATION_DURATION = 300L
187-
private const val VALUE_3_ANIMATION_DURATION = 300L
256+
private const val VALUE_1_ANIMATION_DURATION = 1200L
257+
private const val VALUE_2_ANIMATION_DURATION = 600L
258+
private const val VALUE_3_ANIMATION_DURATION = 600L
188259
private const val NO_ANIMATION_DURATION = 0L
189260
private const val LEFT_OF_CIRCLE = 270f
190261
private const val ONE_HUNDRED_PERCENT = 100f
191262
private const val FULL_CIRCLE_ANGLE_IN_WHOLE_NUMBER = 360
192263
private const val FULL_CIRCLE_ANGLE_IN_DECIMALS_NUMBER = 3.6
264+
private const val TOTAL_NUM_OF_DASHES = 80f
265+
private const val INTERVAL_GAP = 0.5f
266+
private const val DEGREES_FOR_NO_STRIPES = 18f
193267
}
194268
}

‎components/src/main/java/uk/gov/hmrc/components/organism/editable/EditableListViewAdapter.kt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ class EditableListViewAdapter(
5555
columnTwo.text = result.value
5656
iconButton.text = result.buttonText
5757
val positionLabel = position + 1
58+
5859
divider.isVisible = positionLabel < itemCount
5960
itemView.contentDescription =
6061
if (isEditEnable) {

‎components/src/main/res/layout/component_editable_list_view.xml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717

1818
<androidx.recyclerview.widget.RecyclerView
1919
android:id="@+id/list_items"
20-
android:paddingHorizontal="@dimen/hmrc_spacing_16"
2120
android:layout_width="match_parent"
2221
android:layout_height="wrap_content"
2322
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

‎components/src/main/res/layout/editable_list_items.xml‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,36 @@
1111
<TextView
1212
android:id="@+id/column_one"
1313
style="@style/Text.Body"
14-
android:layout_marginHorizontal="@dimen/hmrc_spacing_16"
1514
android:importantForAccessibility="no"
15+
android:paddingStart="@dimen/hmrc_spacing_16"
16+
android:paddingEnd="@dimen/hmrc_spacing_8"
1617
android:layout_width="wrap_content"
1718
android:layout_height="wrap_content"
1819
android:gravity="start" />
1920

2021
<TextView
2122
android:id="@+id/column_two"
2223
style="@style/Text.Body"
23-
android:layout_marginHorizontal="@dimen/hmrc_spacing_16"
2424
android:importantForAccessibility="no"
25+
android:paddingStart="@dimen/hmrc_spacing_8"
2526
android:layout_width="wrap_content"
2627
android:layout_height="wrap_content"
27-
android:gravity="center_vertical|end" />
28+
android:gravity="center_vertical|end"
29+
tools:ignore="RtlSymmetry" />
2830

2931
<uk.gov.hmrc.components.atom.button.SecondaryButton
3032
android:id="@+id/icon_button"
3133
android:minWidth="0dp"
3234
android:minHeight="0dp"
3335
android:importantForAccessibility="no"
34-
android:paddingHorizontal="0dp"
3536
android:layout_width="wrap_content"
3637
android:layout_height="wrap_content" />
3738

3839
<View
3940
android:id="@+id/divider"
4041
android:layout_width="match_parent"
4142
android:layout_height="1dp"
43+
android:paddingHorizontal="@dimen/hmrc_spacing_16"
4244
android:background="@drawable/components_divider"
4345
android:importantForAccessibility="no"
4446
android:visibility="gone" />

‎components/src/main/res/values-night/colors.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,6 @@
3131
<color name="hmrc_pink">#FFBB94FF</color>
3232
<color name="hmrc_donut_chart_color_1">@color/hmrc_always_white</color>
3333
<color name="hmrc_donut_chart_color_2">@color/hmrc_teal</color>
34+
<color name="hmrc_donut_chart_color_3">@color/hmrc_teal</color>
3435

3536
</resources>

‎components/src/main/res/values/attrs.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,9 @@
264264
<attr name="color1" format="color" />
265265
<attr name="color2" format="color" />
266266
<attr name="color3" format="color" />
267+
<attr name="stripes1" format="boolean" />
268+
<attr name="stripes2" format="boolean" />
269+
<attr name="stripes3" format="boolean" />
267270
</declare-styleable>
268271

269272
<declare-styleable name="EditableListView">

‎components/src/main/res/values/colors.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,6 @@
5050

5151
<color name="hmrc_donut_chart_color_1">@color/hmrc_teal</color>
5252
<color name="hmrc_donut_chart_color_2">#003078</color>
53-
<color name="hmrc_donut_chart_color_3">@color/hmrc_pink</color>
53+
<color name="hmrc_donut_chart_color_3">#003078</color>
5454

5555
</resources>

‎components/src/main/res/values/dimens.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,6 @@
5959
<dimen name="warning_icon_size">36dp</dimen>
6060

6161
<!-- Donut -->
62-
<dimen name="donut_width">16dp</dimen>
62+
<dimen name="donut_width">30dp</dimen>
6363

6464
</resources>

‎components/src/main/res/xml/scene_editing_mode.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
android:id="@+id/column_two"
3939
android:layout_width="0dp"
4040
android:layout_height="wrap_content"
41+
android:layout_marginEnd="@dimen/hmrc_spacing_16"
4142
motion:layout_constraintBottom_toBottomOf="@id/icon_button"
4243
motion:layout_constraintEnd_toEndOf="parent"
4344
motion:layout_constraintStart_toEndOf="@id/column_one"
@@ -63,6 +64,8 @@
6364
android:id="@+id/divider"
6465
android:layout_width="match_parent"
6566
android:layout_height="0dp"
67+
android:layout_marginStart="@dimen/hmrc_spacing_16"
68+
android:layout_marginEnd="@dimen/hmrc_spacing_16"
6669
motion:layout_constraintBottom_toBottomOf="parent"
6770
motion:layout_constraintEnd_toEndOf="parent"
6871
motion:layout_constraintStart_toStartOf="parent"
@@ -110,6 +113,8 @@
110113
android:id="@+id/divider"
111114
android:layout_width="match_parent"
112115
android:layout_height="0dp"
116+
android:layout_marginStart="@dimen/hmrc_spacing_16"
117+
android:layout_marginEnd="@dimen/hmrc_spacing_16"
113118
motion:layout_constraintBottom_toBottomOf="parent"
114119
motion:layout_constraintEnd_toEndOf="parent"
115120
motion:layout_constraintStart_toStartOf="parent"

0 commit comments

Comments
 (0)