アニメーションを付けるとアプリの見栄えがグッと良くなる事が多い。
(もちろんやりすぎは良くないが。)
そこで、今回は簡単に出来るアニメーションをやってみる。
横に2つ並んだImageViewの左側を非表示にし、右側が詰まるアニメーションを行うようにする。
(もちろんやりすぎは良くないが。)
そこで、今回は簡単に出来るアニメーションをやってみる。
横に2つ並んだImageViewの左側を非表示にし、右側が詰まるアニメーションを行うようにする。
アニメーション無しの実装
まずはアニメーション無しで実装してみよう。
このような画面を用意する。
XMLはこうだ。
これにアニメーションを付ける。
やり方はとても簡単だ。
変更を加える処理の前にTransitionManager.beginDelayedTransition()を呼び出してやるだけでいい。
このメソッドを呼び出した後に再描画されるまでの変更を勝手にアニメーションしてくれる。
先ほどのコードにTransitionManager.beginDelayedTransition()を追加してやろう。
なお、第二引数で好きなトランジションを設定することもできる。
では実行結果を見てみよう。
期待通りの結果を得られた!
まずはアニメーション無しで実装してみよう。
このような画面を用意する。
XMLはこうだ。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/simple_animation_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SimpleAnimationActivity">
<ImageView
android:id="@+id/simple_animation_image1"
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@android:drawable/ic_btn_speak_now" />
<ImageView
android:id="@+id/simple_animation_image2"
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintStart_toEndOf="@+id/simple_animation_image1"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@android:drawable/ic_lock_idle_alarm" />
<ToggleButton
android:id="@+id/simple_animation_toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="ToggleButton"
android:textOff="隠す"
android:textOn="表示する"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
次に動作の実装を行う。 override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_simple_animation)
// トグルボタンのイベントを設定する
simple_animation_toggle.setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener {button, isChecked ->
if (isChecked) {
// 左側のImageViewを隠す
simple_animation_image1.visibility = View.GONE
} else {
// 左側のImageViewを表示する
simple_animation_image1.visibility = View.VISIBLE
}
})
}
これで実行するとこのようになる。これにアニメーションを付ける。
やり方はとても簡単だ。
変更を加える処理の前にTransitionManager.beginDelayedTransition()を呼び出してやるだけでいい。
このメソッドを呼び出した後に再描画されるまでの変更を勝手にアニメーションしてくれる。
先ほどのコードにTransitionManager.beginDelayedTransition()を追加してやろう。
// トグルボタンのイベントを設定する
simple_animation_toggle.setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener {button, isChecked ->
// アニメーションを付ける
TransitionManager.beginDelayedTransition(simple_animation_root_layout)
if (isChecked) {
// 左側のImageViewを隠す
simple_animation_image1.visibility = View.GONE
} else {
// 左側のImageViewを表示する
simple_animation_image1.visibility = View.VISIBLE
}
})
たったこれだけだ。なお、第二引数で好きなトランジションを設定することもできる。
では実行結果を見てみよう。
期待通りの結果を得られた!
コメント