Skip to content

Commit e3a28a2

Browse files
bngshbngsh
committed
💄 러닝 히스토리 아이템 레이아웃 개선
1 parent 6ce89c2 commit e3a28a2

File tree

2 files changed

+97
-40
lines changed

2 files changed

+97
-40
lines changed

‎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/item_running_history.xml

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

66
<data>
7+
78
<variable
89
name="runningHistory"
910
type="com.whyranoid.presentation.model.RunningHistoryUiModel" />
@@ -12,15 +13,34 @@
1213
<androidx.constraintlayout.widget.ConstraintLayout
1314
android:layout_width="match_parent"
1415
android:layout_height="wrap_content"
15-
android:padding="12dp">
16+
android:layout_margin="2dp"
17+
android:background="@drawable/background_rounded"
18+
android:backgroundTint="@color/mogakrun_secondary"
19+
android:elevation="@dimen/cardview_default_elevation">
20+
21+
<View
22+
android:id="@+id/view_running_history_body"
23+
android:layout_width="0dp"
24+
android:layout_height="0dp"
25+
android:background="@drawable/background_rounded"
26+
app:layout_constraintBottom_toBottomOf="parent"
27+
app:layout_constraintEnd_toEndOf="parent"
28+
app:layout_constraintStart_toStartOf="parent"
29+
app:layout_constraintTop_toBottomOf="@id/tv_running_history_date" />
1630

1731
<TextView
1832
android:id="@+id/tv_running_history_date"
1933
android:layout_width="wrap_content"
2034
android:layout_height="wrap_content"
35+
android:layout_marginTop="4dp"
36+
android:maxLines="1"
37+
android:text="@{Long.toString(runningHistory.date)}"
38+
android:textAppearance="@style/MoGakRunText.Regular.Small"
39+
android:textColor="?attr/colorOnSecondary"
40+
app:layout_constraintEnd_toEndOf="@id/view_vertical_partition_line"
41+
app:layout_constraintHorizontal_bias="0.1"
2142
app:layout_constraintStart_toStartOf="parent"
2243
app:layout_constraintTop_toTopOf="parent"
23-
android:text="@{Long.toString(runningHistory.date)}"
2444
tools:text="2022/09/11" />
2545

2646
<TextView
@@ -29,117 +49,147 @@
2949
android:layout_height="wrap_content"
3050
android:layout_marginEnd="20dp"
3151
android:text="@string/running_history_label_total_running_time"
52+
android:textAppearance="@style/MoGakRunText.Light.Small"
3253
app:layout_constraintBottom_toBottomOf="@id/tv_running_history_date"
3354
app:layout_constraintEnd_toStartOf="@id/tv_total_running_time"
55+
app:layout_constraintStart_toStartOf="@id/view_vertical_partition_line"
3456
app:layout_constraintTop_toTopOf="@id/tv_running_history_date" />
3557

3658
<TextView
3759
android:id="@+id/tv_total_running_time"
3860
android:layout_width="wrap_content"
3961
android:layout_height="wrap_content"
4062
android:text="@{Integer.toString(runningHistory.totalRunningTime)}"
63+
android:textAppearance="@style/MoGakRunText.Regular.Small"
4164
app:layout_constraintBottom_toBottomOf="@id/tv_label_total_running_time"
4265
app:layout_constraintEnd_toEndOf="parent"
66+
app:layout_constraintStart_toEndOf="@id/tv_label_total_running_time"
4367
app:layout_constraintTop_toTopOf="@id/tv_label_total_running_time"
4468
tools:text="2시간 22분" />
4569

4670
<View
4771
android:id="@+id/view_vertical_partition_line"
4872
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"
73+
android:layout_height="0dp"
74+
android:alpha="0.2"
75+
android:background="?attr/colorOnSecondary"
5376
app:layout_constraintBottom_toBottomOf="parent"
54-
android:layout_marginTop="20dp"
55-
android:layout_marginBottom="20dp"
56-
android:background="@color/black" />
77+
app:layout_constraintEnd_toEndOf="parent"
78+
app:layout_constraintStart_toStartOf="parent"
79+
app:layout_constraintTop_toTopOf="@id/view_running_history_body" />
5780

5881
<View
5982
android:id="@+id/view_horizontal_partition_line"
6083
android:layout_width="0dp"
6184
android:layout_height="1dp"
62-
app:layout_constraintStart_toStartOf="parent"
85+
android:alpha="0.2"
86+
android:background="?attr/colorOnSecondary"
6387
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" />
88+
app:layout_constraintStart_toStartOf="parent"
89+
app:layout_constraintTop_toBottomOf="@id/tv_start_time_value" />
6990

7091
<TextView
92+
android:id="@+id/tv_start_time_label"
7193
android:layout_width="wrap_content"
7294
android:layout_height="wrap_content"
95+
android:layout_marginHorizontal="6dp"
96+
android:layout_marginTop="12dp"
7397
android:text="@string/running_history_label_start_running_time"
98+
android:textAppearance="@style/MoGakRunText.Light.Small"
99+
app:layout_constraintEnd_toStartOf="@id/view_vertical_partition_line"
100+
app:layout_constraintHorizontal_bias="0.0"
74101
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" />
102+
app:layout_constraintTop_toBottomOf="@id/tv_running_history_date" />
77103

78104
<TextView
105+
android:id="@+id/tv_start_time_value"
79106
android:layout_width="wrap_content"
80107
android:layout_height="wrap_content"
81-
tools:text="17:00"
108+
android:paddingTop="10dp"
109+
android:paddingBottom="20dp"
82110
android:text="@{Long.toString(runningHistory.startedAt)}"
111+
android:textAppearance="@style/MoGakRunText.Regular.Medium"
83112
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" />
113+
app:layout_constraintHorizontal_bias="0.6"
114+
app:layout_constraintStart_toStartOf="parent"
115+
app:layout_constraintTop_toBottomOf="@id/tv_start_time_label"
116+
tools:text="17:00" />
87117

88118
<TextView
119+
android:id="@+id/tv_end_time_label"
89120
android:layout_width="wrap_content"
90121
android:layout_height="wrap_content"
91-
android:text="@string/running_history_label_finish_running_time"
92122
android:layout_marginStart="12dp"
123+
android:text="@string/running_history_label_finish_running_time"
124+
android:textAppearance="@style/MoGakRunText.Light.Small"
93125
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" />
126+
app:layout_constraintTop_toTopOf="@id/tv_start_time_label" />
96127

97128
<TextView
98129
android:layout_width="wrap_content"
99130
android:layout_height="wrap_content"
100-
tools:text="19:22"
131+
android:layout_marginBottom="20dp"
132+
android:paddingTop="10dp"
133+
android:paddingBottom="20dp"
101134
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" />
135+
android:textAppearance="@style/MoGakRunText.Regular.Medium"
136+
app:layout_constraintEnd_toEndOf="@id/view_horizontal_partition_line"
137+
app:layout_constraintHorizontal_bias="0.6"
138+
app:layout_constraintStart_toEndOf="@id/view_vertical_partition_line"
139+
app:layout_constraintTop_toBottomOf="@id/tv_end_time_label"
140+
tools:text="19:22" />
106141

107142
<TextView
143+
android:id="@+id/tv_total_distance_label"
108144
android:layout_width="wrap_content"
109145
android:layout_height="wrap_content"
146+
android:layout_marginHorizontal="6dp"
147+
android:layout_marginTop="12dp"
110148
android:text="@string/running_history_label_running_distance"
149+
android:textAppearance="@style/MoGakRunText.Light.Small"
111150
app:layout_constraintStart_toStartOf="parent"
112-
android:layout_marginTop="12dp"
113151
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line" />
114152

115153
<TextView
116154
android:layout_width="wrap_content"
117155
android:layout_height="wrap_content"
118-
tools:text="11.7km"
156+
android:layout_marginTop="24dp"
157+
android:paddingTop="10dp"
158+
android:paddingBottom="20dp"
119159
android:text="@{Double.toString(runningHistory.totalDistance)}"
160+
android:textAppearance="@style/MoGakRunText.Regular.Medium"
120161
app:layout_constraintEnd_toStartOf="@id/view_vertical_partition_line"
162+
app:layout_constraintHorizontal_bias="0.6"
163+
app:layout_constraintStart_toStartOf="parent"
121164
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line"
122-
android:layout_marginTop="24dp"
123-
android:layout_marginEnd="50dp" />
165+
tools:text="11.7km" />
124166

125167
<TextView
168+
android:id="@+id/tv_total_pace_label"
126169
android:layout_width="wrap_content"
127170
android:layout_height="wrap_content"
171+
android:layout_marginStart="12dp"
172+
android:layout_marginTop="12dp"
128173
android:text="@string/running_history_label_running_pace"
129-
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line"
174+
android:textAppearance="@style/MoGakRunText.Light.Small"
130175
app:layout_constraintStart_toStartOf="@id/view_vertical_partition_line"
131-
android:layout_marginTop="12dp"
132-
android:layout_marginStart="12dp" />
176+
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line" />
133177

134178
<TextView
135179
android:layout_width="wrap_content"
136180
android:layout_height="wrap_content"
137-
tools:text="6.3km/h"
181+
android:layout_marginTop="24dp"
182+
android:paddingTop="10dp"
183+
android:paddingBottom="20dp"
138184
android:text="@{Double.toString(runningHistory.pace)}"
185+
android:textAppearance="@style/MoGakRunText.Regular.Medium"
186+
app:layout_constraintEnd_toEndOf="@id/view_horizontal_partition_line"
187+
app:layout_constraintHorizontal_bias="0.6"
188+
app:layout_constraintStart_toEndOf="@id/view_vertical_partition_line"
139189
app:layout_constraintTop_toBottomOf="@id/view_horizontal_partition_line"
140-
app:layout_constraintEnd_toEndOf="parent"
141-
android:layout_marginTop="24dp"
142-
android:layout_marginEnd="50dp" />
190+
tools:text="6.3km/h" />
143191

144192
</androidx.constraintlayout.widget.ConstraintLayout>
193+
194+
145195
</layout>

0 commit comments

Comments
 (0)