androidでピヨって出てくるviewの実装方法

下のgif画像みたいな挙動をどうやって実装するかという話です

動画(youtube)

ネタ元 : 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)