Hiển thị và ẩn Chế độ xem với hình ảnh động lên / xuống


318

Tôi có một LinearLayoutcái mà tôi muốn hiển thị hoặc ẩn với một Animationcái mà đẩy bố cục lên hoặc xuống bất cứ khi nào tôi thay đổi tầm nhìn của nó.

Tôi đã thấy một vài mẫu ngoài đó nhưng không có mẫu nào phù hợp với nhu cầu của tôi.

Tôi đã tạo hai tệp xml cho hình động nhưng tôi không biết cách khởi động chúng khi tôi thay đổi mức độ hiển thị của a LinearLayout.

Câu trả lời:


639

Với API hoạt hình mới được giới thiệu trong Android 3.0 (Honeycomb), việc tạo ra các hình ảnh động như vậy rất đơn giản.

Trượt Viewxuống một khoảng cách:

view.animate().translationY(distance);

Sau này bạn có thể trượt Viewtrở lại vị trí ban đầu như thế này:

view.animate().translationY(0);

Bạn cũng có thể dễ dàng kết hợp nhiều hình ảnh động. Hoạt hình sau đây sẽ trượt Viewxuống theo chiều cao của nó và làm mờ nó cùng một lúc:

// 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);

Sau đó, bạn có thể làm mờ dần mặt Viewsau ra và trượt trở lại vị trí ban đầu. Chúng tôi cũng đặt một AnimatorListenerđể chúng tôi có thể đặt mức độ hiển thị của mặt Viewsau thành GONEkhi hoạt ảnh kết thúc:

view.animate()
    .translationY(0)
    .alpha(0.0f)
    .setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            view.setVisibility(View.GONE);
        }
    });

1
Tại sao xem không thể nhìn thấy một khi nó đi?
Ram

1
tôi muốn xem động khi nhìn thấy và khi đi. nhưng nếu lần đầu tiên tôi xem .it không thể hiển thị và vị trí của chế độ xem trống
Ram

3
@Ram Bạn đang cố gắng đạt được điều gì bằng cách tạo hình động Viewkhi tầm nhìn của nó được đặt thành View.GONE? Nếu bạn đặt mức độ hiển thị của nó thành bất cứ thứ gì bên cạnh View.VISIBLEthì nó Viewsẽ không hiển thị. Tôi không hiểu những gì bạn đang hỏi. Nếu bạn muốn hoạt hình của mình hiển thị thì đừng đặt mức độ hiển thị của Viewthành View.GONE.
Xaver Kapeller

2
Đối mặt với cùng một vấn đề mà Ram đang phải đối mặt, lần đầu tiên nó hoạt động tốt nhưng từ lần sau khi tôi thực hiện chế độ xem đó ở trạng thái biến mất và cố gắng làm cho chế độ xem đó hiển thị lại, nó sẽ không xuất hiện.
Pankaj kumar

12
@XaverKapeller Tôi nghĩ rằng vấn đề của nhiều người onAnimationEndlà người nghe được gọi mỗi lần cho một hình ảnh động xảy ra nhiều lần, điều đó có nghĩa là nó onAnimationEndcũng được gọi khi chế độ xem được hiển thị, đặt chế độ hiển thị của nó thành Gone, v.v.
oldergod

129

Tôi đã gặp khó khăn để hiểu một câu trả lời được chấp nhận. Tôi cần thêm một chút bối cảnh. Bây giờ tôi đã tìm ra nó, đây là một ví dụ đầy đủ:

nhập mô tả hình ảnh ở đây

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>

Ghi chú

  • Cảm ơn bài viết này đã chỉ cho tôi đi đúng hướng. Nó hữu ích hơn các câu trả lời khác trên trang này.
  • Nếu bạn muốn bắt đầu với chế độ xem trên màn hình, thì đừng khởi tạo nó dưới dạng INVISIBLE.
  • Vì chúng tôi đang làm cho nó hoàn toàn tắt màn hình, nên không cần thiết lập lại INVISIBLE. Tuy nhiên, nếu bạn không hoạt hình hoàn toàn tắt màn hình, thì bạn có thể thêm hoạt hình alpha và đặt mức độ hiển thị với một AnimatorListenerAdapter.
  • Tài liệu hoạt hình tài sản

android: mức độ hiển thị = "vô hình" để khởi tạo hoạt hình xem dưới dạng ẩn
Goodlife

2
Tôi không khuyên bạn nên sử dụng animate.setFillAfter (true); nếu bạn có chế độ xem có thể nhấp trong chế độ xem trượt, nó sẽ không truy cập các sự kiện
HOCiNE BEKKOUCHE 24/03/18

2
Lưu ý rằng nếu không có .setVisibility(View.INVISIBLE);chức năng trượt lên sẽ không hoạt động như mong đợi.
Advait S

Translate Animationdi chuyển quan điểm. Nếu bạn muốn tạo hiệu ứng xem như tỷ lệ của chính nó, hãy sử dụngScaleAnimation anim = new ScaleAnimation(1, 1, 0, 1)
Zohab Ali

33

Bây giờ hình ảnh động thay đổi tầm nhìn nên được thực hiện thông qua Transition APIđó có sẵn trong gói hỗ trợ (androidx). Chỉ cần gọi phương thức TransitionManager.beginDelayedTransition với chuyển tiếp Slide sau đó thay đổi mức độ hiển thị của chế độ xem.

nhập mô tả hình ảnh ở đây

import androidx.transition.Slide;
import androidx.transition.Transition;
import androidx.transition.TransitionManager;

private void toggle(boolean show) {
    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>

Kiểm tra câu trả lời này với một ví dụ chuyển tiếp mặc định và tùy chỉnh.


@akubi vâng, nó phải thế
Aba

1
Một trong những câu trả lời hay nhất và dễ dàng! Cảm ơn!
krisDrOid

chỉ cần lưu ý, điều này đòi hỏiminSdkVersion 21
lasec0203

@ lasec0203 không, các lớp là từ androidxgói. Nó hoạt động tốt trên 21 api trước.
ashakirov

: thumbs_up: điều này đã thoát khỏi lỗi mơ hồ về phương thức mà tôi đã mắc phải
lasec0203

30

Giải pháp dễ nhất: đặt android:animateLayoutChanges="true"trên container giữ quan điểm của bạn.

Để đặt nó vào một số ngữ cảnh: Nếu bạn có bố cục như bên dưới, tất cả các thay đổi về khả năng hiển thị đối với các chế độ xem trong vùng chứa này sẽ được tự động hóa.

<LinearLayout android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    >

    <Views_which_change_visibility>

</LinearLayout>

Bạn có thể tìm thêm chi tiết về điều này trên Thay đổi bố cục hoạt hình - Nhà phát triển Android


Đây là cách dễ nhất nhưng hành vi của nó khác nhau do nhà sản xuất điện thoại và anh ấy thay đổi mã
b2mob

Điều này hoạt hình alpha, không phải vị trí.
Suragch

Vâng, nhưng đó là những gì câu hỏi ban đầu là về nếu tôi hiểu đúng. Nếu bạn muốn làm động các vị trí, bạn có thể sử dụng RecyclerView sử dụng ViewHolders với id ổn định.
Stefan Medack

12

Bạn có thể bắt đầu chính xác Animationkhi khả năng hiển thị của các LinearLayoutthay đổi bằng cách tạo một lớp con mới LinearLayoutvà ghi đè setVisibility()để bắt đầu Animations. Hãy xem xét một cái gì đó như thế này:

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);
    }
}

1
Tôi thực sự thích cách tiếp cận lớp con tốt hơn. Cảm ơn rât nhiều.
MichelReap

1
Đây là một giải pháp tuyệt vời mà tôi sẽ triển khai trong BaseView của mình. Thx cho điều này!
Bram Vandenbussche

1
Vì điều này hoạt động khi hiển thị, khi ẩn, chế độ xem biến mất trước khi có thể nhìn thấy hình ảnh động. Bất kỳ cách giải quyết?
Bernardo

12
@BramVandenbussche Đây là một giải pháp khủng khiếp. Nó làm cho Viewtrách nhiệm cho hình ảnh động của riêng mình mà KHÔNG BAO GIỜ là những gì bạn muốn. Hãy tưởng tượng bạn muốn tạo hiệu ứng Viewkhác biệt trong một phần khác của ứng dụng. Sau đó bạn làm gì? Thêm một lá cờ để không tự động làm sống động tầm nhìn? Phân lớp Viewvà ghi đè setVisibility()để loại bỏ hình ảnh động? Hoặc thậm chí tệ hơn thực hiện setVisibility()với một hình ảnh động khác? Nó chỉ trở nên xấu hơn và xấu hơn từ đó. Đừng sử dụng "giải pháp" này.
Xaver Kapeller

3
Tốt hơn nên gọi nó là AnimatedLinearLayout
Roel

12

Kotlin

Dựa trên câu trả lời của Suragch , đây là một cách thanh lịch bằng cách sử dụng tiện ích mở rộng 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)
}

Và sau đó bất cứ nơi nào bạn muốn sử dụng nó, bạn chỉ cần myView.slideUp()hoặcmyView.slideDown()


Chỉ có lỗi là, nó không cần "fillAfter = true" vì nó chặn khả năng truy cập nhấp chuột của con
Ranjan

Ngoài ra, bạn có thể cần thêm một trình lắng nghe vào hoạt hình slideDown và khiến chế độ xem biến mất trênAnimationEnd.
Manohar Reddy

9
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);
                }
            });
}

10
Các vấn đề với câu trả lời này: 1) Định dạng mã khủng khiếp. 2) Bạn sử dụng một đoạn mã để đăng mã mà thực sự không thể chạy trong trình duyệt. Điều này không chỉ thêm hai nút vô dụng, mà còn phá hủy cú pháp tô sáng. 3) Nó chỉ là một số kết xuất mã ngẫu nhiên mà không có bất kỳ lời giải thích hoặc mục đích. 4) Bạn đang thay đổi mức độ hiển thị trong khi thực hiện một hình ảnh động. Bên cạnh thực tế là đây là mùi mã rõ ràng, điều này cũng sẽ không hoạt động đúng. Thay đổi khả năng hiển thị bắt đầu một quá trình bố trí mới, chỉ sau khi kết thúc hoạt hình thực sự có giá trị để làm việc. Danh sách này cứ lặp đi lặp lại ...
Xaver Kapeller

Tôi đã chỉnh sửa câu trả lời của bạn để sửa định dạng và biến đoạn mã thành một khối mã thực tế. Nhưng bạn phải điền vào phần còn lại ...
Xaver Kapeller

Xin lỗi đã có bạn đời, tôi đã tạo mã từ bạn bởi vì nó không hoạt động tốt với tôi, mã này của tôi hoạt động. Nhưng những thay đổi cần thiết trong cách đăng tôi đồng ý.
Ameen Maheen

@AmeenMaheen Để làm gì setAlpha?
IgorGanapolsky

@ Igor Ganapolsky nó được sử dụng để minh bạch tức là tạo hiệu ứng mờ dần
Ameen Maheen

4

bạn có thể trượt lên và xuống bất kỳ chế độ xem hoặc bố cục nào bằng cách sử dụng mã dưới đây trong ứng dụng 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));
                }

120 là gì? và 0 là gì? Đơn vị nào cho setDuration nếu tôi muốn mã hóa cứng này?
stanley santoso

1
Ở đây 120 và 0 là khoảng cách liên quan đến trục Y nếu bạn đặt mã cứng hơn là gặp sự cố trong màn hình lớn hoặc máy tính bảng, do đó, bạn cần đặt giá trị từ giá trị chuỗi của bạn cho tất cả các thiết bị khác nhau. và thời lượng là thời gian bạn muốn hiển thị hình ảnh động của bố cục .... !!! Xin lỗi vì vốn tiếng anh nghèo của tôi...!
varotariya vajsi

@varotariyavajsi Điều này không thực sự hiển thị / ẩn khả năng hiển thị của chế độ xem.
IgorGanapolsky

xin chào igor ganapolsky tôi biết những điều này ... nó chỉ là dịch chế độ xem theo hướng y, nếu người dùng cần hiển thị lên xuống như một thanh trượt phía dưới thì nó sẽ hoạt động tốt.
varotariya vajsi

4

Sử dụng lớp này:

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;
}
}

3

Sử dụng ObjectAnimator

private fun slideDown(view: View) {
    val height = view.height
    ObjectAnimator.ofFloat(view, "translationY", 0.toFloat(), height.toFloat()).apply {
        duration = 1000
        start()
    }
}

private fun slideUp(view: View) {
    val height = view.height
    ObjectAnimator.ofFloat(view, "translationY", height.toFloat(),0.toFloat()).apply {
        duration = 1000
        start()
    }
}

2
Các ứng dụng nhỏ: Chúng ta có thể sử dụng hằng số View.TRANSLATION_Y thay vì "dịchY" và trong slide Slide ObjectAnimation chúng ta có thể làm .apply {doOnEnd {view.visibility = View.GONE} .......}. Start ()
tashi

0.toFloat()cũng có thể chỉ là0f
styler1972

2

Tôi đã có một trường hợp góc mà chiều cao tầm nhìn của tôi vẫn còn 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);
                    }
                });
    }

}

1

Đây là giải pháp của tôi. Chỉ cần tham khảo quan điểm của bạn và gọi phương thức này:

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();
        }
    });
}

Không cần làm gì khác =)


1
Tại sao bạn cần một GlobalLayoutListener để làm điều này? Tại sao bạn thiết lập tầm nhìn theo một cách kỳ lạ như vậy? Tại sao bạn bao gồm những thứ như một sự chậm trễ bắt đầu không liên quan đến câu hỏi trong câu trả lời của bạn?
Xaver Kapeller

1

Câu trả lời của Suragch trong Kotlin. Điều này làm việc cho tôi.

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
}

}


0

Bạn có thể sử dụng ba dòng mã đơn giản để hiển thị hình ảnh động ...

//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)

            }

0

Với tiện ích mở rộng Kotlin, bạn có thể sử dụng:

enum class SlideDirection{
    UP,
    DOWN,
    LEFT,
    RIGHT
}

enum class SlideType{
    SHOW,
    HIDE
}

fun View.slideAnimation(direction: SlideDirection, type: SlideType, duration: Long = 250){
    val fromX: Float
    val toX: Float
    val fromY: Float
    val toY: Float
    val array = IntArray(2)
    getLocationInWindow(array)
    if((type == SlideType.HIDE && (direction == SlideDirection.RIGHT || direction == SlideDirection.DOWN)) ||
        (type == SlideType.SHOW && (direction == SlideDirection.LEFT || direction == SlideDirection.UP))   ){
        val displayMetrics = DisplayMetrics()
        val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
        windowManager.defaultDisplay.getMetrics(displayMetrics)
        val deviceWidth = displayMetrics.widthPixels
        val deviceHeight = displayMetrics.heightPixels
        array[0] = deviceWidth
        array[1] = deviceHeight
    }
    when (direction) {
        SlideDirection.UP -> {
            fromX = 0f
            toX = 0f
            fromY = if(type == SlideType.HIDE) 0f else (array[1] + height).toFloat()
            toY = if(type == SlideType.HIDE) -1f * (array[1] + height)  else 0f
        }
        SlideDirection.DOWN -> {
            fromX = 0f
            toX = 0f
            fromY = if(type == SlideType.HIDE) 0f else -1f * (array[1] + height)
            toY = if(type == SlideType.HIDE) 1f * (array[1] + height)  else 0f
        }
        SlideDirection.LEFT -> {
            fromX = if(type == SlideType.HIDE) 0f else 1f * (array[0] + width)
            toX = if(type == SlideType.HIDE) -1f * (array[0] + width) else 0f
            fromY = 0f
            toY = 0f
        }
        SlideDirection.RIGHT -> {
            fromX = if(type == SlideType.HIDE) 0f else -1f * (array[0] + width)
            toX = if(type == SlideType.HIDE) 1f * (array[0] + width) else 0f
            fromY = 0f
            toY = 0f
        }
    }
    val animate = TranslateAnimation(
        fromX,
        toX,
        fromY,
        toY
    )
    animate.duration = duration
    animate.setAnimationListener(object: Animation.AnimationListener{
        override fun onAnimationRepeat(animation: Animation?) {

        }

        override fun onAnimationEnd(animation: Animation?) {
            if(type == SlideType.HIDE){
                visibility = View.INVISIBLE
            }
        }

        override fun onAnimationStart(animation: Animation?) {
            visibility = View.VISIBLE
        }

    })
    startAnimation(animate)
}

Ví dụ cho phần mở rộng:

view.slideAnimation(SlideDirection.UP, SlideType.HIDE)//to make it disappear through top of the screen
view.slideAnimation(SlideDirection.DOWN, SlideType.SHOW)//to make it reappear from top of the screen

view.slideAnimation(SlideDirection.DOWN, SlideType.HIDE)//to make it disappear through bottom of the screen
view.slideAnimation(SlideDirection.UP, SlideType.SHOW)//to make it reappear from bottom of the screen

0

Một trong những cách đơn giản:

containerView.setLayoutTransition(LayoutTransition())
containerView.layoutTransition.enableTransitionType(LayoutTransition.CHANGING)
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.