你如何在android中折叠和展开一个复杂的视图？

Question

我正在实现由搜索框和类别列表组成的搜索功能。出于设计目的，我使用了 EditText 、 GridView 等。

但是当活动开始时，我不希望显示所有搜索框。我只想要EditText，然后当点击EditText 时我需要展开视图，当点击屏幕的其他部分时，例如触摸ListView 或按下按钮我需要视图以包含EditText 的默认状态折叠。

我可以使用View.GONE 或VIEW.VISIBLE，但我想实现平滑的展开和折叠动画。

我的activity_layout.xml：

 <RelativeLayout
            android:id="@+id/search_box"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:background="@android:color/transparent"
           >

            <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
                android:id="@+id/cv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="@drawable/njoftime_item_background"
                card_view:cardCornerRadius="1dp"
                card_view:cardElevation="2dp">

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:id="@+id/sr"
                    android:animateLayoutChanges="true"
                    android:padding="20dp">

                    <RelativeLayout
                        android:layout_width="fill_parent"
                        android:id="@+id/search_area"
                        android:layout_height="wrap_content"
                        android:focusableInTouchMode="true"
                        android:background="@drawable/njoftime_item_background"
                        >


                        <ImageButton
                            android:layout_width="100dp"
                            android:layout_height="50dp"
                            android:layout_marginLeft="1dp"
                            android:id="@+id/btn_search"
                            android:layout_alignParentRight="true"
                            android:background="@color/njoftime_main_color"
                            android:src="@drawable/ic_search_white"
                            android:onClick="searchPressed"
                            android:scaleType="fitCenter"
                            />

                        <EditText
                            android:layout_width="fill_parent"
                            android:layout_height="50dp"
                            android:layout_toLeftOf="@+id/btn_search"
                            android:id="@+id/search_text"
                            android:layout_alignParentLeft="true"
                            android:background="@null"
                            android:ems="20"
                            android:textSize="18sp"
                            android:paddingLeft="10dp"
                            android:imeOptions="actionSearch"
                            android:inputType="text"
                            android:maxLines="1"
                            android:textColor="@color/njoftime_desc"
                            android:textCursorDrawable="@null"
                            />

                    </RelativeLayout>

                    <RelativeLayout
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/search_categories_area"
                        android:layout_below="@+id/search_area"
                        android:paddingTop="20dp"
                        android:paddingBottom="10dp"
                       >


                        <GridView
                            android:id="@+id/search_grid"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:layout_centerHorizontal="true"
                            android:drawSelectorOnTop="false"
                            android:horizontalSpacing="2dp"

                            android:numColumns="5"
                            android:padding="4dp"
                            android:verticalSpacing="4dp" >
                        </GridView>

                    </RelativeLayout>
                </RelativeLayout>
            </android.support.v7.widget.CardView>
        </RelativeLayout>

为此，我使用了android:animateLayoutChanges="true" 和以下代码

my_relative_layout = (RelativeLayout) findViewById(R.id.search_categories_area);

与：

  public void searchPressed(View v) {
        if (!searchbox_expanded) {

            my_relative_layout.setVisibility(View.VISIBLE);
            searchbox_expanded = true;
        } else {
            my_relative_layout.setVisibility(View.GONE);
            searchbox_expanded = false;

        }

    }

嗯，展开是非常流畅的动画，但折叠不是动画。

我在网上使用过其他解决方案，但由于我认为复杂的布局，我没有达到预期的效果。任何解决方案将不胜感激。

Answer 1

这很简单：

要折叠视图，您只需在父视图 (search_box) 上添加一个 onClickListener，它会触发一个函数以使用 animation 折叠视图。

要展开视图，您需要在点击搜索EditText时触发另一个动画来展开视图

这是一个折叠和展开视图的动画示例：

` 导入 android.view.View; 导入android.view.animation.Animation； 导入android.view.animation.Transformation;

/**
 * Created by wajdichamakhi on 26/01/15.
 */
public class ResizeAnimation extends Animation {


  private int endHeight; // distance between start and end height
  private int endWidth; // distance between start and end width


  private View view; 

  /**
   * constructor, do not forget to use the setParams(int, int) method before
   * starting the animation
   *
   * @param v
   */
  public ResizeAnimation(View v) {
      this.view = v;
  }

  @Override
  protected void applyTransformation(float interpolatedTime, Transformation t) {

      view.getLayoutParams().height = (int) (view.getHeight() + (endHeight - view.getHeight()) * interpolatedTime);
      view.getLayoutParams().width = (int) (view.getWidth() + (endWidth -   view.getWidth()) * interpolatedTime);

      view.requestLayout();
  }

  /**
   * set the starting and ending height for the resize animation
   * starting height is usually the views current height, the end height is the height
   * we want to reach after the animation is completed
   *
   * @param endWidths width in pixels
   * @param endHeight height in pixels
   */
  public void setParams(int endWidths, int endHeight) {
      this.endWidth = endWidths;
      this.endHeight = endHeight;
  }

  /**
   * set the duration for the hideshowanimation
   */
  @Override
  public void setDuration(long durationMillis) {
      super.setDuration(durationMillis);
  }

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

   /**
   * Verify if this animation needs to be fired or not.
   */
  public boolean isValidAnimation() {
      if (this.endWidth == view.getWidth() && this.endHeight ==  view.getHeight())
          return false;
      else
          return true;
   }
}`

现在你把这个函数返回一组包含这个动画的动画。我使用动画集，因此我可以一次将多个动画添加到视图中并创建一个很酷的动画。

 public AnimationSet getExpend_CollapseAnimationSet(final View v, int height, int width) {

    AnimationSet animationSet = new AnimationSet(true);

        ResizeAnimation resizeAnimation = new ResizeAnimation(v);
        resizeAnimation.setParams(
                width,
                height);
        if (resizeAnimation.isValidAnimation()) {
            resizeAnimation.setDuration(ANIMATION_DURATION);
            animationSet.addAnimation(resizeAnimation);
        }

    return animationSet;
}

现在在你的听众中使用这个函数，正确的width和height

 AnimationSet initialStateAnimation = getExpend_CollapseAnimationSet(myViewToExpend_Collapse,deiredHeight, desiredWidth);
 myViewToExpend_Collapse.startAnimation(initialStateAnimation);