自定义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);
}
}
}
最后效果图如下: