BanApp/BeMyPlant_Frontend

[디자인] 식물 이미지 선택창/ 사용자 이미지 UI 수정

Closed this issue · 3 comments

관련 이슈: #10 Dall-e를 통한 이미지 추출 방식 선정

구현 내용

1. 식물 이미지 (재)선택

  • 피그마 구성
  • UI code작성 (textBox)

2. 사용자 이미지 선택

  • 피그마 구성
  • UI code작성 (textBox, imageView)

@Minjeongc 피그마에 사용자 이미지, 식물 이미지 선택창 2개 그려봤는데 예쁘게 그려지지 않네요…🥹 혹시 시간 남는다면 피그마 손봐주시면 감사할 것 같습니다 ㅠㅠㅜ (제가 뒤이어서 xml 작성하고 화면 연결하겠습니다 !!)
image


식물 이미지, 사용자 이미지 모두 dalle를 사용하여 생성하기로 결정함에 따라 ui, 로직 수정 예정

식물 이미지

  • text를 통해 생성
  • text 미기입시 다음으로 넘어가지 x

사용자 이미지

  • 사진(셀카), text를 통해 생성
  • 사진(셀카) 미기입하여도 정상 동작
  • text 미기입시 다음으로 넘어가지x
  • skip 버튼 클릭 시 기본 이미지로 설정 (😶)

xml해서 cmj3 브랜치에 올렸습니다!
PlantImageSelect, UserImageSelect1, UserImageSelect2 파일입니다!
PlantImageSelect

  • 우선 검색 창은 editText로 구현했는데 문장 형식이 아닌 키워드 2개 만 입력 받을 거면, editText창을 두개 구현해도 될거 같아요!
  • 화면에서 안보이는 구성요소들은 android:visibility="invisible" 로 설정되어 있어 그런거라 visible로 수정해주시면 됩니다!
  • 같은 키워드 내에서 다른 이미지를 원하는 사용자가 있을거 같아 우선 새로고침 버튼으로 설정했습니당😚

UserImageSelect

  • 한 화면에서 구현하면 복잡할거 같아서 우선 두 화면으로 나누었습니다. 갤러리에서 사진 가져오기 + 키워드 입력하기 창(1) , 이미지 생성 후 선택하기 (2) 로 나누었습니다.
  • skip 버튼은 (1) 에만 구현했습니다!_!
  • 만약 이미지가 마음에 들지 않는다면, (아니오 버튼 클릭 시) 다시 1로 갈 수 있도록 navigation 설정하면 될 거 같아요. '예' 버튼을 누른다면 블루투스 연결 화면으로 넘어가게끔 navigation 설정하면 될거 같습니다~!

이미지들은 피그마에 있는 사진들을 사용했고 수정한 화면을 따로 피그마엔 올리지 않았습니다 참고 부탁 드려용 😉

추후 일정은 추석 연휴 이후에 정하는건 어떨,,까요,,?
image
image
image

확인했습니다 ~!!
사실 피그마만 맡기려 했는데, 코드까지 작성해주셨네요.,... 최고....
fragment로 3 화면 잘 구성해주셨습니다 !
특히 invisible로 설정해서 조건에 따라 구성요소가 보이도록 코드 작성하도록 설정해주셨군요, 감사합니다 !! 짱 bbb
좋습니다 이후 계획은 추석 이후에 세워 봅시다 ~! 추석 잘 보내세요 ~!!