你如何崩溃和扩展android中的复杂视图?

时间:2015-05-22 08:24:52

标签: android

我正在实施搜索功能,其中包含搜索框和类别列表。出于设计目的,我使用了EditTextGridView

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

我可以使用View.GONEVIEW.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;

        }

    }

扩展是非常流畅的动画,但折叠不是动画。

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

1 个答案:

答案 0 :(得分:0)

这很简单:

要折叠视图,您只需在父视图(search_box)上添加onClickListener即可触发使用animation折叠视图的函数。

要展开视图,您需要在点击搜索EditText

时触发另一个动画以消耗视图

以下是折叠和消费视图的动画示例:

`import android.view.View;           import android.view.animation.Animation;           import 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;
}

现在使用右widthheight

在您的听众中使用此功能
 AnimationSet initialStateAnimation = getExpend_CollapseAnimationSet(myViewToExpend_Collapse,deiredHeight, desiredWidth);
 myViewToExpend_Collapse.startAnimation(initialStateAnimation);