Hiệu ứng mờ dần giữa các bố cục

Question

Theo đối tượng, tôi sẽ tạo lại hiệu ứng mờ dần giữa hai bố cục. Bây giờ tôi đã tình trạng này:

LinearLayout l; 
LinearLayout l2; 

Để chuyển đổi giữa chúng tôi đã sử dụng

l.setVisibility(View.GONE); 
l2.setVisibility(View.VISIBLE); 

Tôi muốn thêm hiệu ứng mờ dần giữa transiction này, làm thế nào tôi có thể làm điều đó?

Answer 1

Sử dụng R.anim.fade_out & .R.anim.fade_in bạn có thể tạo hoạt ảnh thực hiện việc này. Tôi không biết nhiều về điều này bản thân mình nhưng heres một hướng dẫn liên quan đến hình ảnh động trong android: Animation Tutorial

P.S. Hướng dẫn này không phải là của tôi do đó tín dụng không đi ra ngoài với tôi.

Edit:

AnimationSet set = new AnimationSet(true); 

Animation animation = new AlphaAnimation(0.0f, 1.0f); 
animation.setDuration(50); 
set.addAnimation(animation); 

animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,Animation.RELATIVE_TO_SELF, 0.0f, 
Animation.RELATIVE_TO_SELF, -1.0f,Animation.RELATIVE_TO_SELF, 0.0f 
); 
animation.setDuration(100); 
set.addAnimation(animation); 

LayoutAnimationController controller = new LayoutAnimationController(set, 0.5f); 
l.setLayoutAnimation(controller); 

Fade ra Animation

public static Animation runFadeOutAnimationOn(Activity ctx, View target) { 
    Animation animation = AnimationUtils.loadAnimation(ctx,android.R.anim.fade_out); 
    target.startAnimation(animation); 
    return animation; 
} 

Tôi đoán bạn có thể thử một cái gì đó như thế này, tôi copy dán các hình ảnh động từ hướng dẫn, tôi không biết những gì nó làm chính xác như tôi không có kinh nghiệm với phát triển Android. Một ví dụ khác có thể là Example 2

Answer 2

Dưới đây là một giải pháp làm việc để vượt qua phai giữa 2 bố trí:

public class CrossFadeActivity extends Activity { 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.crossfade); 

    final View l1 = findViewById(R.id.l1); 
    final View l2 = findViewById(R.id.l2); 

    final Animation fadeOut = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_out); 
    final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_in); 

    findViewById(R.id.button1).setOnClickListener(new OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      fadeOut.setAnimationListener(new AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 
       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 
        l1.setVisibility(View.GONE); 
       } 
      }); 
      l1.startAnimation(fadeOut); 
      l2.setVisibility(View.VISIBLE); 
      l2.startAnimation(fadeIn); 
     } 
    }); 
    findViewById(R.id.button2).setOnClickListener(new OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      fadeOut.setAnimationListener(new AnimationListener() { 
       @Override 
       public void onAnimationStart(Animation animation) { 
       } 

       @Override 
       public void onAnimationRepeat(Animation animation) { 
       } 

       @Override 
       public void onAnimationEnd(Animation animation) { 
        l2.setVisibility(View.GONE); 
       } 
      }); 
      l2.startAnimation(fadeOut); 
      l1.setVisibility(View.VISIBLE); 
      l1.startAnimation(fadeIn); 
     } 
    }); 
} 
} 

crossfade.xml:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:orientation="vertical" > 

<LinearLayout 
    android:id="@+id/l1" 
    android:layout_width="fill_parent" 
    android:layout_height="300dip" 
    android:orientation="vertical" 
    android:background="@drawable/someimage" 
    > 

    <Button 
     android:id="@+id/button1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Button" /> 

</LinearLayout> 

<RelativeLayout 
    android:id="@+id/l2" 
    android:layout_width="fill_parent" 
    android:layout_height="300dip" 
    android:orientation="vertical" 
    android:background="@drawable/someimage2" 
    android:visibility="gone" 
    > 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Button" 
     android:layout_centerInParent="true" 
     /> 

</RelativeLayout> 

</RelativeLayout> 

đâu L1 và L2 là 2 ví dụ bố trí ngẫu nhiên. Bí quyết là đặt chúng trong XML sao cho chúng chồng lấp nhau (ví dụ: trong RelativeLayout) có thể nhìn thấy/biến mất, thêm người nghe vào hoạt ảnh để chuyển đổi chế độ hiển thị khi kết thúc và đặt chế độ xem phải mờ dần để hiển thị trước hoạt ảnh bắt đầu, nếu không hoạt ảnh sẽ không hiển thị.

Tôi đặt các nút với trình nghe để tự động chuyển đổi hoạt ảnh trong bố cục, vì tôi cần triển khai theo cách đó nhưng trình nghe nhấp có thể là khóa học khác (nếu chỉ có một người dùng nên kết hợp với một số cờ hoặc kiểm tra để biết cách chuyển đổi).

Đây là các tệp hoạt ảnh. Họ phải được lưu trữ trong thư mục res/anim:

fade_in.xml

<?xml version="1.0" encoding="UTF-8"?> 
<alpha xmlns:android="http://schemas.android.com/apk/res/android" 
android:duration="1000" 
android:fillAfter="true" 
android:fromAlpha="0.0" 
android:toAlpha="1.0" /> 

fade_out.xml

<?xml version="1.0" encoding="UTF-8"?> 
<alpha xmlns:android="http://schemas.android.com/apk/res/android" 
android:duration="1000" 
android:fillAfter="true" 
android:fromAlpha="1.0" 
android:toAlpha="0" /> 

UPDATE:

Thay vì sử dụng R.anim.fade_in, bạn có thể sử dụng fade_in mặc định từ API Android (android.R.fade_in):

final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, android.R.anim.fade_in); 

Sử dụng android.R.anim.fade_in, bạn sẽ không cần tạo tệp res/anim/fade_in.xml.

Android có gói có một số hoạt ảnh hữu ích trên android.R.anim: http://developer.android.com/reference/android/R.anim.html

Answer 3

Kể từ android 3.0 bạn có thể sử dụng

android:animateLayoutChanges="true" 

trong một bố cục trong xml và bất kỳ thay đổi nội dung bố trí cụ thể này tại thời gian chạy sẽ rất sôi động. Ví dụ, trong trường hợp của bạn, bạn sẽ cần phải thiết lập thuộc tính này cho cha mẹ cho bố trí mẹ của l và l2 ví dụ

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    tools:context="me.kalem.android.RegistrationActivity" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:animateLayoutChanges="true" 
    android:padding="20dp"> 

    <LinearLayout 
     android:id="@+id/l1" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:visibility="visible"> 

    ........ 

    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/l2" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:visibility="gone"> 

    ........ 

    </LinearLayout> 

</LinearLayout> 

Bây giờ giấu l1 và l2 cho thấy trong thời gian chạy sẽ rất sôi động.