[Kotlin/Android/Project/Solaroid] 진행 상황, RoomDatabs, Fragment & ViewModel, RecyclerView, 향후 일정

진행 상황

 

 

인스타그램 하단 네비게이션 바

현재는 앱의 전체적인 구성 (인스타그램 처럼 하단 네비게이션 바와 연동될 각각의 UI) 을 구상하는 단계이다.

 

현재 폴라로이드 사진이 담길 갤러리를 구상하였고, 이와 관련된 기능이 담긴 패키지(프래그먼트,뷰모델,팩토리,어댑터 등) 를 생성하였다.

솔라로이드 갤러리는 폴라로이드 사진 (=포토티켓이라고 지칭) 을 찍은 뒤 해당 포토티켓들이 갤러리에 모여 사용자가 쉽게 포토티켓을 탐색하고 수정할 수 있는 UI이다. 

 

따라서 여러 포토티켓을 나열 수 있는 리사이클러뷰와 포토티켓을 클릭했을 때 해당 포토티켓에 대한 상세한 설명을 볼 수 있는 디테일, 임시로 포토티켓을 생성할 수 있는 포토티켓 생성 기능을 구현한 프래그먼트를 추가하였다.

 

---

Room Database

database package

• PhotoTicket
  폴라로이드 사진 내용이 구현될 포토티켓 데이터 클래스를 만들고, 해당 데이터 클래스를 엔티티로 만든다. 
  해당 포토티켓 데이터 클래스의 변수에는 id, 사진이 담길 이미지뷰 및 문자열이 담긴다.
  
  

  //변수 photo는 임시로 설정
  @Entity(tableName = "photo_ticket_table")
  data class PhotoTicket(
      @PrimaryKey(autoGenerate = true) var id : Long =0L,
      var photo: Boolean,
      var frontText : String,
      var backText: String,
      var date : String,
  ) {
  
  }​

  
  
  
• 이외에 Dao 클래스와 SolaroidDatabase는 생략.

---

Fragment & ViewModel

 

• SolaroidGallery (with recyclerView)
  
  

  

  solaroidgallery package

  
  
  솔라로이드 갤러리는 여러 포토티켓이 리사이클러뷰를 통해 나열되는 곳이다. 따라서 Fragment내에 리사이클러뷰를 생성하고, adapter를 만든다. 이 후 생성된 포토티켓이 GridLayout으로 나열된다.
  
  
  

  

  SolaroidGallery UI

  
  해당 갤러리에서는 이외에도 포토티켓을 생성하는 프래그먼트(임시)와 포토티켓 아이템뷰를 클릭 시 해당 포토티켓에 대한 디테일한 정보(포토티켓의 생성 날짜, 사용자가 남긴 메모 등)가 나오는 프래그먼트로 이동할 수 있다.
  
  
  • PhotoTicketAdapter
    
    솔라로이드 갤러리 프래그먼트의 리사이클러뷰와 연동될 어댑터. ListAdapter를 상속하며, diffCallback 클래스를 갖추고 있다. viewHolder는 현재 하나의 list_item_solaroid_photo.xml 을 홀드한다. 
    
    

    

    list_item_solaroid_photo.xml

    
    이외에 onClickListener 구현. data binding. -> solaroidDetail fragment로 Navigate
    
    
    

    ---

•  SolaroidCreate (임시)
  

  

  solaroidcreate package

  
  솔라로이드 크리에이트는 포토티켓을 생성하는 프래그먼트로 임시로 포토티켓을 만들어 보기 위해 (갤러리에 데이터베이스와 리사이클러뷰가 잘 구현됐는지 확인) 생성하였다. 본래는 갤러리와는 독립된 프래그먼트에서 포토티켓을 생성할 예정이며, 인스타그램의 사진촬영 이 후 포스팅과 같은 기능으로 구현할 예정이다.
  
  솔라로이드 갤러리 프래그먼트에서 '포토티켓생성' 이라는 버튼을 누르면 해당 프래그먼트로 이동되고, 다음과 같이 (오늘)날짜와 포토티켓의 앞에 쓰여질 글 그리고 뒤에 쓰여질 글을 적을 수 있다. 
  
  

  

  SolaroidCreate UI

  
  
  
  이 후 완료 버튼을 누르면, 포토티켓이 생성되어 데이터베이스로 INSERT 된 후, 다시 SolaroidGallery 프래그먼트로 이동한다.
  
  

  ---

  
  
  
• SolaroidDetail
  
  
  

solaroiddetail package

 

솔라로이드 디테일에서는 솔라로이드 갤러리에서 유저가 선택한 포토티켓에 대한 상세한 정보를 보여준다. 현재 포토티켓 클래스는 이미지, 날짜 정보, 앞면에 쓰일 글(short), 뒷면에 쓰일 글(long)이 담긴 변수들이 있다. 해당 정보는 갤러리에서는 날짜와 이미지밖에 보여지지 않음으로 디테일 프래그먼트에서 나머지 내용을 확인할 수 있다.

SolaroidDetail UI

이처럼 [이미지,날짜,앞에 쓰여진 글]을 보여주는 면,  [뒤에 쓰여진 글]을 보여주는 면을 나타내는 두 개의 view가 있다. 우측 상단의 '회전'을 나타내는 이미지뷰를 클릭 시, 뒷면을 볼 수 있게끔 구현.

 

---

실수 또는 새로 배운 것

 

 

EditText View 와 data binding : editText의 실시간 변화하는 text를 캐치해서 viewModel에서 사용하기.

https://ranseo.tistory.com/267

[Kotlin/Android] EditText View 와 data binding : editText의 실시간 변화하는 text를 캐치해서 viewModel에서 사용

 

 

check your module classpath for missing or conflicting dependencies 에러 해결

https://ranseo.tistory.com/266

[Kotlin/Android/Error] "check your module classpath for missing or conflicting dependencies" 해결

 

viewholder의 list_item과 OnClickListenr 연결 시, 오류 해결

https://ranseo.tistory.com/268

[Kotlin/Android/Error] viewholder의 list_item과 OnClickListenr 연결 시, 오류 해결

 

 

향후 일정

 

• camera 기능을 탑재한 프래그먼트를 통해 찍은 사진을 포토티켓으로 생성 및 database 저장.
• gallery의 리사이클러뷰 span이 유저의 손에 따라서 자유롭게 변형 (span 1~5).