Google Play三线转箭头SearchView图标:默认还是自定义?如何实现?
Google Play风格SearchView三线转箭头图标实现解析
嘿,这个Google Play里的SearchView三线转箭头效果可不是系统原生默认的样式,是Google Play团队自己定制的动画交互哦~
想要实现这个效果,核心思路是监听SearchView的展开/折叠状态,切换图标并添加平滑过渡动画,具体可以按这几步来做:
- 准备两套图标资源:一个是三线汉堡样式的图标,一个是返回箭头样式的图标,推荐用矢量图(VectorDrawable),适配不同分辨率的屏幕更省心。
- 监听SearchView的状态变化:通过
setOnSearchClickListener监听搜索框展开的动作,用setOnCloseListener监听搜索框折叠的动作。 - 添加过渡动画:可以用Android的
AnimatedVectorDrawable来实现矢量图标的平滑变形动画,或者用ValueAnimator来做图标的旋转/位移过渡,前者的动画效果会更细腻自然。
给你一个简单的代码示例(Kotlin版),用AnimatedVectorDrawable实现:
// 获取SearchView实例 val searchView = findViewById<SearchView>(R.id.search_view) // 找到SearchView里的图标ImageView(注意用AppCompat的id) val searchIcon = searchView.findViewById<ImageView>(androidx.appcompat.R.id.search_mag_icon) // 初始设置三线汉堡图标 searchIcon.setImageResource(R.drawable.ic_hamburger) // 监听搜索框展开事件 searchView.setOnSearchClickListener { // 加载并启动转箭头的动画矢量图 val animDrawable = AnimatedVectorDrawable.create(this, R.drawable.ic_hamburger_to_arrow_animated) searchIcon.setImageDrawable(animDrawable) animDrawable?.start() } // 监听搜索框关闭事件 searchView.setOnCloseListener { // 加载并启动转回三线的动画矢量图 val animDrawable = AnimatedVectorDrawable.create(this, R.drawable.ic_arrow_to_hamburger_animated) searchIcon.setImageDrawable(animDrawable) animDrawable?.start() false // 返回false让系统处理关闭逻辑 }
另外,你提到的那些开源控件没找到这个效果也正常,毕竟这是Google Play专属的定制交互,不过按照上面的思路自己实现并不复杂,重点是把状态监听和动画结合好就行~
内容的提问来源于stack exchange,提问作者I Love 404




