我正在实施搜索功能,其中包含搜索框和类别列表。出于设计目的,我使用了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;
}
}
扩展是非常流畅的动画,但折叠不是动画。
我在网上使用过其他解决方案,但由于我认为的复杂布局,我还没有达到预期的效果。任何解决方案将不胜感激。
答案 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;
}
现在使用右width
和height
AnimationSet initialStateAnimation = getExpend_CollapseAnimationSet(myViewToExpend_Collapse,deiredHeight, desiredWidth);
myViewToExpend_Collapse.startAnimation(initialStateAnimation);