ActionItem 的动画图标 [英] Animated Icon for ActionItem

问题描述

我一直在到处寻找解决我的问题的正确方法，但似乎还没有找到.我有一个 ActionBar (ActionBarSherlock)，它有一个从 XML 文件膨胀的菜单，该菜单包含一个项目，而该项目显示为一个 ActionItem.

I have been searching everywhere for a proper solution to my problem and I can't seem to find one yet. I have an ActionBar (ActionBarSherlock) with a menu that is inflated from an XML file and that menu contains one item and that one item is shown as an ActionItem.

菜单:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >    
    <item
        android:id="@+id/menu_refresh"       
        android:icon="@drawable/ic_menu_refresh"
        android:showAsAction="ifRoom"
        android:title="Refresh"/>    
</menu>

活动:

[...]
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    getSupportMenuInflater().inflate(R.menu.mymenu, menu);
    return true;
  }
[...]

ActionItem 显示有一个图标，但没有文本，但是当用户单击 ActionItem 时，我希望图标开始动画，更具体地说，原地旋转.有问题的图标是刷新图标.

The ActionItem is displayed with an icon and no text however when a user clicks on the ActionItem, I want the icon to begin animating, more specifically, rotating in place. The icon in question is a refresh icon.

我意识到 ActionBar 支持使用自定义视图(添加操作视图) 但是这个自定义视图被扩展为覆盖 ActionBar 的整个区域，实际上阻止了除应用程序图标之外的所有内容，在我的情况下，这不是我想要的.

I realize that ActionBar has support for using custom views (Adding an Action View) however this custom view is expanded to cover the entire area of the ActionBar and actually blocks everything except the app icon, which in my case is not what I was looking for.

所以我的下一次尝试是尝试使用 AnimationDrawable 并逐帧定义我的动画，将 drawable 设置为菜单项的图标，然后在 onOptionsItemSelected(MenuItem item) 中获取图标并使用 ((AnimationDrawable)item.getIcon()).start() 开始动画.然而这并不成功.有没有人知道有什么方法可以实现这种效果?

So my next attempt was to try to use AnimationDrawable and define my animation frame-by-frame, set the drawable as the icon for the menu item, and then in onOptionsItemSelected(MenuItem item) get the icon and begin animating using ((AnimationDrawable)item.getIcon()).start(). This however was unsuccessful. Does anyone know of any way to accomplish this effect?

推荐答案

您走在正确的轨道上.以下是 GitHub Gaug.es 应用程序将如何实现它.

You're on the right track. Here is how the GitHub Gaug.es app will be implementing it.

首先他们定义一个动画 XML:

First they define an animation XML:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000"
    android:interpolator="@android:anim/linear_interpolator" />

现在为动作视图定义一个布局:

Now define a layout for the action view:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_refresh"
    style="@style/Widget.Sherlock.ActionButton" />

我们需要做的就是在单击项目时启用此视图:

All we need to do is enable this view whenever the item is clicked:

 public void refresh() {
     /* Attach a rotating ImageView to the refresh item as an ActionView */
     LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     ImageView iv = (ImageView) inflater.inflate(R.layout.refresh_action_view, null);

     Animation rotation = AnimationUtils.loadAnimation(getActivity(), R.anim.clockwise_refresh);
     rotation.setRepeatCount(Animation.INFINITE);
     iv.startAnimation(rotation);

     refreshItem.setActionView(iv);

     //TODO trigger loading
 }

加载完成后，只需停止动画并清除视图:

When the loading is done, simply stop the animation and clear the view:

public void completeRefresh() {
    refreshItem.getActionView().clearAnimation();
    refreshItem.setActionView(null);
}

大功告成！

一些额外的事情要做:

• 缓存动作视图布局膨胀和动画膨胀.它们很慢，所以你只想做一次.
• 在completeRefresh()
中添加null检查

这是应用的拉取请求:https://github.com/github/gauges-android/pull/13/files

这篇关于ActionItem 的动画图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！