MiTweet 개발일지 2

개발일지는 하루마다 쓰는 게 아니라 기능을 추가할 때마다 쓰려고 한다. 어제 개발일지를 작성하지 않은 이유도 그와 같다. 원래 타임라인을 불러오는 기능을 개발하려 했는데, 아예 트윗 작성 기능을 완성해도 좋을 것 같다는 생각이 들었다.

트윗 작성 화면 제작

메인 화면에 있던 입력 창을 지우고, 오른쪽 하단의 버튼을 눌러서 트윗 작성 화면으로 넘어가게 만들었다. 작성 화면은 Activity로 구현했다.

이 버튼

버튼을 누르면 화면이 나타난다. 화면은 크게 상태 정보, 트윗 작성, 미디어 선택의 세 부분으로 나눌 수 있다. 상태 정보에는 프로필 이미지와 계정 이름, @ 아이디를 보이게 했다. 참고로 twitter4j에서는 userId가 아니라 screenName에 접근해야 @로 시작하는 아이디를 얻을 수 있다. userId는 사용자마다 부여된 고유번호인 듯 하다.

나름 깔끔하게 만들려고 노력함

일단 텍스트 트윗은 예전과 같은 코드로 작성할 수 있다.

사진 업로드 - 커스텀 갤러리 구현

이제는 사진을 업로드할 수 있게 해야 한다. 로드맵을 생각해 보면

 

1. 사진을 선택하는 화면 보여주기
2. 선택한 화면을 입력창 하단에 미리보기 형식으로 보여주기
3. 사진을 (글과 함께) 업로드하기

1번은 트위터 공앱의 방식을 차용하기로 했다. 갤러리 앱으로 들어가서 선택하게 할 수도 있지만, 그러면 선택 과정이 너무 길어질 거 같아 커스텀 갤러리를 만들기로 하였다. RecyclerView를 만들어서 사진을 한 줄에 세 개씩 배치한다. 이때 이미지를 한꺼번에 로딩하지 않고, 필요할 때마다 조금씩 불러오는 방식을 적용했다. 이걸 페이징(Paging)이라고 한다.

 

페이징은 나도 처음이기에 구글링하면서 작성했다.

왼쪽 여백이 부족한 듯

하단의 사진 아이콘을 누르면 RecyclerView가 슥 하고 올라온다. 애니메이션은 recycler_view.animate().translationY(value)로 적용하였다. Y의 변화량을 value로 지정해야 한다.

 

setImageResource() 등으로 사진을 불러오면 성능이 심각하게 저하될 수 있기 때문에 Glide를 이용하여 백그라운드에서 사진을 가져왔다. 너무 큰 사진은 적절히 잘라내기 위해 centerCrop() 옵션을 지정했다. 사진이 선택되었음을 알려주기 위해 각 뷰의 오른쪽 위에 RadioButton을 달았고, 위의 사진에는 나타나 있지 않지만 툴바에 "1개 선택"과 같은 텍스트를 보여주었다. 하나의 트윗당 최대 4개의 사진을 올릴 수 있기 때문에 사진을 최대 4장까지 선택할 수 있게 했다.

 

사진을 선택하면 아래와 같이 미리보기 이미지가 나온다. 미리보기 역시 수평 방향 RecyclerView를 사용하여 구현하였다. 사진을 쉽게 지울 수 있게 하기 위해 가위 표시를 달긴 했는데, 지운 상태를 커스텀 갤러리에도 반영할 방법이 잘 떠오르지 않아서 이 부분은 일단 넘어갔다. 

 

이제 트윗을 올려 보자. 사진 여러 장을 하나의 트윗에 올리려면, 우선 이미지를 업로드한 후 트윗에 이미지의 ID를 추가해야 한다. 대략 이런 식이다.

val mediaIdList = mutableListOf<Long>()
// Upload image first
for (photoItem in params[0]?.photoList!!) {
		twitter?.uploadMedia(File(photoItem.imagePath))?.mediaId?.let {
		mediaIdList.add(it)
	}
}
// Then Upload tweet with media ids
val newTweet = StatusUpdate(content)
newTweet.setMediaIds(*mediaIdList.toLongArray())
twitter?.updateStatus(newTweet)

잘 된다. 사진 업로드는 얼추 완성했다.

TODO

미리보기 사진을 터치하면 사진을 크게 보여주기 - 편집할 수도 있게?

미리보기 목록에서 사진을 지울 수 있게 하기 - 커스텀 갤러리에도 반영해야 함

투표 업로드 기능 구현하기