自定义ActionBar的MenuItem和给ActionBar中的按钮添加旋转动画（刷新动画）

        本文首先讲述如何给actionBar中的menuItem按钮添加旋转动画，然后引申出如何自定义MenuItem，即自定义MenuItem的布局。

       

        1.如何给MenuItem添加旋转动画（刷新动画）

         在项目中，我们会遇到这样的情况：在Actionbar上放一个刷新按钮用来刷新页面内容，但是点击后并没有一个刷新的旋转动画，经常需要给刷新按钮添加旋转动画。那么如何添加该动画效果呢？

       首先，是Menu的布局，都设置成以ActionBar的形式显示，如下：  

       

res/menu/menu_personalize_channel.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:xxx="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" >

    <item
        android:id="@+id/channel_action_refresh"
        android:icon="@drawable/refreshnormal"
        android:orderInCategory="0"
        android:title="@string/refresh"
        xxx:showAsAction="ifRoom|withText"/>

</menu>

 

     然后我们需要一个View来显示旋转动画：res/layout/action_view.xml

       

res/layout/action_view.xml
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/xxx.actionBar.buttonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/contentDescription"
    android:scaleType="centerInside" />

       

       最后是如何设置动画了：

      

........

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.menu_personalize_channel, menu);
		return super.onCreateOptionsMenu(menu);
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case R.id.channel_action_refresh:
			startRotateAni(item);
			onRefresh();
			break;
		case android.R.id.home:
			onClose();
			break;
		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}


     private void startRotateAni(MenuItem item) {
          mRefreshItem = item;
        
        //这里使用一个ImageView设置成MenuItem的ActionView，这样我们就可以使用这个ImageView显示旋转动画了
          ImageView refreshActionView = (ImageView) getLayoutInflater().inflate(R.layout.action_view, null);
          refreshActionView.setImageResource(R.drawable.refreshnormal);
          mRefreshItem.setActionView(refreshActionView);
        
	 Animation rotateAni = AnimationUtils.loadAnimation(this,
				R.anim.rotateanim);
		LinearInterpolator lin = new LinearInterpolator();
		rotateAni.setInterpolator(lin);	
		item.setCheckable(false);// 在扫描时不接受任何点击事件
		refreshActionView.startAnimation(rotateAni);
	}
	
     private void stopRotateAni(){		
        if ( mRefreshItem != null) {
           mRefreshItem.setCheckable(true);
            View view =  mRefreshItem.getActionView();
            if (view != null) {
                view.clearAnimation();
                mRefreshItem.setActionView(null);
            }
        }
	}


    ......

 

        这样刷新效果实现了。

 

       2.自定义MenuItem

          项目中，我们也经常需要自定义Menu的布局，应该actionbar提供的默认的Menu布局远不能满足要求，例如：menuItem需要同时显示ICON和文字，可能你会说设置xxx:showAsAction="ifRoom|withText"就可以了，其实不然，这样设置后，只有在横屏下才能显示文本，竖屏下是不能显示的。

          那么如何实现自定义布局呢？

          有上面的讲解后，实现自定义布局其实很简单，如下：

          

          首先，修改res/layout/action_view.xml的布局如下：

          

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/action_refresh"
    style="@style/funshion.actionBar.buttonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/ic_refresh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/contentDescription"
        android:scaleType="centerInside"
        android:src="@drawable/refreshnormal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="2dp"
        android:paddingRight="3dp"
        android:text="@string/refresh" />

</LinearLayout>

       

           然后修改代码如下：

           

.......	
	
      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
	    getMenuInflater().inflate(R.menu.menu_personalize_channel, menu);
            //这里使用一个ImageView设置成MenuItem的ActionView，这样我们就可以使用这个ImageView显示旋转动画了       
            refreshActionView = (LinearLayout) getLayoutInflater().inflate(R.layout.action_view, null);
            refreshActionView.setOnClickListener(this);
            refreshIcon = (ImageView) refreshActionView.findViewById(R.id.ic_refresh);
            refreshIcon.setImageResource(R.drawable.refreshnormal);
            mRefreshItem = menu.findItem(R.id.channel_action_refresh).setActionView(refreshActionView);
	    return super.onCreateOptionsMenu(menu);
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case R.id.channel_action_refresh:
		   //startRotateAni();
		   //onRefresh();
			break;
		case android.R.id.home:
			onClose();
			break;
		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}

       	@Override
	public void onClick(View v) {
	       switch (v.getId()) {
		  case R.id.action_refresh:
		   startRotateAni();
		   onRefresh();
		      break;
		   default:
		      break;
		}
	}
     private void startRotateAni() { 
        
	  Animation rotateAni = AnimationUtils.loadAnimation(this,
				R.anim.rotateanim);
	  LinearInterpolator lin = new LinearInterpolator();
	  rotateAni.setInterpolator(lin);	
	  mRefreshItem.setCheckable(false);// 在扫描时不接受任何点击事件
	  refreshActionView.setClickable(false);
	  refreshIcon.startAnimation(rotateAni);
	}
	
     private void stopRotateAni(){		
           if ( mRefreshItem != null) {
        	mRefreshItem.setCheckable(true);
                View view =  mRefreshItem.getActionView();
                if (view != null) {
            	    view.setClickable(true);
            	    ImageView refreshIcon = (ImageView) view.findViewById(R.id.ic_refresh);
                    refreshIcon.clearAnimation();
                    // mRefreshItem.setActionView(null);
            }
        }
	}

       最后效果图如下：