Be simple

”当たり前”が誰かのためになる

MotionLayoutを触ってみた個人的な感想

はじめに

こんにちは!お久し振りです。

だんだん不定期になってきた、zukkeyです。

 

今日は、Twitterで流れてきて興味を持ったGoogle公式のサンプルのMotionLayoutを触ってみたのでその感想を書いていきますー!

 

github.com

 

ググってたらまとまっていた記事を見かけたので、こちらに詳しいことが書いてあった

 

medium.com

 

一応、今回は個人的な感想になります。

伝えたいことは、MotionLayoutスッゲェ!ぬるぬる動く!ってことだけです。

 

DrawerLayout Example

まず始めに気になったのが、DrawerLayoutExampleです。Drawerを開く際にもモーションをつけており、オシャレな感じが僕は好きです。

実際に動かしてみたのが次の通りー!

f:id:rozkey59:20180701204831g:plain

 

下記リンクから持ってきたものですが、レイアウトXmlを読んでみました。

github.com

中身を深く読んでみるとこのモーションを実現するためには、scene_13_menu.xmlをみると良さそう。

 

Motionの定義はres/xmlの位置にやるのが良いみたい。上のMediumに書いてた。

 

MotionSceneタグの中に、Transitionタグを用意してstartとendの対象となる要素をConstraintSetでそれぞれ設定していくみたい。

 

Transitionタグでは遷移のスピードと遷移の方向を定義して、ConstraintSetのなかでどこから遷移して回転するかなどを決めれば実現できる感じですね。

 

 

簡単にMotionを実現することができそう。

 

Side Panel Example

次に気になったのは、横スライドして画面をそのまま縮小しながら要素を表示することができるレイアウトのサンプルです。

 

実際に動かしてみたのが次の通りです。

f:id:rozkey59:20180701204154g:plain

 

またまた、コードを追ってみました。コードの中身は下記リンクから。

github.com

 

MockViewというのが作られたみたい。多分、前からなかったはず。僕が知らないだけかな。

これを使えば、このMotionを実現することができるっぽい。

app:mock_labelBackgroundColor="@android:color/white"

で真ん中のラベルの背景色を変えることができたし、

app:mock_diagonalsColor="@color/colorAccent"

でクロスしてる所の色変わったからこのMockView追加でできるっぽいね。

 

MockViewで囲んで要素とか表示できるのかな??

ちょっと作ってみないとわからないけど、後で試してみる。

 

Complex Motion Example

次に気になったのが、このサンプル。

実際に動かしてみたのが次の通り!

f:id:rozkey59:20180701204504g:plain

今回もまた、コードを追ってみました。

下記リンクを詳しくは参照ですね。

github.com

iボタンがImageViewになっていて、onClickを押した際に、DemoActivityのchangeStateを呼んでいるんですよね。

で、changeStateでは何をやっているかというと、motionLayoutのnullチェックをしてprogressという関数の閾値によって、Transitionのstartとendを呼ぶようにしてる。

progressではTransitionしている間のpositionをみてるみたい。

 

もとのmotion_20_reveal.xmlに戻るとscheneが設定されてて遷移自体の内容はこっちのxmlで定義しているよう。

なんにせよ、クリックした際はstateを変えるのにMotionLayoutのprogressで決めて、実際の内容はMotionScheneタグで囲んだxml内で定義していくみたいですね。

 

おわりに

MotionLayoutが入ったおかげで、遷移のアニメーションとか簡単になったのかな?

アニメーションあんまりわかってないけど・・・

 

見た感じパッと実装に移ることが出来そうなので、個人的に触っていこうかなと思う。

まあ、今日感じたのは、MotionLayout便利そう!触って見てすごいなーと思った。

Mediumに記事があるのでそっちもチェックですねー

あとは、I/Oの動画全然見てないからちょくちょく見ていかなくてはー

毎朝一個ずつ見てくか。今日はこんな感じ。