勇者を育てるMotionLayout ver1

android

基本理解

公式リファレンスより

This Layout supports transitions between constraint sets defined in MotionScenes A MotionLayout is a ConstraintLayout which allows you to animate layouts between various states. Note: MotionLayout is available as a support library that you can use on Android systems starting with API level 18 (JellyBean MR2). MotionLayout links to and requires a MotionScene file. The file contains one top level tag "LayoutDescription"

  • ConatraintLayoutのサブクラスで、MotionSceneで定義された開始と終了のconstraintの間を保管してくれるlayoutである
  • MotionLayoutのapp:layoutDescription にMotionSceneを定義したfileを設定する
  • API level 18から使用可能

基本設定

セットアップ

app/build.gradleの設定

dependencies {
    ...
    implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha1'
}

サンプル

f:id:atsumo:20180719160202g:plain

コードはこちらに上がってます。GitHub - atsumo/motionlayout-sample: motion layout sample code

MotionLayout

Sample1Activity.kt

package com.github.atsumo.motionlayout_sample

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class Sample1Activity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_sample1)
  }
}

activity_sample1.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/motion_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_01"
    tools:context=".Sample1Activity"
    >

  <Button
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Animation Start"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      />

  <ImageView
      android:id="@+id/target"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@color/colorAccent"
      />
</android.support.constraint.motion.MotionLayout>

MotionScene

xml/scene_01.xml

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

  <Transition
      motion:constraintSetEnd="@+id/motion_end_setting"
      motion:constraintSetStart="@+id/motion_start_setting"
      motion:duration="1000"
      motion:interpolator="easeInOut"
      >
    <OnClick motion:target="@+id/button"/>
    <OnSwipe
        motion:dragDirection="dragRight"
        motion:touchAnchorId="@id/target"
        motion:touchAnchorSide="bottom"/>
  </Transition>

  <ConstraintSet
      android:id="@+id/motion_start_setting">
    <Constraint
        android:id="@+id/target"
        android:layout_width="100dp"
        android:layout_height="100dp"
        motion:layout_constraintBottom_toBottomOf="parent"
        motion:layout_constraintRight_toRightOf="parent"
        tools:ignore="DuplicateIds"/>
  </ConstraintSet>

  <ConstraintSet
      android:id="@+id/motion_end_setting">
    <Constraint
        android:id="@+id/target"
        android:layout_width="100dp"
        android:layout_height="100dp"
        motion:layout_constraintLeft_toLeftOf="parent"
        motion:layout_constraintTop_toTopOf="parent"
        tools:ignore="DuplicateIds"/>
  </ConstraintSet>
</MotionScene>

参考