Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: 업로드 뷰 디자인 변경 #381

Merged
merged 12 commits into from
Oct 4, 2023
Merged

refactor: 업로드 뷰 디자인 변경 #381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
811753f
refactor: 업로드 뷰 디자인 변경
krrong Oct 2, 2023
e990ef9
refactor: 사용하지 않는 변수 삭제
krrong Oct 2, 2023
bb2d7e4
refactor: AppCompatButton 사용해서 배경색 지정하도록 변경
krrong Oct 2, 2023
d72796a
refactor: editText에 hint 추가
krrong Oct 2, 2023
2fd0d1a
refactor: ktlint
krrong Oct 2, 2023
e28f68b
refactor: 버튼 배경 변경
krrong Oct 4, 2023
25790ae
refactor: editText 밑줄 삭제
krrong Oct 4, 2023
ef42cc1
refactor: editText marginTop 수정
krrong Oct 4, 2023
6bc1833
refactor: 이미지뷰 marginTop 수정
krrong Oct 4, 2023
4a33dae
Merge branch 'dev_android' of https://github.com/woowacourse-teams/20…
krrong Oct 4, 2023
6485bc1
fix: 버튼 id 수정
krrong Oct 4, 2023
753094c
refactor: 사용하지 않는 함수 삭제
krrong Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 3 additions & 34 deletions android/app/src/main/java/com/now/naaga/presentation/upload/UploadActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import com.now.naaga.R
import com.now.naaga.data.firebase.analytics.AnalyticsDelegate
import com.now.naaga.data.firebase.analytics.DefaultAnalyticsDelegate
import com.now.naaga.data.firebase.analytics.UPLOAD_OPEN_CAMERA
import com.now.naaga.data.firebase.analytics.UPLOAD_SET_COORDINATE
import com.now.naaga.data.throwable.DataThrowable
import com.now.naaga.databinding.ActivityUploadBinding
import com.now.naaga.presentation.beginadventure.LocationPermissionDialog
Expand Down Expand Up @@ -97,7 +96,7 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
UploadStatus.PENDING -> { changeVisibility(binding.lottieUploadLoading, View.VISIBLE) }
UploadStatus.FAIL -> {
changeVisibility(binding.lottieUploadLoading, View.GONE)
shortToast(MESSAGE_FAIL_UPLOAD)
shortToast(getString(R.string.upload_fail_submit))
}
}
}
Expand All @@ -106,14 +105,10 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
UploadViewModel.ERROR_STORE_PHOTO -> {
shortToast(getString(R.string.upload_error_store_photo_message))
}

UploadViewModel.ALREADY_EXISTS_NEARBY -> {
shortToast(getString(R.string.upload_error_already_exists_nearby_message))
}

UploadViewModel.ERROR_POST_BODY -> {
shortToast(getString(R.string.upload_error_post_message))
}
UploadViewModel.ERROR_POST_BODY -> { shortToast(getString(R.string.upload_error_post_message)) }
}
}
}
Expand All @@ -140,11 +135,7 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
val fusedLocationClient = LocationServices.getFusedLocationProviderClient(this)
fusedLocationClient.getCurrentLocation(PRIORITY_HIGH_ACCURACY, createCancellationToken())
.addOnSuccessListener { location ->
if (location != null) {
val coordinate = getCoordinate(location)
binding.tvUploadPhotoCoordinate.text = coordinate.toText()
viewModel.setCoordinate(coordinate)
}
location.let { viewModel.setCoordinate(getCoordinate(location)) }
}
.addOnFailureListener { }
}
Expand Down Expand Up @@ -178,18 +169,10 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
logClickEvent(getViewEntryName(it), UPLOAD_OPEN_CAMERA)
checkCameraPermission()
}

binding.ivUploadPhoto.setOnClickListener {
logClickEvent(getViewEntryName(it), UPLOAD_OPEN_CAMERA)
checkCameraPermission()
}
binding.ivUploadPhotoCoordinate.setOnClickListener {
logClickEvent(getViewEntryName(it), UPLOAD_SET_COORDINATE)
checkLocationPermission()
}
binding.ivUploadClose.setOnClickListener {
finish()
}
binding.btnUploadSubmit.setOnClickListener {
if (isFormValid().not()) {
shortToast(getString(R.string.upload_error_insufficient_info_message))
Expand All @@ -211,14 +194,6 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
cameraLauncher.launch(null)
}

private fun checkLocationPermission() {
if (checkSelfPermission(Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_DENIED) {
LocationPermissionDialog().show(supportFragmentManager, TAG_LOCATION_DIALOG)
} else {
setCoordinate()
}
}

private fun setImage(bitmap: Bitmap) {
binding.ivUploadCameraIcon.visibility = View.GONE
binding.ivUploadPhoto.setImageBitmap(bitmap)
Expand Down Expand Up @@ -259,19 +234,13 @@ class UploadActivity : AppCompatActivity(), AnalyticsDelegate by DefaultAnalytic
return viewModel.isFormValid()
}

private fun Coordinate.toText(): String {
return "$latitude, $longitude"
}

companion object {
private val requestPermissions = listOf(
Manifest.permission.ACCESS_FINE_LOCATION,
Manifest.permission.ACCESS_COARSE_LOCATION,
Manifest.permission.CAMERA,
)

private const val MESSAGE_FAIL_UPLOAD = "장소등록에 실패했어요!"

val contentValues = ContentValues().apply {
put(MediaStore.Images.Media.DISPLAY_NAME, "ImageTitle")
put(MediaStore.Images.Media.MIME_TYPE, "image/jpeg")
Expand Down
7 changes: 2 additions & 5 deletions android/app/src/main/java/com/now/naaga/presentation/upload/UploadViewModel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ class UploadViewModel @Inject constructor(

val name = MutableLiveData<String>()

val description = MutableLiveData<String>()

private val _successUpload = MutableSingleLiveData<UploadStatus>()
val successUpload: SingleLiveData<UploadStatus> = _successUpload

Expand All @@ -43,8 +41,7 @@ class UploadViewModel @Inject constructor(
}

fun isFormValid(): Boolean {
return (imageUri != URI_EMPTY) && (_coordinate.value != null) &&
(name.value != null) && (description.value != null)
return (imageUri != URI_EMPTY) && (_coordinate.value != null) && (name.value != null)
}

fun postPlace() {
Expand All @@ -54,7 +51,7 @@ class UploadViewModel @Inject constructor(
runCatching {
placeRepository.postPlace(
name = name.value.toString(),
description = description.value.toString(),
description = "",
coordinate = coordinate,
image = imageUri,
)
Expand Down
55 changes: 55 additions & 0 deletions android/app/src/main/res/drawable/bg_button.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="320dp"
android:height="60dp"
android:viewportWidth="320"
android:viewportHeight="60">
<path
android:pathData="M12,0L308,0A12,12 0,0 1,320 12L320,48A12,12 0,0 1,308 60L12,60A12,12 0,0 1,0 48L0,12A12,12 0,0 1,12 0z"
android:fillColor="#FFFDBA"/>
<path
android:pathData="M26.02,0L308,0A12,12 0,0 1,320 12L320,48A12,12 0,0 1,308 60L26.02,60A12,12 0,0 1,14.02 48L14.02,12A12,12 0,0 1,26.02 0z"
android:fillColor="#FEFA1D"/>
<path
android:pathData="M0,14.98C0,9.9 3.2,5.37 7.98,3.67L13.43,1.74C14.71,1.28 16.07,1.04 17.44,1.04H308C314.63,1.04 320,6.42 320,13.04V48C320,54.63 314.63,60 308,60H12C5.37,60 0,54.63 0,48V14.98Z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="160"
android:startY="1.04"
android:endX="160"
android:endY="60"
android:type="linear">
<item android:offset="0" android:color="#FFFEFA1D"/>
<item android:offset="0.05" android:color="#FFFFD50C"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M0,31.06h320v28.92h-320z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="160"
android:startY="31.06"
android:endX="160"
android:endY="59.98"
android:type="linear">
<item android:offset="0" android:color="#FFFFD50C"/>
<item android:offset="0.07" android:color="#FFFFB70A"/>
</gradient>
</aapt:attr>
</path>
<path
android:pathData="M2.09,55.83L317.91,55.83A2.09,2.09 0,0 1,320 57.91L320,57.91A2.09,2.09 0,0 1,317.91 60L2.09,60A2.09,2.09 0,0 1,0 57.91L0,57.91A2.09,2.09 0,0 1,2.09 55.83z">
<aapt:attr name="android:fillColor">
<gradient
android:startX="160"
android:startY="55.83"
android:endX="160"
android:endY="60"
android:type="linear">
<item android:offset="0" android:color="#FFFFB80B"/>
<item android:offset="0.52" android:color="#C6DA8002"/>
</gradient>
</aapt:attr>
</path>
</vector>
154 changes: 55 additions & 99 deletions android/app/src/main/res/layout/activity_upload.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,40 @@
app:lottie_loop="true"
app:lottie_rawRes="@raw/simple_loading" />

<ImageView
android:id="@+id/iv_upload_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:paddingHorizontal="20dp"
android:paddingVertical="@dimen/space_default_medium"
android:src="@drawable/ic_arrow"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/tv_upload_activity_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/upload_title"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="@id/iv_upload_back"
app:layout_constraintStart_toEndOf="@id/iv_upload_back"
app:layout_constraintTop_toTopOf="@id/iv_upload_back" />

<ImageView
android:id="@+id/iv_upload_photo"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="@dimen/space_default_large"
android:background="@drawable/rect_radius_small"
android:backgroundTint="@color/white"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@id/tv_upload_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
app:layout_constraintTop_toBottomOf="@id/tv_upload_activity_title" />

<ImageView
android:id="@+id/iv_upload_camera_icon"
Expand All @@ -55,127 +78,60 @@
app:layout_constraintStart_toStartOf="@id/iv_upload_photo"
app:layout_constraintTop_toTopOf="@id/iv_upload_photo" />

<EditText
android:id="@+id/et_upload_photo_title"
android:layout_width="0dp"
<TextView
android:id="@+id/tv_upload_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/space_default_large"
android:layout_marginTop="@dimen/space_default_medium"
android:autofillHints="no"
android:ellipsize="end"
android:hint="@string/upload_photo_title"
android:inputType="text"
android:maxLines="1"
android:text="@={viewModel.name}"
android:textAlignment="textStart"
android:layout_marginTop="@dimen/space_default_large"
android:text="@string/upload_photo_title"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/iv_upload_photo"
tools:text="선정릉 돌담길" />

<ImageView
android:id="@+id/iv_upload_photo_coordinate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/space_default_medium"
android:src="@drawable/ic_coordinate"
app:layout_constraintEnd_toStartOf="@id/tv_upload_photo_coordinate"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/et_upload_photo_title" />

<TextView
android:id="@+id/tv_upload_photo_coordinate"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/rect_radius_small"
android:backgroundTint="@color/white"
android:fontFamily="@font/pretendard_medium"
android:gravity="center"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="@id/iv_upload_photo_coordinate"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toEndOf="@id/iv_upload_photo_coordinate"
app:layout_constraintTop_toTopOf="@id/iv_upload_photo_coordinate"
tools:text="35.123, 127.345" />
app:layout_constraintTop_toBottomOf="@id/iv_upload_photo" />

<View
android:id="@+id/v_upload_divide_line_1"
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_marginTop="@dimen/space_default_large"
android:background="@color/black"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/tv_upload_photo_coordinate" />
android:layout_marginHorizontal="@dimen/space_default_large"
android:layout_marginTop="@dimen/space_default_medium"
android:background="@color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_upload_title" />

<TextView
android:id="@+id/tv_upload_description"
<EditText
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[P5]
android:background="@null" 를 추가해서 EditText의 밑줄을 없애는 건 어떻게 생각하시나요?!
밑줄을 없애면 아래의 그림처럼 보인답니다! 이건 단순 제 제안이니 크롱이 원하는 걸로 하시면 됩니다!
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반영했어요!
다만, 유저가 글자를 입력하는 곳이 어디인지 모르지는 않을까.. 조금 걱정이긴합니다! 그래서 hint를 조금 수정했어요
사용자 유치를 열심히 해서 피드백을 반영해보도록 하죠!

android:id="@+id/et_upload_place_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/space_default_large"
android:fontFamily="@font/pretendard_bold"
android:text="@string/upload_description"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/v_upload_divide_line_1" />

<EditText
android:id="@+id/et_upload_photo_description"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="@dimen/space_default_medium"
android:autofillHints="no"
android:background="@drawable/rect_radius_small"
android:backgroundTint="@color/white"
android:fontFamily="@font/pretendard_medium"
android:gravity="top"
android:hint="@string/upload_photo_description"
android:ellipsize="end"
android:hint="@string/upload_photo_title_hint"
android:textColorHint="@color/white"
android:inputType="text"
android:padding="@dimen/space_default_medium"
android:text="@={viewModel.description}"
app:layout_constraintBottom_toTopOf="@id/v_upload_divide_line_2"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/tv_upload_description"
app:layout_constraintVertical_chainStyle="spread" />

<View
android:id="@+id/v_upload_divide_line_2"
android:layout_width="0dp"
android:layout_height="3dp"
android:layout_marginTop="@dimen/space_default_large"
android:background="@color/black"
app:layout_constraintBottom_toTopOf="@id/btn_upload_submit"
app:layout_constraintEnd_toEndOf="@id/et_upload_photo_title"
app:layout_constraintStart_toStartOf="@id/et_upload_photo_title"
app:layout_constraintTop_toBottomOf="@id/et_upload_photo_description" />

<Button
android:maxLines="1"
android:text="@={viewModel.name}"
android:textAlignment="textEnd"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="@id/v_upload_divide_line_1"
app:layout_constraintStart_toStartOf="@id/v_upload_divide_line_1"
app:layout_constraintTop_toBottomOf="@id/tv_upload_title"/>

<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btn_upload_submit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/space_default_large"
android:layout_marginTop="@dimen/space_default_large"
android:layout_marginBottom="@dimen/space_default_large"
android:fontFamily="@font/pretendard_bold"
android:background="@drawable/bg_button"
android:text="@string/upload_submit"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/v_upload_divide_line_2" />

<ImageView
android:id="@+id/iv_upload_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_close" />
app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
Loading
Loading