スライドアップ/ダウンアニメーションでビューを表示および非表示にする
可視性を変更するたびにレイアウトを上または下に押すLinearLayoutを使用して、表示または非表示にするAnimationがあります。
私はそこにいくつかのサンプルを見ましたが、それらのどれも私のニーズに合いません。
アニメーション用に2つのxmlファイルを作成しましたが、LinearLayoutの可視性を変更したときにそれらの開始方法がわかりません。
Android 3.0（Honeycomb）で導入された新しいアニメーションAPIを使えば、そのようなアニメーションを作成するのはとても簡単です。
Viewを距離だけ下にスライドさせる：
view.animate().translationY(distance);
後でViewを元の位置に戻すことができます。
view.animate().translationY(0);
複数のアニメーションを簡単に組み合わせることもできます。次のアニメーションはViewをその高さだけ下にスライドさせて同時にフェードインさせます。
// Prepare the View for the animation
view.setVisibility(View.VISIBLE);
view.setAlpha(0.0f);
// Start the animation
view.animate()
.translationY(view.getHeight())
.alpha(1.0f)
.setListener(null);
その後、Viewをフェードアウトして元の位置に戻すことができます。アニメーションが終了したらAnimatorListenerの可視性をViewに戻すことができるようにGONEも設定します。
view.animate()
.translationY(0)
.alpha(0.0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.GONE);
}
});
私は受け入れられた答えを適用することを理解するのに苦労していました。もう少し文脈が必要でした。私はそれを考え出したので、これは完全な例です：
MainActivity.Java
public class MainActivity extends AppCompatActivity {
Button myButton;
View myView;
boolean isUp;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myView = findViewById(R.id.my_view);
myButton = findViewById(R.id.my_button);
// initialize as invisible (could also do in xml)
myView.setVisibility(View.INVISIBLE);
myButton.setText("Slide up");
isUp = false;
}
// slide the view from below itself to the current position
public void slideUp(View view){
view.setVisibility(View.VISIBLE);
TranslateAnimation animate = new TranslateAnimation(
0, // fromXDelta
0, // toXDelta
view.getHeight(), // fromYDelta
0); // toYDelta
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
// slide the view from its current position to below itself
public void slideDown(View view){
TranslateAnimation animate = new TranslateAnimation(
0, // fromXDelta
0, // toXDelta
0, // fromYDelta
view.getHeight()); // toYDelta
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
public void onSlideViewButtonClick(View view) {
if (isUp) {
slideDown(myView);
myButton.setText("Slide up");
} else {
slideUp(myView);
myButton.setText("Slide down");
}
isUp = !isUp;
}
}
activity_mail.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context="com.example.slideview.MainActivity">
<Button
Android:id="@+id/my_button"
Android:layout_centerHorizontal="true"
Android:layout_marginTop="100dp"
Android:onClick="onSlideViewButtonClick"
Android:layout_width="150dp"
Android:layout_height="wrap_content"/>
<LinearLayout
Android:id="@+id/my_view"
Android:background="#a6e1aa"
Android:orientation="vertical"
Android:layout_alignParentBottom="true"
Android:layout_width="match_parent"
Android:layout_height="200dp">
</LinearLayout>
</RelativeLayout>
ノート
- この記事 のおかげで私を正しい方向に向けることができました。このページの他の答えよりも役に立ちました。
- 画面上のビューから始めたい場合は、それを
INVISIBLEとして初期化しないでください。 - 画面外で完全にアニメートしているので、それを
INVISIBLEに戻す必要はありません。ただし、画面外で完全にアニメーション化していない場合は、アルファアニメーションを追加してAnimatorListenerAdapterを使用して可視性を設定できます。 - プロパティアニメーションドキュメント
最も簡単な解決策：あなたのビューを保持しているコンテナにAndroid:animateLayoutChanges="true"を設定してください。
以下のようなレイアウトがある場合、このコンテナ内のビューに対する表示設定の変更はすべて自動的にアニメートされます。
<LinearLayout Android:id="@+id/container"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:animateLayoutChanges="true"
>
<Views_which_change_visibility>
</LinearLayout>
あなたはこれについての詳細を見つけることができます アニメーションレイアウト変更 - Android Developer
Animationの可視性が変更されたときに正しいLinearLayoutを開始するには、LinearLayoutの新しいサブクラスを作成し、setVisibility()をオーバーライドしてAnimationsを開始します。このようなものを考えてください。
public class SimpleViewAnimator extends LinearLayout
{
private Animation inAnimation;
private Animation outAnimation;
public SimpleViewAnimator(Context context)
{
super(context);
}
public void setInAnimation(Animation inAnimation)
{
this.inAnimation = inAnimation;
}
public void setOutAnimation(Animation outAnimation)
{
this.outAnimation = outAnimation;
}
@Override
public void setVisibility(int visibility)
{
if (getVisibility() != visibility)
{
if (visibility == VISIBLE)
{
if (inAnimation != null) startAnimation(inAnimation);
}
else if ((visibility == INVISIBLE) || (visibility == GONE))
{
if (outAnimation != null) startAnimation(outAnimation);
}
}
super.setVisibility(visibility);
}
}
if (filter_section.getVisibility() == View.GONE) {
filter_section.animate()
.translationY(filter_section.getHeight()).alpha(1.0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
filter_section.setVisibility(View.VISIBLE);
filter_section.setAlpha(0.0f);
}
});
} else {
filter_section.animate()
.translationY(0).alpha(0.0f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
filter_section.setVisibility(View.GONE);
}
});
}
コトリン
Suragch の answer に基づいて、これはView拡張を使ったエレガントな方法です：
fun View.slideUp(duration: Int = 500) {
visibility = View.VISIBLE
val animate = TranslateAnimation(0f, 0f, this.height.toFloat(), 0f)
animate.duration = duration.toLong()
animate.fillAfter = true
this.startAnimation(animate)
}
fun View.slideDown(duration: Int = 500) {
visibility = View.VISIBLE
val animate = TranslateAnimation(0f, 0f, 0f, this.height.toFloat())
animate.duration = duration.toLong()
animate.fillAfter = true
this.startAnimation(animate)
}
そしてそれを使いたいところならどこでもmyView.slideUp()かmyView.slideDown()が必要です。
androidアプリで以下のコードを使用して、ビューやレイアウトを上下にスライドできます。
boolean isClicked=false;
LinearLayout mLayoutTab = (LinearLayout)findViewById(R.id.linearlayout);
if(isClicked){
isClicked = false;
mLayoutTab.animate()
.translationYBy(120)
.translationY(0)
.setDuration(getResources().getInteger(Android.R.integer.config_mediumAnimTime));
}else{
isClicked = true;
mLayoutTab.animate()
.translationYBy(0)
.translationY(120)
.setDuration(getResources().getInteger(Android.R.integer.config_mediumAnimTime));
}
このクラスを使う：
public class ExpandCollapseExtention {
public static void expand(View view) {
view.setVisibility(View.VISIBLE);
final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
view.measure(widthSpec, heightSpec);
ValueAnimator mAnimator = slideAnimator(view, 0, view.getMeasuredHeight());
mAnimator.start();
}
public static void collapse(final View view) {
int finalHeight = view.getHeight();
ValueAnimator mAnimator = slideAnimator(view, finalHeight, 0);
mAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationEnd(Animator animator) {
view.setVisibility(View.GONE);
}
@Override
public void onAnimationStart(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
mAnimator.start();
}
private static ValueAnimator slideAnimator(final View v, int start, int end) {
ValueAnimator animator = ValueAnimator.ofInt(start, end);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int value = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.height = value;
v.setLayoutParams(layoutParams);
}
});
return animator;
}
}
私は私のビューの高さがまだzeroなので、稀なケースがありました...
import Android.animation.Animator;
import Android.animation.AnimatorListenerAdapter;
import Android.view.View;
public final class AnimationUtils {
public static void slideDown(final View view) {
view.animate()
.translationY(view.getHeight())
.alpha(0.f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// superfluous restoration
view.setVisibility(View.GONE);
view.setAlpha(1.f);
view.setTranslationY(0.f);
}
});
}
public static void slideUp(final View view) {
view.setVisibility(View.VISIBLE);
view.setAlpha(0.f);
if (view.getHeight() > 0) {
slideUpNow(view);
} else {
// wait till height is measured
view.post(new Runnable() {
@Override
public void run() {
slideUpNow(view);
}
});
}
}
private static void slideUpNow(final View view) {
view.setTranslationY(view.getHeight());
view.animate()
.translationY(0)
.alpha(1.f)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(View.VISIBLE);
view.setAlpha(1.f);
}
});
}
}
これが私の解決策です。ビューへの参照を取得してこのメソッドを呼び出すだけです。
public static void animateViewFromBottomToTop(final View view){
view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
final int TRANSLATION_Y = view.getHeight();
view.setTranslationY(TRANSLATION_Y);
view.setVisibility(View.GONE);
view.animate()
.translationYBy(-TRANSLATION_Y)
.setDuration(500)
.setStartDelay(200)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(final Animator animation) {
view.setVisibility(View.VISIBLE);
}
})
.start();
}
});
}
他に何もする必要はありません=）
シンプルな3行のコードを使用してアニメーションを表示できます...
//getting the hiding view by animation
mbinding.butn.setOnClickListener {
val SlideOutLeft = AnimationUtils.loadAnimation(this, R.anim.slide_out_left)
simplelayout.visibility = View.INVISIBLE
simplelayout.startAnimation(SlideOutLeft)
val SlideInRight = AnimationUtils.loadAnimation(applicationContext, R.anim.slide_in_right)
animation1.visibility = View.VISIBLE
animation1.startAnimation(SlideInRight)
}
//again unhide the view animation
mbinding.buttn.setOnClickListener {
val SlideInLeft=AnimationUtils.loadAnimation(this,R.anim.slide_in_left)
//set the layout
simplelayout.visibility=View.VISIBLE
simplelayout.startAnimation(SlideInLeft)
val SlideOutRight=AnimationUtils.loadAnimation(this,R.anim.slide_out_right)
animation1.visibility=View.INVISIBLE
animation1.startAnimation(SlideOutRight)
}
可視性の変更アニメーションはサポート（androidx）パッケージで利用可能なTransition APIを通して行われるべきです。 TransitionManager.beginDelayedTransition methodを Slide transitionと呼び出すだけで、ビューの可視性を変更できます。
import androidx.transition.Slide;
import androidx.transition.Transition;
import androidx.transition.TransitionManager;
private void toggle() {
View redLayout = findViewById(R.id.redLayout);
ViewGroup parent = findViewById(R.id.parent);
Transition transition = new Slide(Gravity.BOTTOM);
transition.setDuration(600);
transition.addTarget(R.id.redLayout);
TransitionManager.beginDelayedTransition(parent, transition);
redLayout.setVisibility(show ? View.VISIBLE : View.GONE);
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/parent"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical">
<Button
Android:id="@+id/btn"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="play" />
<LinearLayout
Android:id="@+id/redLayout"
Android:layout_width="match_parent"
Android:layout_height="400dp"
Android:background="#5f00"
Android:layout_alignParentBottom="true" />
</RelativeLayout>
この答え 他のデフォルトおよびカスタムのトランジションの例を確認してください。
KotlinでのSuragchの答え。これは私のために働きました。
class MainActivity : AppCompatActivity() {
var isUp: Boolean = false
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var myView: View = findViewById(R.id.my_view)
var myButton: Button = findViewById(R.id.my_button)
//Initialize as invisible
myView.visibility = View.INVISIBLE
myButton.setText("Slide up")
isUp = false
}
fun View.slideUp(duration: Int = 500){
visibility = View.VISIBLE
val animate = TranslateAnimation(0f, 0f, this.height.toFloat(), 0f)
animate.duration = duration.toLong()
animate.fillAfter = true
this.startAnimation(animate)
}
fun View.slideDown(duration: Int = 500) {
visibility = View.VISIBLE
val animate = TranslateAnimation(0f, 0f, 0f, this.height.toFloat())
animate.duration = duration.toLong()
animate.fillAfter = true
this.startAnimation(animate)
}
fun onSlideViewButtonClick(view: View){
if(isUp){
my_view.slideDown()
my_button.setText("Slide Up")
}
else{
my_view.slideUp()
my_button.setText("Slide Down")
}
isUp = !isUp
}
}