下のgif画像みたいな挙動をどうやって実装するかという話です
ネタ元 : Android: show/hide a view using an animation(stackoverflow)
ポイントは
- View.StartAnimationを使う
- View.setVisibilityでビューの表示/非表示を切り替える
サンプルを書いてみた
activity_main.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="100dp"
>
<!-- このTextViewをピヨっとさせたい -->
<TextView
android:id="@+id/childview"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical"
android:text="child view here!!"
android:fontFamily= "sans-serif-light"
android:textSize="30sp"
android:textColor="#e2f2f8"
android:gravity="center"
android:visibility="gone"
android:background="#17abe1"/>
</LinearLayout>
最小限の実装がこんな感じになる
MainActivity.java
public class MainActivity extends ActionBarActivity {
View containerView;
View childView;
Animation inAnimation;
Animation outAnimation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
containerView = findViewById(R.id.container);
childView = findViewById(R.id.childview);
inAnimation = (Animation) AnimationUtils.loadAnimation(this, R.anim.in_animation);
outAnimation= (Animation) AnimationUtils.loadAnimation(this, R.anim.out_animation);
containerView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// ビューが表示されてるか判定
if(childView.getVisibility() == View.GONE){
// アニメーションしながらViewを表示
childView.startAnimation(inAnimation);
childView.setVisibility(View.VISIBLE);
}
else{
// アニメーションしながらViewを隠す
childView.startAnimation(outAnimation);
childView.setVisibility(View.GONE);
}
}
});
}
}
アニメーションの定義はネタ元にも載ってるけどY座標を上下させるように記述をするとピヨっとした感じになる
in_animation.xml
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="false"
android:fromXDelta="0"
android:fromYDelta="-20%"
android:toXDelta="0"
android:toYDelta="0" />
outのアニメーションもfromとtoを入れ替えた感じにすれば問題ないです
あとたぶん思った感じにならないのでアニメーションさせるViewに対してMarginは取らないほうがいいです
こういうコード毎回書くの面倒なので,ネタ元ではRelativeLayoutを継承してAnimatingRelativeLayoutというクラスにまとめています
Android: show/hide a view using an animation(stackoverflow)