製作片段的增長和顯示更多信息

1 - 有幾個字段來插入一個查詢信息，並初步那隻能說明一個字段輸入，使名稱和一個按鈕，它的增長;

2 - 將顯示查詢結果的列表視圖。

我使用Visibility.GONE使絕招（不顯示等領域，並在用戶按下按鈕，它們出現）：

我有幾個這些

<android.support.v7.widget.LinearLayoutCompat 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
tools:context="com.tcgapp.myrium.fowhelper.MainActivity" 
tools:showIn="@layout/activity_main" 
android:orientation="vertical" 
android:id="@+id/fragment_search_area" 
> 
<!--android:background="#c94040" --> 
<!-- Name of Card and button to expand the view--> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:layout_alignParentTop="true" 
    android:id="@+id/layout_name_search" 
    android:background="@android:color/darker_gray"> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/label_name" 
     android:text="@string/name_label" 
     android:textSize="20sp" 
     android:layout_marginLeft="10dp" 
     android:layout_marginRight="10dp" 
     android:textStyle="bold" 
     /> 

    <EditText 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/text_name" 
     android:hint="@string/name_hint" 
     android:layout_marginLeft="10dp" 
     android:layout_marginRight="10dp" 
     android:singleLine="true" 
     android:layout_weight="0.90" /> 

    <ImageButton 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/button_expand" 
     android:src="@drawable/ic_arrow_downward_black_24dp" /> 
</LinearLayout> 

<!-- Type Set and Format--> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/search_tags_area" 
    android:orientation="horizontal" 
    android:background="@android:color/holo_blue_dark"> 

    <Spinner 
     android:id="@+id/spinner_type" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp"/> 

    <util.MultiSpinner 
     android:id="@+id/spinner_rarity" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp"/> 

    <util.MultiSpinner 
     android:id="@+id/spinner_set" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp"/> 

    <Spinner 
     android:id="@+id/spinner_format" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp"/> 
</LinearLayout> 

<!-- Card Text Field--> 
<EditText 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/edit_card_text" 
    android:hint="@string/field_text" 
    android:paddingLeft="10dp" 
    android:paddingRight="10dp"/> 

<!-- Spinners--> 
<!-- Attribute and choices--> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:layout_alignParentTop="true" 
    android:id="@+id/layout_attribute" 
    android:background="@android:color/darker_gray" 
    android:visibility="gone"> 

    <util.MultiSpinner 
     android:id="@+id/multi_spinner_attribute" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp"/> 

    <Spinner 
     android:id="@+id/spinner_choices_to_query_attribute" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp"/> 

</LinearLayout> 

<!-- Now the query fields--> 
<!-- Atk Def--> 
<LinearLayout 
    android:id="@+id/layout_atkdef" 
    android:visibility="gone" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:background="#75b194" 
    > 

    <TextView 
     android:id="@+id/text_atk" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@string/field_atk" 
     android:gravity="left" 
     android:textStyle="bold" 
     android:layout_weight="2" 
     android:textSize="15sp" 
     android:paddingLeft="10dp"/> 

    <Spinner 
     android:id="@+id/spinner_atk" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     /> 

    <android.support.v7.widget.AppCompatEditText 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="2" 
     android:inputType="numberSigned"/> 

    <!-- Atk field--> 
    <TextView 
     android:id="@+id/text_def" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@string/field_def" 
     android:gravity="left" 
     android:textStyle="bold" 
     android:layout_weight="2" 
     android:textSize="15sp" 
     android:paddingLeft="10dp" 
     /> 
    <Spinner 
     android:id="@+id/spinner_def" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     /> 

    <android.support.v7.widget.AppCompatEditText 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="2" 
     android:inputType="numberSigned"/> 

</LinearLayout> 

<!-- SubType and CMC--> 
<LinearLayout 
    android:id="@+id/layout_subtype_cmc" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:visibility="gone" 
    android:background="#75b194" 
    android:orientation="horizontal"> 

    <TextView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:text="@string/field_subtype" 
     android:layout_weight="2" 
     android:textSize="15sp" 
     android:paddingLeft="10dp" 
     android:textStyle="bold"/> 

    <android.support.v7.widget.AppCompatEditText 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:singleLine="true" 
     android:layout_weight="2" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="@string/field_cmc" 
     android:layout_weight="1" 
     android:textSize="15sp" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp" 
     android:textStyle="bold"/> 

    <Spinner 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:id="@+id/spinner_cmc"/> 
</LinearLayout> 

<!-- Card Flavor e Code--> 
<LinearLayout 
    android:id="@+id/layout_flavor_code" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:visibility="gone" 
    android:background="#75b194" 
    android:orientation="horizontal"> 


    <EditText 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:id="@+id/edit_card_flavor" 
     android:hint="@string/field_flavor" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp" 
     android:layout_weight="1" 
     android:singleLine="true"/> 

    <EditText 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:id="@+id/edit_card_code" 
     android:hint="@string/field_code" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp" 
     android:layout_weight="1" 
     android:singleLine="true"/> 

</LinearLayout>

而且在Java代碼中，我有一個動畫對象，這是其AnimationEnd（）：

@Override 
    public void onClick(View v) { 
     int newWeight = isExpanded ? 0 : 60; 

     ViewWeightAnimationWrapper animationWrapper = new ViewWeightAnimationWrapper(getView()); 
     ObjectAnimator anim = ObjectAnimator.ofFloat(animationWrapper, 
       "weight", 
       animationWrapper.getWeight(), 
       newWeight); 
     anim.setDuration(500); 
     anim.addListener(new AnimatorListenerAdapter() { 
      public void onAnimationStart(Animator animation) { 
       super.onAnimationStart(animation); 
//    if (!isExpanded){ 
//     getView().findViewById(R.id.layout_atkdef).setVisibility(View.INVISIBLE); 
//     getView().findViewById(R.id.layout_subtype_cmc).setVisibility(View.INVISIBLE); 
//     getView().findViewById(R.id.layout_attribute).setVisibility(View.INVISIBLE); 
//     getView().findViewById(R.id.layout_flavor_code).setVisibility(View.INVISIBLE); 
//    } 
      } 

       @Override 
       public void onAnimationEnd (Animator animation){ 
        super.onAnimationEnd(animation); 
        if (isExpanded) { 
         imageButtonToggle.setImageResource(R.drawable.ic_arrow_downward_black_24dp); 
         getView().findViewById(R.id.layout_atkdef).setVisibility(View.GONE); 
         getView().findViewById(R.id.layout_subtype_cmc).setVisibility(View.GONE); 
         getView().findViewById(R.id.layout_attribute).setVisibility(View.GONE); 
         getView().findViewById(R.id.layout_flavor_code).setVisibility(View.GONE); 
        } else { 
         imageButtonToggle.setImageResource(R.drawable.ic_arrow_upward_black_24dp); 
         getView().findViewById(R.id.layout_atkdef).setVisibility(View.VISIBLE); 
         getView().findViewById(R.id.layout_subtype_cmc).setVisibility(View.VISIBLE); 
         getView().findViewById(R.id.layout_attribute).setVisibility(View.VISIBLE); 
         getView().findViewById(R.id.layout_flavor_code).setVisibility(View.VISIBLE); 
        } 

        isExpanded = !isExpanded; 
       } 
      } 
      ); 
      anim.start(); 
     } 
    }

這是隱藏字段並僅在用戶按下展開按鈕時才顯示的方式，或者是更好的方式？

更新：提供完整的代碼。

來源

2015-12-30 Myrium

假設你問是否有更好的方式來擴展/隱藏輸入區域，我會盡可能使用你的變量來分享我的實現。我會做一些必要的筆記。

//consider changing imageButtonToggle to a container view with an image in it 
//in this example I'll use carrotImage as the image contained within imageButtonToggle 
//formContainer contains all the views you're toggling from GONE to VISIBLE. 
imageButtonToggle.setOnClickListener(new OnClickListener() { 

     @Override 
     public void onClick(View v) { 
       if (!isExpanded) { 
        ViewAnimationHelper 
          .expand(formContainer, 300, false); 
       } else { 
        ViewAnimationHelper.collapse(formContainer, 300); 
       } 

       carrotImage.animate().rotation(ROTATION_COUNT); 

       ROTATION_COUNT += 180f; 
       //Silly check.. but better safe than sorry. 
       if (ROTATION_COUNT >= Float.MAX_VALUE) 
        ROTATION_COUNT = 0f; 

       isExpanded= !isExpanded; 
      } 
    }); 


public class ViewAnimationHelper { 

/** 
* Easy way to expand a given view after measuring with 
* v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 
* 
* @param v 
* @param duration 
*/ 
public static void expand(final View v, int duration, 
     boolean bStartFromZeroHeight) { 
    v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 
    final int targetHeight = v.getMeasuredHeight(); 

    if (bStartFromZeroHeight) 
     v.getLayoutParams().height = 0; 

    v.setVisibility(View.VISIBLE); 
    Animation a = new Animation() { 
     @Override 
     protected void applyTransformation(float interpolatedTime, 
       Transformation t) { 
      v.getLayoutParams().height = interpolatedTime == 1 ? LayoutParams.WRAP_CONTENT 
        : (int) (targetHeight * interpolatedTime); 
      v.requestLayout(); 
     } 

     @Override 
     public boolean willChangeBounds() { 
      return true; 
     } 
    }; 

    // 1dp/ms 
    a.setDuration(duration); 
    v.startAnimation(a); 
} 

/** 
* Easy way to just collapse any given view and any given speed 
* 
* @param v 
* @param duration 
*/ 
public static void collapse(final View v, int duration) { 
    final int initialHeight = v.getMeasuredHeight(); 

    Animation a = new Animation() { 
     @Override 
     protected void applyTransformation(float interpolatedTime, 
       Transformation t) { 
      if (interpolatedTime == 1) { 
       v.setVisibility(View.GONE); 
      } else { 
       v.getLayoutParams().height = initialHeight 
         - (int) (initialHeight * interpolatedTime); 
       v.requestLayout(); 
      } 
     } 

     @Override 
     public boolean willChangeBounds() { 
      return true; 
     } 
    }; 

    // 1dp/ms 
    a.setDuration(duration); 
    v.startAnimation(a); 
} 
}

來源

2015-12-30 17:34:38 ElliotM

我在這裏測試，它真的很酷！我在這裏嘗試你的代碼，我也會用我的XML更新這個問題。但我的問題是隻顯示幾個字段（按名稱搜索），按下按鈕後，其他字段會出現。 – Myrium

我設法讓我想要的動畫只是找到每個佈局，並給動畫。此外，不浪費空間（這是發生的，因爲我無法弄清楚如何得到確切的高度）。非常感謝！另外，如果可能的話，您能否提供教程或源代碼給出了他對此實現的想法？我想了解，因爲可見性設置爲在動畫之前移動或可見。它不會使視圖一下子出現或消失。 – Myrium

製作片段的增長和顯示更多信息

回答

相關問題