Animate chế độ hiển thị, GONE và VISIBLE

Question

Vì vậy, im cố gắng để hoạt hình khi tôi thiết lập khả năng hiển thị của một linearlayout với các vật dụng khác, từ GONE đến VISIBLE và ngược lại.Im bằng cách sử dụng togglebuttons để hiển thị và ẩn. Dưới đây là một hình ảnh để hiển thị những gì tôi muốn làm:

tôi có thể hiển thị và ẩn, nhưng im không tuân theo làm thế nào tôi có thể làm động trượt một cách chính xác .... :(

Heres xml của tôi :

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/LinearLayout01" 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:orientation="vertical"> 
<ScrollView 
    android:id="@+id/ScrollView01" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:orientation="vertical"> 
     <!-- TITULO1 --> 
      <LinearLayout 
       android:layout_height="wrap_content" 
       android:layout_width="fill_parent" 
       android:orientation="horizontal" 
       android:background="#848284" 
       android:padding="4px"> 
       <TextView 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:id="@+id/TextView01" 
        android:text="Informação Geral" 
        android:textColor="#FFFFFF" 
        android:gravity="left" 
        android:textStyle="bold" 
        android:singleLine="true" 
        android:ellipsize="end" 
        android:layout_gravity="center_vertical" 
        android:textSize="18px" 
        android:paddingLeft="4px"> 
       </TextView> 
       <LinearLayout 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:layout_gravity="right|center_vertical" android:gravity="right|center_vertical" android:paddingTop="2px"> 
         <ToggleButton 
          android:layout_height="wrap_content" 
          android:layout_width="wrap_content" 
          android:textOff="Expandir" 
          android:textOn="Minimizar" 
          android:id="@+id/mostrar" 
          android:width="80px"> 
         </ToggleButton> 
       </LinearLayout> 

      </LinearLayout> 
      <!--LINHA SEPARADORA--> 
      <View 
       android:id="@+id/View01" 
       android:layout_width="wrap_content" 
       android:background="#B5B5B5" 
       android:layout_height="2px"> 
      </View> 
      <!-- CONTENT INITIALLY HIDDEN (GONE) --> 
      <LinearLayout 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:visibility="gone" 
       android:id="@+id/informgeral" 
       android:orientation="vertical"> 
       <LinearLayout 
        android:id="@+id/LinearLayout01" 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:paddingBottom="5px" 
        android:paddingTop="5px" 
        android:paddingLeft="8px" 
        android:orientation="vertical"> 
        <LinearLayout 
         android:layout_width="fill_parent" 
         android:layout_height="wrap_content" 
         android:orientation="horizontal"> 
         <TextView 
          android:id="@+id/consult_nrprocesso" 
          android:textStyle="bold" 
          android:layout_height="wrap_content" 
          android:layout_weight="1" 
          android:gravity="left" 
          android:ellipsize="end" 
          android:layout_width="wrap_content" 
          android:singleLine="true" 
          android:text="@string/srch_number_proc"/> 
         <TextView 
          android:id="@+id/consult_nrprocessovalue" 
          android:layout_width="0px" 
          android:layout_height="wrap_content" 
          android:layout_weight="1" 
          android:gravity="right" 
          android:singleLine="true" 
          android:ellipsize="end"/> 
        </LinearLayout> 
        <LinearLayout 
         android:layout_height="wrap_content" 
         android:layout_width="fill_parent"> 
         <TextView 
          android:id="@+id/consult_tipoprocinfo" 
          android:text="Numero Atribuido ao Processo" 
          android:layout_height="wrap_content" 
          android:layout_weight="1" 
          android:gravity="left" 
          android:singleLine="true" 
          android:ellipsize="end" 
          android:layout_width="wrap_content" 
          android:textSize="12px"/> 
        </LinearLayout> 
       </LinearLayout> 
       <View 
        android:id="@+id/View01" 
        android:layout_width="wrap_content" 
        android:background="#B5B5B5" 
        android:layout_height="1px"> 
       </View> 
<LinearLayout 
    android:id="@+id/LinearLayout02" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_tipoproc" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/proc_type"/> 
      <TextView 
       android:id="@+id/consult_tipoprocvalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent"> 
    <TextView 
      android:id="@+id/consult_tipoprocinfo" 
      android:text="Variante do Processo em causa" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
<View android:id="@+id/View01" 
     android:layout_width="fill_parent" 
     android:background="#B5B5B5" 
     android:layout_height="1px"> 
</View> 
<LinearLayout 
    android:id="@+id/LinearLayout03" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_etapa" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/srch_task"/> 
      <TextView 
       android:id="@+id/consult_etapavalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content"> 
    <TextView 
      android:id="@+id/consult_etapainfo" 
      android:text="Etapa onde se encontra o processo" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
<View android:id="@+id/View01" 
     android:layout_width="wrap_content" 
     android:background="#B5B5B5" 
     android:layout_height="1px"> 
</View> 
    <LinearLayout 
    android:id="@+id/LinearLayout04" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_criadopor" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/criado_por"/> 
      <TextView 
       android:id="@+id/consult_criadoporvalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content"> 
    <TextView 
      android:id="@+id/consult_criadoporinfo" 
      android:text="Entidade responsável pela criação do Processo." 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
<View android:id="@+id/View01" 
     android:layout_width="wrap_content" 
     android:background="#B5B5B5" 
     android:layout_height="1px"> 
</View> 
<LinearLayout 
    android:id="@+id/LinearLayout05" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_assunto" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/proc_subject"/> 
      <TextView 
       android:id="@+id/consult_assuntovalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content"> 
    <TextView 
      android:id="@+id/consult_assuntoinfo" 
      android:text="Assunto do Processo" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
<View android:id="@+id/View01" 
     android:layout_width="wrap_content" 
     android:background="#B5B5B5" 
     android:layout_height="1px"> 
</View> 
<LinearLayout 
    android:id="@+id/LinearLayout05" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:paddingTop="5px" 
    android:paddingBottom="5px" 
    android:layout_width="fill_parent" 
    android:paddingLeft="8px"> 
    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 
      <TextView 
       android:id="@+id/consult_datainicio" 
       android:textStyle="bold" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="left" 
       android:ellipsize="end" 
       android:layout_width="wrap_content" 
       android:singleLine="true" 
       android:text="@string/srch_datebeg"/> 
      <TextView 
       android:id="@+id/consult_datainiciovalue" 
       android:layout_width="0px" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:gravity="right" 
       android:singleLine="true" 
       android:ellipsize="end"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content"> 
    <TextView 
      android:id="@+id/consult_dataincioinfo" 
      android:text="Data da criação do Processo" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:gravity="left" 
      android:singleLine="true" 
      android:ellipsize="end" 
      android:layout_width="wrap_content" 
      android:textSize="12px"/> 
    </LinearLayout>  
</LinearLayout> 
</LinearLayout> 
<!-- TITULO2 --> 
<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284" android:padding="4px"> 
    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:id="@+id/TextView01" 
     android:text="Informação Complementar" 
     android:textColor="#FFFFFF" 
     android:gravity="left" 
     android:textStyle="bold" 
     android:singleLine="true" 
     android:ellipsize="end" 
     android:layout_gravity="center_vertical" android:paddingLeft="4px" android:textSize="16px"> 
    </TextView> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:layout_gravity="right|center_vertical" 
     android:gravity="right|center_vertical" 
     android:paddingTop="2px"> 
     <ToggleButton 
      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:textOff="Expandir" 
      android:textOn="Minimizar" 
      android:id="@+id/mostrar2" 
      android:width="80px"> 
     </ToggleButton> 
    </LinearLayout> 
</LinearLayout> 
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px"> 
</View> 

<!-- TITULO3 --> 
<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284" 
    android:padding="4px"> 
    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:id="@+id/TextView01" 
     android:text="Documentos Anexados" 
     android:textColor="#FFFFFF" 
     android:gravity="left" 
     android:textStyle="bold" 
     android:singleLine="true" 
     android:ellipsize="end" 
     android:layout_gravity="center_vertical" 
     android:textSize="18px" 
     android:paddingLeft="4px"> 
    </TextView> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:layout_gravity="right|center_vertical" 
     android:gravity="right|center_vertical" 
     android:paddingTop="2px"> 
     <ToggleButton 

      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:textOff="Expandir" 
      android:textOn="Minimizar" 
      android:id="@+id/mostrar" 
      android:width="80px"> 
     </ToggleButton> 
    </LinearLayout>  
</LinearLayout> 
<!--LINHA SEPARADORA--> 
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px"> 
</View> 
<!-- TITULO4 --> 
<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:orientation="horizontal" 
    android:background="#848284" 
    android:padding="4px"> 
    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:id="@+id/TextView01" 
     android:text="Etapas" 
     android:textColor="#FFFFFF" 
     android:gravity="left" 
     android:textStyle="bold" 
     android:singleLine="true" 
     android:ellipsize="end" 
     android:layout_gravity="center_vertical" 
     android:textSize="18px" 
     android:paddingLeft="4px"> 
    </TextView> 
    <LinearLayout 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:layout_gravity="right|center_vertical" 
     android:gravity="right|center_vertical" 
     android:paddingTop="2px"> 
     <ToggleButton 

      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:textOff="Expandir" 
      android:textOn="Minimizar" 
      android:id="@+id/mostrar" 
      android:width="80px"> 
     </ToggleButton> 
    </LinearLayout>  
</LinearLayout> 
<!--LINHA SEPARADORA--> 
<View 
    android:id="@+id/View01" 
    android:layout_width="wrap_content" 
    android:background="#B5B5B5" 
    android:layout_height="2px"> 
</View> 
</LinearLayout> 
</ScrollView> 

Và đây là đoạn code java mà các cuộc gọi sự kiện nút:

final ToggleButton bt=(ToggleButton) findViewById(R.id.mostrar); 


    bt.setOnClickListener(new OnClickListener() { 
     public void onClick(View v) { 
      if (bt.isChecked()) { 

       /*TranslateAnimation slide = new TranslateAnimation(0, 0, 0, 
          -findViewById(R.id.informgeral).getHeight()*2); 
          slide.setDuration(500); 
          slide.setFillAfter(true); 
          findViewById(R.id.informgeral).startAnimation(slide);*/ 

       findViewById(R.id.informgeral).setVisibility(View.VISIBLE);; 

      } else { 

      /* TranslateAnimation slide = new TranslateAnimation(0, 0, 0, 
          findViewById(R.id.informgeral).getHeight()); 
          slide.setDuration(500); 
          slide.setFillAfter(true); 
          findViewById(R.id.informgeral).startAnimation(slide);*/ 


          //findViewById(R.id.listBut).startAnimation(slide); 


       findViewById(R.id.informgeral).setVisibility(View.GONE);; 


      } 
     } 
}); 

Answer 1

Giống như tomash đã nói trước: Không có cách nào dễ dàng.

Bạn có thể muốn xem my answer here.
Nó giải thích cách nhận ra chế độ xem trượt (thay đổi kích thước).
Trong trường hợp này, đó là chế độ xem trái và phải: Mở rộng trái, phải biến mất.
Nó có thể không làm chính xác những gì bạn cần nhưng với tinh thần sáng tạo bạn có thể làm cho nó hoạt động;)

Answer 2

Không có cách nào dễ dàng để tạo hoạt ảnh ẩn/hiển thị lượt xem. Bạn có thể thử phương pháp được mô tả trong câu trả lời sau: How do I animate View.setVisibility(GONE)

Answer 3

Bạn có thể muốn sử dụng ExpandableListView, một ListView đặc biệt cho phép bạn mở và đóng nhóm.

Answer 4

Bạn có thể sử dụng xem danh sách mở rộng giải thích trong bản demo API để hiển thị nhóm

http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/ExpandableList1.html.

Để tạo hoạt ảnh cho các mục danh sách chuyển động, bạn sẽ phải ghi đè phương thức getView và áp dụng hoạt ảnh dịch trên từng mục danh sách. Các giá trị cho hoạt ảnh phụ thuộc vào vị trí của từng mục danh sách. Đây là một cái gì đó mà tôi đã thử trên một danh sách đơn giản xem thời gian dài trở lại.

Answer 5

Thay đổi mức độ hiển thị có thể dễ dàng được hoạt ảnh bằng cách ghi đè phương pháp setVisibility. Nhìn vào mã hoàn chỉnh:

public class SimpleViewAnimator extends FrameLayout 
{ 
    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); 
    } 
} 

Answer 6

Để động thay đổi cách bố trí, bạn có thể thêm các thuộc tính sau đây để LinearLayout bạn

android:animateLayoutChanges="true" 

và nó sẽ thay đổi động tự động cho bạn.

---

Để biết thông tin, nếu sử dụng android:animateLayoutChanges="true" thì hoạt ảnh tùy chỉnh qua hoạt ảnh xml sẽ không hoạt động.

Answer 7

Nếu bất cứ ai khác được strugelling với điều này trong hiện tại, đây là một phiên bản dễ dàng hơn nhiều:

Có thể thiết lập một tài sản của bố trí cha mẹ trong XML:

android:animateLayoutChanges="true" 

chí này animate views khi chúng được thêm vào/gỡ bỏ.
Giữ tham chiếu đến chế độ xem và lắp lại nó ở chỉ mục thích hợp và bạn là vàng.

Answer 8

Đây là một câu hỏi khá cũ, vẫn bình luận của chương trình, mà vẫn còn những người có vấn đề, vì vậy đây là giải pháp của tôi với các tính năng bổ sung sau đây:

• điều chỉnh hình ảnh động (tốc độ, chủng loại, ...)
• không cần phải mở rộng bất kỳ lớp
• trong trường hợp của tôi, animateLayoutChanges có vướng mắc trong quá mới CoordinatorLayout

Chức năng - Examp le (Tôi có chức năng này trong một lớp tiện ích)

public static void animateViewVisibility(final View view, final int visibility) 
{ 
    // cancel runnning animations and remove and listeners 
    view.animate().cancel(); 
    view.animate().setListener(null); 

    // animate making view visible 
    if (visibility == View.VISIBLE) 
    { 
     view.animate().alpha(1f).start(); 
     view.setVisibility(View.VISIBLE); 
    } 
    // animate making view hidden (HIDDEN or INVISIBLE) 
    else 
    { 
     view.animate().setListener(new AnimatorListenerAdapter() 
     { 
      @Override 
      public void onAnimationEnd(Animator animation) 
      { 
       view.setVisibility(visibility); 
      } 
     }).alpha(0f).start(); 
    } 
} 

Điều chỉnh hình ảnh động

Sau khi gọi view.animate() bạn có thể điều chỉnh hình ảnh động để bất cứ điều gì bạn muốn (thời gian thiết lập, thiết lập xen vào và nhiều hơn nữa ...). Bạn cũng có thể ẩn chế độ xem bằng cách chia tỷ lệ xem thay vì điều chỉnh giá trị alpha, chỉ cần thay thế alpha(...) bằng scaleX(...) hoặc scaleY(...) trong phương pháp tiện ích nếu bạn muốn