Floating Action Button 애니메이션


Tumblr 어플입니다.

첫번째 사진의 Floating Action Button 을 누르게 되면

Floating Action Button 을 기준으로 (퍼지는 애니메이션이 적용?)

두번째 사진과 같이 전체화면으로 바뀝니다.

구현해보고 싶은데, 어떠한 원리인지 궁금합니다.

이미지 이름이나 설명을 여기에 넣어주세요.

이미지 이름이나 설명을 여기에 넣어주세요.

  • 2016년 06월 01일에 수정됨
    루비와 파이썬을 좋아합니다. 새로운 언어를 배우는것도 좋아해요. 모바일 게임도 조금 만들어 봤습니다.
  • 2016년 03월 20일에 작성됨
    Software Engineer

조회수 444


1 답변


좋아요
2
싫어요
채택취소하기

이런 형태의 뷰는 FloatingActionButton를 커스터마이징해서 만들지는 않을거에요. 대부분은 눈을 속일 수 있는 트릭을 많이 쓸 것 같습니다.

저라면 다음과 같은 방법을 먼저 썼을 거에요. 아마 플로팅 액션 버튼은 CoordinatorLayout 레이아웃 안에 있을 텐데 저라면 제일먼저 저 7개의 아이콘을 CoordinatorLayout에 배치를 해두고 그 위에 FloatingActionButton을 배치해보지 않았을까 해요.

그리고 FloatingActionButton은 사라지게 하고 나머지 아이콘을 배치시키는 거죠. 그런데 여기에서는 배경의 색상이 있고 X 버튼도 있네요. 배경의 색상을 위해서 어쩌면 추가적인 뷰가 하나 더 필요할지도 모르겠네요.

이 아이디어나 다른 아이디어로 프로토타입을 시도해보시고 잘 안되면 방법이나 개선안을 다시 고민해봅시다.

  • 2016년 03월 21일에 작성됨
    모바일 데이터 베이스를 만드는 yet another nit picker.

  • 위 방법대로 시도해볼게요~ 감사합니다    김선우   2016.3.21 13:17     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close