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

查看:165
本文介绍了动画图标ActionItem的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在四处寻找妥善解决我的问题,我似乎无法找到一个还没有。我有一个动作条(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.

我意识到,动作条具有使用自定义视图(增加一个动作视图支持),但是这种自定义视图扩展到覆盖动作条的整个区域,实际上是块以外的所有应用程序图标,这在我的情况是不是我所期待的。

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并定义我的动画帧一帧,设置绘制的菜单项的图标,然后在 onOptionsItemSelected(菜单项项)得到的图标,并开始使用动画((AnimationDrawable)item.getIcon())。启动()。然而,这是不成功的。有谁知道有什么方法可以做到这一点的影响?

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()
  • Cache the action view layout inflation and animation inflation. They are slow so you only want to do them once.
  • Add null checks in completeRefresh()

下面是在应用程序中的拉请求:<一个href="https://github.com/github/gauges-android/pull/13/files">https://github.com/github/gauges-android/pull/13/files

Here's the pull request on the app: https://github.com/github/gauges-android/pull/13/files

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆