Fragment 트랜지션 쉽게 적용하기

이 글은 Fragment에서 멋진 전환 효과를 적용하기 위한 글로 간단하지만 알아두면 쉽게 적용 할 수 있는 부분에 대해 다루려고 합니다. 얼마전 Chris Banes가 좀 더 멋진 장면 효과를 구현한 ColumnedChangeBounds 코드도 공개하였기 때문에 어떻게 사용할 수 있을지에 대해 알아 보겠습니다.

일반적으로 Fragment전환시 아무런 전환 효과를 주지 않습니다. commit과 동시에 컨텐츠 화면이 심심하게 바뀝니다. Fragment도 Activity에서 처럼 전환 효과를 주기위해서는 sharedElementViews를 이용하여 전환하고 싶은 View를 추가하면 됩니다. 그리고 트랜잭션 최적화 작업을 위해 setReorderingAllowed()속성을 허용합니다.

위의 코드에서 addSharedElement를 통해 현재 보여지고 있는 View에 각각 전환될 이름을 부여 해줍니다. 그럼 Fragment가 전환된 View에 해당 전환된 이름의 View를 찾아 트랜지션 됩니다.


문제점

새로운 Fragment가 생성되면 데이터를 가져오거나 이미지를 불러오고 레이아웃을 구성하고 그리는 시간이 걸리기 때문에 전환 효과는 자연스럽지 않습니다. 이런 구성을 하는 동안 애니메이션이 끝나게 되는 경우 아무런 효과를 보지 못할 수 있습니다. 그렇기 때문에 장면 효과를 데이터나 뷰를 구성하기 전까지 지연할 필요가 있습니다.

postponeEnterTransition(), startPostponedEnterTransition()을 이용하면 장면 효과를 지연하고 시작할 수 있습니다. 우리는 뷰가 그려진다는 사실을 OnPreDrawListener를 통해 인지 할 수 있습니다. 최근에 지원된 코틀린 라이브러리 KTX를 이용한다면 OnPreDrawListener대신 doOnPreDraw를 통해 쉽게 콜백 받을 수 있습니다.

이제 Fragment 전환 효과를 위한 준비는 모두 끝났습니다. 어떻게 트랜지션이 이루어 질지에 대한 정의만 해주면 되는데 기본적으로 몇가지를 지원해는데 Bounds가 변경되기 때문에 ChangeBounds() 트랜지션을 설정 하도록 하겠습니다.

좀 더 멋진 효과를 보기위해서는 Chris Banes과 같이 ColumnedChangeBounds를 직접 구현하면 됩니다. 이 글에서 구현된 모든 코드는 https://github.com/kmshack/FragmentTransitions 에 공개됩니다.

Support Library 28.0.0 alpha1에 추가된 BottomAppBar

지난 주 Google은 Android P 프리뷰를 발표하면서 디자인 서포트 라이브러리도 새로운 알파버전(com.android.support:design:28.0.0-alpha1)을 공개하였습니다. 이 새로운 버전의 라이브러리에는 MaterialButton, MaterialCardView, Chips 및 BottomAppBar에 대한 레이아웃이 포함되어있습니다.

툴바를 확장한 BottomAppBar는 큰기기의 화면을때 사용자가 엄지손가락으로 버튼에 접근하지 못하는것에 대한 절충안으로 자용자에게 편의성을 제공하기위해 3가지의 방법을 지원합니다.

FloatingActionButton의 app:fabCradleVerticalOffset 속성을 이용하면 반원을 배치 시킬 수 있습니다. app:fabAlignmentMode 속성을 이용하여 CENTER 또는 END로 위치를 변경 할 수 있습니다. 런타임시 이 두개의 속성을 변경하면 멋진 애니메이션으로 위치를 변경해줍니다.

아주 쉽게 사용할 수 있습니다. CoordinatorLayout에 BottomAppBar와 FloatingActionButton을 배치하고 FloatingActionButton의 layout_anchor 속성을 BottomAppBar의 참조 ID로 지정하면 됩니다.

 

몇가지 주의 사항:

  • Toolbar를 확장하여 BottomAppBar를 구현하였지만 setSupportActionBar()를 호출하면 중단됩니다.
  • 배경식을 변경하기위해 android:background대신 app:backgroundTint를 호출 해야 합니다.
  • setTitle, setSubTitle은 재정의되고 비어있기때문에 아무런 작동을 하지 않습니다.

 

Android P 프리뷰를 발표하면서 공개한 알파버전의 라이브러리인 만큼 아직 바뀔 부분이 많습니다. 뭔가 좀 어색해 보이면서도 안드로이드 스럽지않지 않지만 사용자의 접근성을 개선하기에는 좋아 보입니다. 앞으로 어떻게 바껴갈지 지켜볼만 하네요.

 

그리고 알파버전에 들어 있는 추가 레이아웃에 대해 간단하게 언급 하자면..

Chip, ChipGroup

키워드나 태그를 하나씩 보여주는 태그뷰이며 그룹으로 관리가 가능하며 다양한 스타일(Action, Filfer, Choice)를 기본으로 제공합니다. singleSelection속성을 이용하면 그룹중에 하나만 선택 할 수있는 기능도 지원합니다.

MaterialCardView

CardView의 확장버전이며 strokeColor/StrokeWidth 속성이 추가 되었습니다.

MaterialButton

기본 Button에서 cornerRadius를 지원하여 라운드 처리가 가능하며 아이콘을 추가 할 수 있는 속성이 추가 되었습니다.