Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アニメーション実装の新しい選択肢 MotionLayoutが中々便利で期待できそう / MotionLayout is useful and can be expected

Dais-33
May 15, 2019

アニメーション実装の新しい選択肢 MotionLayoutが中々便利で期待できそう / MotionLayout is useful and can be expected

2018年のGoogleIO でMotionLayoutについての発表がありましたが、まだまだalpha版で利用者が少ないと感じています。
今回、私が業務の都合でMotionLayoutを知り、その便利さを知ったので、それを簡単に紹介します。

Dais-33

May 15, 2019
Tweet

More Decks by Dais-33

Other Decks in Technology

Transcript

  1. • ConstraintLayoutを継承したView • 異なる複数のシーンを定義する事で両シーン間のアニメーショ ンを提供してくれる • ConstraintLayoutのバージョン2から提供される 5 dependencies {

    // androidX implementation 'androidx.appcompat:appcompat:2.0.0-alpha3’ // そうでない implementation 'com.android.support.constraint:constraint- layout:2.0.0-alpha3' }
  2. 6 <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"

    /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" /> </ConstraintSet>
  3. 7 <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"

    /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" /> </ConstraintSet>
  4. 8 <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"

    /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" /> </ConstraintSet>
  5. 今までは、⾯倒な計算を⾏い 結構な量のコードを書かなければならなかった それが⼀つのxmlで済むようになった 14 <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start">

    <OnSwipe motion:dragDirection="dragDown" motion:touchAnchorId="@id/button" motion:touchAnchorSide="bottom" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintStart_toStartOf="parent" /> </ConstraintSet> </MotionScene>