Skip to content

Commit a03f646

Browse files
peter-j0ypeter-j0y
authored
πŸ”€ #68 from boostcampwm-2022/feat/ui_change
λŸ¬λ‹ νžˆμŠ€ν† λ¦¬ μ•„μ΄ν…œ UI κ°œμ„ , λŸ¬λ‹ μ‹œμž‘/μ’…λ£Œ μ‹œ λ‘œλ”© UI μΆ”κ°€
2 parents 6ce89c2 + b1a96be commit a03f646

File tree

7 files changed

+165
-63
lines changed

7 files changed

+165
-63
lines changed

β€Žpresentation/src/main/java/com/whyranoid/presentation/running/RunningActivity.kt

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,13 @@ internal class RunningActivity :
130130
private fun observeState() {
131131
repeatWhenUiStarted {
132132
viewModel.runningState.collect { runningState ->
133-
with(runningState.runningData) {
134-
binding.tvStartTime.text = Date(startTime).dateToString("hh:mm")
135-
binding.tvRunningTime.text =
136-
String.format("%d:%02d", runningTime / 60, runningTime % 60)
137-
binding.tvTotalDistance.text = String.format("%.4f m", totalDistance)
138-
binding.tvPace.text = String.format("%.4f km/h", pace * 3.6)
133+
when (runningState) {
134+
is RunningState.NotRunning -> {
135+
}
136+
is RunningState.Running,
137+
is RunningState.Paused -> {
138+
handleUpdateState(runningState.runningData)
139+
}
139140
}
140141
}
141142
}
@@ -209,8 +210,21 @@ internal class RunningActivity :
209210
}
210211
}
211212

213+
private fun handleUpdateState(runningData: RunningData) {
214+
with(runningData) {
215+
binding.tvStartTime.text = Date(startTime).dateToString("hh:mm")
216+
binding.tvRunningTime.text =
217+
String.format("%d:%02d", runningTime / 60, runningTime % 60)
218+
binding.tvTotalDistance.text = String.format("%.4f m", totalDistance)
219+
binding.tvPace.text = String.format("%.4f km/h", pace * 3.6)
220+
}
221+
}
222+
212223
private fun handleRunningFinishSuccessState(runningFinishData: RunningFinishData) {
213-
setResult(RESULT_OK, Intent().putExtra(RunningViewModel.RUNNING_FINISH_DATA_KEY, runningFinishData))
224+
setResult(
225+
RESULT_OK,
226+
Intent().putExtra(RunningViewModel.RUNNING_FINISH_DATA_KEY, runningFinishData)
227+
)
214228
finish()
215229
}
216230

β€Žpresentation/src/main/java/com/whyranoid/presentation/util/BindingAdapters.kt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ fun TextView.finishLongToDate(long: Long) {
4949
text = formatter.format(Date(long))
5050
}
5151

52-
@BindingAdapter("LongToTime")
52+
@BindingAdapter("longToTime")
5353
fun TextView.longToTime(long: Long) {
54-
val formatter = SimpleDateFormat("HH : mm", Locale.KOREA)
54+
val formatter = SimpleDateFormat("HH:mm", Locale.getDefault())
5555
text = formatter.format(Date(long))
5656
}

β€Žpresentation/src/main/res/drawable/background_rounded.xml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<shape xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:shape="rectangle">
4+
<solid android:color="?attr/colorPrimary" />
5+
<corners android:radius="6dp" />
6+
7+
</shape>

β€Žpresentation/src/main/res/layout/activity_running.xml

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55

66
<data>
77

8+
<import type="com.whyranoid.presentation.running.RunningState" />
9+
10+
<import type="android.view.View" />
11+
812
<variable
913
name="vm"
1014
type="com.whyranoid.presentation.running.RunningViewModel" />
@@ -24,8 +28,8 @@
2428
android:id="@+id/btn_map_location"
2529
android:layout_width="50dp"
2630
android:layout_height="50dp"
27-
android:text="@string/running_map_location_button"
2831
android:onClick="@{() -> vm.onTrackingButtonClicked()}"
32+
android:text="@string/running_map_location_button"
2933
app:layout_constraintBottom_toTopOf="@id/panel_running_data"
3034
app:layout_constraintRight_toRightOf="@id/panel_running_data" />
3135

@@ -37,9 +41,9 @@
3741
android:layout_margin="12dp"
3842
android:background="@color/white"
3943
android:clickable="false"
44+
android:elevation="@dimen/cardview_default_elevation"
4045
android:paddingHorizontal="12dp"
4146
android:paddingVertical="8dp"
42-
android:elevation="@dimen/cardview_default_elevation"
4347
app:layout_constraintBottom_toTopOf="@+id/btn_pause_or_resume"
4448
app:layout_constraintEnd_toEndOf="parent"
4549
app:layout_constraintStart_toStartOf="parent">
@@ -143,7 +147,6 @@
143147

144148
</androidx.constraintlayout.widget.ConstraintLayout>
145149

146-
147150
<com.google.android.material.button.MaterialButton
148151
android:id="@+id/btn_pause_or_resume"
149152
android:layout_width="0dp"
@@ -166,5 +169,26 @@
166169
app:layout_constraintEnd_toEndOf="parent"
167170
app:layout_constraintStart_toEndOf="@id/btn_pause_or_resume" />
168171

172+
<FrameLayout
173+
android:id="@+id/frame_progress_running"
174+
android:layout_width="match_parent"
175+
android:layout_height="match_parent"
176+
android:background="@color/black"
177+
android:alpha="0.8"
178+
android:translationZ="@{vm.runningState instanceof RunningState.NotRunning ? 10f : 0f }"
179+
android:visibility="@{vm.runningState instanceof RunningState.NotRunning ? View.VISIBLE : View.GONE }">
180+
181+
<com.google.android.material.progressindicator.CircularProgressIndicator
182+
android:id="@+id/progressindicator_running"
183+
android:layout_width="wrap_content"
184+
android:layout_height="wrap_content"
185+
android:layout_gravity="center"
186+
android:contentDescription="@string/running_start_progress_description"
187+
android:indeterminate="true"
188+
android:visibility="@{vm.runningState instanceof RunningState.NotRunning ? View.VISIBLE : View.GONE }"
189+
app:indicatorColor="?attr/colorOnPrimary" />
190+
191+
</FrameLayout>
192+
169193
</androidx.constraintlayout.widget.ConstraintLayout>
170194
</layout>

β€Žpresentation/src/main/res/layout/item_running_history.xml

Lines changed: 97 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
xmlns:tools="http://schemas.android.com/tools">
55

66
<data>
7+
8+
<import type="com.whyranoid.presentation.util.ExtensionsKt" />
9+
710
<variable
811
name="runningHistory"
912
type="com.whyranoid.presentation.model.RunningHistoryUiModel" />
@@ -12,15 +15,34 @@
1215
<androidx.constraintlayout.widget.ConstraintLayout
1316
android:layout_width="match_parent"
1417
android:layout_height="wrap_content"
15-
android:padding="12dp">
18+
android:layout_margin="2dp"
19+
android:background="@drawable/background_rounded"
20+
android:backgroundTint="@color/mogakrun_secondary"
21+
android:elevation="@dimen/cardview_default_elevation">
22+
23+
<View
24+
android:id="@+id/view_running_history_body"
25+
android:layout_width="0dp"
26+
android:layout_height="0dp"
27+
android:background="@drawable/background_rounded"
28+
app:layout_constraintBottom_toBottomOf="parent"
29+
app:layout_constraintEnd_toEndOf="parent"
30+
app:layout_constraintStart_toStartOf="parent"
31+
app:layout_constraintTop_toBottomOf="@id/tv_running_history_date" />
1632

1733
<TextView
1834
android:id="@+id/tv_running_history_date"
1935
android:layout_width="wrap_content"
2036
android:layout_height="wrap_content"
37+
android:layout_marginTop="4dp"
38+
android:maxLines="1"
39+
android:text="@{ExtensionsKt.toRunningDateString(runningHistory.date)}"
40+
android:textAppearance="@style/MoGakRunText.Regular.Small"
41+
android:textColor="?attr/colorOnSecondary"
42+
app:layout_constraintEnd_toEndOf="@id/view_vertical_partition_line"
43+
app:layout_constraintHorizontal_bias="0.1"
2144
app:layout_constraintStart_toStartOf="parent"
2245
app:layout_constraintTop_toTopOf="parent"
23-
android:text="@{Long.toString(runningHistory.date)}"
2446
tools:text="2022/09/11" />
2547

2648
<TextView
@@ -29,117 +51,147 @@
2951
android:layout_height="wrap_content"
3052
android:layout_marginEnd="20dp"
3153
android:text="@string/running_history_label_total_running_time"
54+
android:textAppearance="@style/MoGakRunText.Light.Small"
3255
app:layout_constraintBottom_toBottomOf="@id/tv_running_history_date"
3356
app:layout_constraintEnd_toStartOf="@id/tv_total_running_time"
57+
app:layout_constraintStart_toStartOf="@id/view_vertical_partition_line"
3458
app:layout_constraintTop_toTopOf="@id/tv_running_history_date" />
3559

3660
<TextView
3761
android:id="@+id/tv_total_running_time"
3862
android:layout_width="wrap_content"
3963
android:layout_height="wrap_content"
40-
android:text="@{Integer.toString(runningHistory.totalRunningTime)}"
64+
android:text="@{String.format(@string/running_history_value_total_running_time, runningHistory.totalRunningTime / 3600, runningHistory.totalRunningTime / 60)}"
65+
android:textAppearance="@style/MoGakRunText.Regular.Small"
4166
app:layout_constraintBottom_toBottomOf="@id/tv_label_total_running_time"
4267
app:layout_constraintEnd_toEndOf="parent"
68+
app:layout_constraintStart_toEndOf="@id/tv_label_total_running_time"
4369
app:layout_constraintTop_toTopOf="@id/tv_label_total_running_time"
4470
tools:text="2μ‹œκ°„ 22λΆ„" />
4571

4672
<View
4773
android:id="@+id/view_vertical_partition_line"
4874
android:layout_width="1dp"
49-
android:layout_height="100dp"
50-
app:layout_constraintTop_toBottomOf="@id/tv_label_total_running_time"
51-
app:layout_constraintStart_toStartOf="parent"
52-
app:layout_constraintEnd_toEndOf="parent"
75+
android:layout_height="0dp"
76+
android:alpha="0.2"
77+
android:background="?attr/colorOnSecondary"
5378
app:layout_constraintBottom_toBottomOf="parent"
54-
android:layout_marginTop="20dp"
55-
android:layout_marginBottom="20dp"
56-
android:background="@color/black" />
79+
app:layout_constraintEnd_toEndOf="parent"
80+
app:layout_constraintStart_toStartOf="parent"
81+
app:layout_constraintTop_toTopOf="@id/view_running_history_body" />
5782

5883
<View
5984
android:id="@+id/view_horizontal_partition_line"
6085
android:layout_width="0dp"
6186
android:layout_height="1dp"
62-
app:layout_constraintStart_toStartOf="parent"
87+
android:alpha="0.2"
88+
android:background="?attr/colorOnSecondary"
6389
app:layout_constraintEnd_toEndOf="parent"
64-
app:layout_constraintTop_toBottomOf="@id/tv_label_total_running_time"
65-
app:layout_constraintBottom_toBottomOf="parent"
66-
android:layout_marginTop="20dp"
67-
android:layout_marginBottom="20dp"
68-
android:background="@color/black" />
90+
app:layout_constraintStart_toStartOf="parent"
91+
app:layout_constraintTop_toBottomOf="@id/tv_start_time_value" />
6992

7093
<TextView
94+
android:id="@+id/tv_start_time_label"
7195
android:layout_width="wrap_content"
7296
android:layout_height="wrap_content"
97+
android:layout_marginHorizontal="6dp"
98+
android:layout_marginTop="12dp"
7399
android:text="@string/running_history_label_start_running_time"
100+
android:textAppearance="@style/MoGakRunText.Light.Small"
101+
app:layout_constraintEnd_toStartOf="@id/view_vertical_partition_line"
102+
app:layout_constraintHorizontal_bias="0.0"
74103
app:layout_constraintStart_toStartOf="parent"
75-
app:layout_constraintTop_toBottomOf="@id/tv_running_history_date"
76-
app:layout_constraintBottom_toTopOf="@id/view_horizontal_partition_line" />
104+
app:layout_constraintTop_toBottomOf="@id/tv_running_history_date" />
77105

78106
<TextView
107+
android:id="@+id/tv_start_time_value"
108+
longToTime="@{runningHistory.startedAt}"
79109
android:layout_width="wrap_content"
80110
android:layout_height="wrap_content"
81-
tools:text="17:00"
82-
android:text="@{Long.toString(runningHistory.startedAt)}"
111+
android:paddingTop="10dp"
112+
android:paddingBottom="20dp"
113+
android:textAppearance="@style/MoGakRunText.Regular.Medium"
83114
app:layout_constraintEnd_toStartOf="@id/view_vertical_partition_line"
84-
app:layout_constraintBottom_toBottomOf="@id/view_horizontal_partition_line"
85-
android:layout_marginEnd="50dp"
86-
android:layout_marginBottom="20dp" />
115+
app:layout_constraintHorizontal_bias="0.6"
116+
app:layout_constraintStart_toStartOf="parent"
117+
app:layout_constraintTop_toBottomOf="@id/tv_start_time_label"
118+
tools:text="17:00" />
87119

88120
<TextView
121+
android:id="@+id/tv_end_time_label"
89122
android:layout_width="wrap_content"
90123
android:layout_height="wrap_content"
91-
android:text="@string/running_history_label_finish_running_time"
92124
android:layout_marginStart="12dp"
125+
android:text="@string/running_history_label_finish_running_time"
126+
android:textAppearance="@style/MoGakRunText.Light.Small"
93127
app:layout_constraintStart_toStartOf="@id/view_vertical_partition_line"
94-
app:layout_constraintTop_toBottomOf="@id/tv_running_history_date"
95-
app:layout_constraintBottom_toTopOf="@id/view_horizontal_partition_line" />
128+
app:layout_constraintTop_toTopOf="@id/tv_start_time_label" />
96129

97130
<TextView
131+
longToTime="@{runningHistory.finishedAt}"
98132
android:layout_width="wrap_content"
99133
android:layout_height="wrap_content"
100-
tools:text="19:22"
101-
android:text="@{Long.toString(runningHistory.finishedAt)}"
102-
app:layout_constraintEnd_toEndOf="parent"
103-
app:layout_constraintBottom_toBottomOf="@id/view_horizontal_partition_line"
104-
android:layout_marginEnd="50dp"
105-
android:layout_marginBottom="20dp" />
134+
android:layout_marginBottom="20dp"
135+
android:paddingTop="10dp"
136+
android:paddingBottom="20dp"
137+
android:textAppearance="@style/MoGakRunText.Regular.Medium"
138+
app:layout_constraintEnd_toEndOf="@id/view_horizontal_partition_line"
139+
app:layout_constraintHorizontal_bias="0.6"
140+
app:layout_constraintStart_toEndOf="@id/view_vertical_partition_line"
141+
app:layout_constraintTop_toBottomOf="@id/tv_end_time_label"
142+
tools:text="19:22" />
106143

107144
<TextView
145+
android:id="@+id/tv_total_distance_label"
108146
android:layout_width="wrap_content"
109147
android:layout_height="wrap_content"
148+
android:layout_marginHorizontal="6dp"
149+
android:layout_marginTop="12dp"
110150
android:text="@string/running_history_label_running_distance"
151+
android:textAppearance="@style/MoGakRunText.Light.Small"
111152
app:layout_constraintStart_toStartOf="parent"
112-
android:layout_marginTop="12dp"
113153
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line" />
114154

115155
<TextView
116156
android:layout_width="wrap_content"
117157
android:layout_height="wrap_content"
118-
tools:text="11.7km"
119-
android:text="@{Double.toString(runningHistory.totalDistance)}"
158+
android:layout_marginTop="24dp"
159+
android:paddingTop="10dp"
160+
android:paddingBottom="20dp"
161+
android:text="@{runningHistory.totalDistance >= 1000 ? String.format(@string/running_history_value_running_distance_km, runningHistory.totalDistance / 1000) : String.format(@string/running_history_value_running_distance_m, runningHistory.totalDistance)}"
162+
android:textAppearance="@style/MoGakRunText.Regular.Medium"
120163
app:layout_constraintEnd_toStartOf="@id/view_vertical_partition_line"
164+
app:layout_constraintHorizontal_bias="0.6"
165+
app:layout_constraintStart_toStartOf="parent"
121166
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line"
122-
android:layout_marginTop="24dp"
123-
android:layout_marginEnd="50dp" />
167+
tools:text="11.7km" />
124168

125169
<TextView
170+
android:id="@+id/tv_total_pace_label"
126171
android:layout_width="wrap_content"
127172
android:layout_height="wrap_content"
173+
android:layout_marginStart="12dp"
174+
android:layout_marginTop="12dp"
128175
android:text="@string/running_history_label_running_pace"
129-
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line"
176+
android:textAppearance="@style/MoGakRunText.Light.Small"
130177
app:layout_constraintStart_toStartOf="@id/view_vertical_partition_line"
131-
android:layout_marginTop="12dp"
132-
android:layout_marginStart="12dp" />
178+
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line" />
133179

134180
<TextView
135181
android:layout_width="wrap_content"
136182
android:layout_height="wrap_content"
137-
tools:text="6.3km/h"
138-
android:text="@{Double.toString(runningHistory.pace)}"
139-
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line"
140-
app:layout_constraintEnd_toEndOf="parent"
141183
android:layout_marginTop="24dp"
142-
android:layout_marginEnd="50dp" />
184+
android:paddingTop="10dp"
185+
android:paddingBottom="20dp"
186+
android:text="@{String.format(@string/running_history_value_running_pace, runningHistory.pace)}"
187+
android:textAppearance="@style/MoGakRunText.Regular.Medium"
188+
app:layout_constraintEnd_toEndOf="@id/view_horizontal_partition_line"
189+
app:layout_constraintHorizontal_bias="0.6"
190+
app:layout_constraintStart_toEndOf="@id/view_vertical_partition_line"
191+
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line"
192+
tools:text="6.3km/h" />
143193

144194
</androidx.constraintlayout.widget.ConstraintLayout>
195+
196+
145197
</layout>

β€Žpresentation/src/main/res/layout/item_running_post.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
android:layout_height="wrap_content"
103103
android:layout_marginEnd="50dp"
104104
android:layout_marginBottom="20dp"
105-
app:LongToTime="@{runningPost.runningHistory.startedAt}"
105+
app:longToTime="@{runningPost.runningHistory.startedAt}"
106106
app:layout_constraintBottom_toBottomOf="@id/view_horizontal_partition_line"
107107
app:layout_constraintEnd_toStartOf="@id/view_vertical_partition_line"
108108
tools:text="17:00" />
@@ -121,7 +121,7 @@
121121
android:layout_height="wrap_content"
122122
android:layout_marginEnd="50dp"
123123
android:layout_marginBottom="20dp"
124-
app:LongToTime="@{runningPost.runningHistory.finishedAt}"
124+
app:longToTime="@{runningPost.runningHistory.finishedAt}"
125125
app:layout_constraintBottom_toBottomOf="@id/view_horizontal_partition_line"
126126
app:layout_constraintEnd_toEndOf="parent"
127127
tools:text="19:22" />

0 commit comments

Comments
Β (0)