android 搜索框展开动画

Android 搜索框展开动画

在Android应用开发中，搜索框是一个常见的功能组件，通常展开动画可以为用户提供更加友好的交互体验。本文将介绍如何实现一个简单的搜索框展开动画，帮助开发者更好地理解动画的实现原理。

动画效果

我们希望搜索框初始状态为收起状态，当点击搜索图标时，搜索框展开并显示输入框，点击搜索图标再次，搜索框收起。具体效果如下所示：

stateDiagram
    [*] --> 收起
    收起 --> 展开: 点击搜索图标
    展开 --> 收起: 点击搜索图标

实现步骤

1. 布局文件

首先，在布局文件中定义搜索框的UI组件，包括一个搜索图标和一个输入框，如下所示：

<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/ivSearch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_search"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"/>

    <EditText
        android:id="@+id/etSearch"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入关键词"
        android:layout_toEndOf="@id/ivSearch"
        android:visibility="gone"/>

</RelativeLayout>

2. Java代码

接下来，在Activity或Fragment中处理搜索框的展开和收起逻辑，代码如下：

public class MainActivity extends AppCompatActivity {

    private ImageView ivSearch;
    private EditText etSearch;
    private boolean isExpanded = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ivSearch = findViewById(R.id.ivSearch);
        etSearch = findViewById(R.id.etSearch);

        ivSearch.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isExpanded) {
                    collapseSearch();
                } else {
                    expandSearch();
                }
                isExpanded = !isExpanded;
            }
        });
    }

    private void expandSearch() {
        etSearch.setVisibility(View.VISIBLE);
        Animation animation = new TranslateAnimation(0, 0, -etSearch.getHeight(), 0);
        animation.setDuration(300);
        etSearch.startAnimation(animation);
    }

    private void collapseSearch() {
        Animation animation = new TranslateAnimation(0, 0, 0, -etSearch.getHeight());
        animation.setDuration(300);
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                etSearch.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
        etSearch.startAnimation(animation);
    }
}

总结

通过上述代码示例，我们实现了一个简单的搜索框展开动画效果。开发者可以根据实际需求对动画进行定制化调整，例如添加渐变效果、旋转动画等。希术本文能够帮助开发者更好地理解Android动画的实现原理，提升应用交互体验。