MotionLayout Знакомство и применение

Павел Апановский, Сбертех – MOSDROID #13 Aluminium

На Google I/O '18 был представлен новый механизм работы с анимацией в Android - MotionLayout. Разберем, что он из себя представляет, как им пользоваться, что скрывается под капотом, да и нужен ли он в проекте?

Transcript

1. MotionLayout Павел Апановский Знакомство и применение !1
2. О себе Павел Апановский Android разработчик Сбербанк Онлайн t.me/PApanovskiy https://www.linkedin.com/in/pavel-apanovskiy/ https://github.com/Pipboy200011 !2
3. Что ждет нас сегодня: - Знакомство с MotionLayout - MotionScene - Custom attributes - KeyFrames - MotionLayout и старые знакомые - Жизнь на глубине - Метрики, выводы !3
4. Знакомство с MotionLayout !4
5. Знакомство с MotionLayout !5
6. Знакомство с MotionLayout «This Layout supports transitions between constraint sets defined in MotionScenes» «A MotionLayout is a ConstraintLayout which allows you to animate layouts between various states» min API 18 !6
7. Знакомство с MotionLayout !7
8. Знакомство с MotionLayout MotionLayout MotionScene ConstraintSet Transition KeyFrameSet !8
9. MotionScene !9
10. MotionScene <android.support.constraint.motion.MotionLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene_example_first" app:showPaths="true"> <ImageView android:id="@+id/motion_view" android:layout_width="@dimen/size_big_x" android:layout_height="@dimen/size_big_x" android:contentDescription="@null" android:src="@drawable/ic_r2d2" /> </android.support.constraint.motion.MotionLayout> app:layoutDescription="@xml/motion_scene_example_first" !10 res/xml
11. MotionScene <MotionScene xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@layout/example_first_end" motion:constraintSetStart="@layout/example_first_start" motion:duration="1000"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@+id/motion_view" motion:touchAnchorSide="right"/> </Transition> </MotionScene> !11
12. MotionScene !12
13. MotionScene <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/motion_view" android:layout_width="@dimen/size_big_x" android:layout_height="@dimen/size_big_x" android:layout_marginStart="@dimen/size_small" android:background="@color/colorAccent" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"/> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/motion_view" android:layout_width="@dimen/size_big_x" android:layout_height="@dimen/size_big_x" android:layout_marginEnd="@dimen/size_small" android:background="@color/colorAccent" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"/> </ConstraintSet> !13 MotionScene ConstraintSet
14. Custom attributes !14
15. Custom attributes <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000" motion:interpolator="linear"> motion:interpolator="linear" !15 <ConstraintSet android:id="@+id/start"> <Constraint <!—…—> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint <!—…—> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet> MotionScene ConstraintSet CustomAttribute
16. Custom attributes !16
17. Custom attributes <android.support.constraint.utils.ImageFilterView android:id="@+id/image_filter_view" android:layout_width="@dimen/size_big" android:layout_height="@dimen/size_big" android:src="@drawable/ic_death_star_with_background" app:altSrc="@drawable/ic_millennium_falcon_with_background" /> !17
18. Custom attributes <CustomAttribute motion:attributeName="crossfade" motion:customFloatValue="0" /> CustomAttribute motion:attributeName="crossfade" motion:customFloatValue="1" /> !18 MotionScene ConstraintSet CustomAttribute
19. KeyFrames !19
20. KeyFrames <KeyFrameSet> <KeyPosition motion:framePosition="30" motion:keyPositionType="parentRelative" motion:percentY="0.20" motion:target="@id/motion_view"/> <KeyPosition motion:framePosition="80" motion:keyPositionType="parentRelative" motion:percentY="0.70" motion:target="@id/motion_view"/> <KeyAttribute android:rotation="45" android:scaleX="1.3" android:scaleY="1.3" motion:framePosition="50" motion:target="@id/motion_view"/> </KeyFrameSet> !20 MotionScene Transition KeyFrameSet
21. MotionLayout в гостях у CoordinatorLayout !21
22. MotionLayout в гостях у CoordinatorLayout public class CollapsibleToolbar extends MotionLayout implements AppBarLayout.OnOffsetChangedListener { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { setProgress((float) -verticalOffset / appBarLayout.getTotalScrollRange()); } @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); ViewParent parent = this.getParent(); if (parent instanceof AppBarLayout) { ((AppBarLayout) parent) .addOnOffsetChangedListener(this); } } !22 setProgress((float) -verticalOffset / appBarLayout.getTotalScrollRange());
23. MotionLayout в гостях у CoordinatorLayout <KeyFrameSet> <KeyPosition motion:framePosition="25" motion:keyPositionType="parentRelative" motion:percentY="1" motion:target="@id/icon_background" /> <KeyPosition motion:framePosition="25" motion:keyPositionType="parentRelative" motion:percentY="1" motion:target="@id/icon" /> </KeyFrameSet> !23
24. MotionLayout в гостях у CoordinatorLayout <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/background" android:layout_width="match_parent" android:layout_height="match_parent" android:alpha="1.0" motion:layout_constraintBottom_toBottomOf="parent" /> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/background" android:layout_width="match_parent" android:layout_height="match_parent" android:alpha="0" motion:layout_constraintBottom_toBottomOf="parent" /> !24
25. MotionLayout в гостях у ViewPager !25
26. MotionLayout в гостях у ViewPager public class ViewPagerHeader extends MotionLayout implements ViewPager.OnPageChangeListener { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { int numPages = 3; setProgress((position + positionOffset) / (numPages - 1)); } !26 setProgress((position + positionOffset) / (numPages - 1));
27. MotionLayout в гостях у ViewPager <Constraint android:id="@id/item" android:layout_width="@dimen/size_big_x" android:layout_height="@dimen/size_big_x" android:layout_marginBottom="8dp" android:layout_marginLeft="20dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintLeft_toLeftOf="parent" /> </ConstraintSet> <Constraint android:id="@id/item" android:layout_width="@dimen/size_big_x" android:layout_height="@dimen/size_big_x" android:layout_marginBottom="8dp" android:layout_marginRight="20dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintRight_toRightOf="parent" /> </ConstraintSet> !27
28. Жизнь на глубине private class DevModeDraw { private static final int DEBUG_PATH_TICKS_PER_MS = 16; float[] mPoints; int[] mPathMode; float[] mKeyFramePoints; public void draw(Canvas canvas, HashMap<View, MotionController> frameArrayList, int duration, int debugPath) { if (frameArrayList != null && frameArrayList.size() != 0) { canvas.save(); Iterator var5 = frameArrayList.values().iterator(); private void drawTicks(Canvas canvas, int mode, int keyFrames, MotionController motionController) { int viewWidth = 0; int viewHeight = 0; private void drawPathRelativeTicks(Canvas canvas, float x, float y) { float x1 = this.mPoints[0]; float y1 = this.mPoints[1]; private void drawPathCartesian(Canvas canvas) { float x1 = this.mPoints[0]; float y1 = this.mPoints[1]; private void drawPathCartesianTicks(Canvas canvas, float x, float y) { float x1 = this.mPoints[0]; float y1 = this.mPoints[1]; private void drawPathScreenTicks(Canvas canvas, float x, float y, int viewWidth, int viewHeight) { float x1 = 0.0F; float y1 = 0.0F; private void drawRectangle(Canvas canvas, MotionController motionController) { this.mPath.reset(); int rectFrames = 50; !28
29. Profile GPU !29
30. implementation ‘com.android.support.constraint:constraint-layout: 2.0.0-alpha2’ !30 Подключение
31. «While we are actively working on this tool, it’s not available yet. It will likely be available once the library reaches stable / beta» © Nicolas Roard !31 MotionLayout tools
32. Выводы !32 Плюсы: • Мощный инструмент для работы с анимацией переключения сцен • Визуальный редактор • Min API 18 Минусы: • MotionLayout - alpha • Визуальный редактор - alpha
33. Десерт !33
34. Полезные ссылки https://developer.android.com/reference/android/ support/constraint/motion/MotionLayout https://medium.com/google-developers/introduction- to-motionlayout-part-i-29208674b10d https://github.com/googlesamples/android- ConstraintLayoutExamples https://github.com/Pipboy200011/ MotionLayoutLecture https://youtu.be/ytZteMo4ETk !34 Официальная документация Medium - Nicolas Roard Sample - Google Sample - Я :) Google IO