You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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

火山引擎 最新活动