需求描述与分析
在仿写知乎日报APP的时候,需要给ToolBar
上的Menu Item
添加类似BadgeView
的效果,如点赞图标旁边的点赞数,效果如下图:
正准备做的时候,发现没做过从来没做过这个功能,自己试了下也没实现出来,然后就开始了查找资料之旅,发现可以使用自定义
ActionProvider
来实现,如这篇博客:自定义ActionProvider ToolBar 自定义Menu小红点。找着实现了一下,效果还不错,本着求知的精神又搜了下官方文档,发现还可以通过MenuItem
的setActionView
方法来设置,官方说明如下:
Set an action view for this menu item. An action view will be displayed in place of an automatically generated menu item element in the UI when this item is shown as an action within a parent.
setActionView
方法有两个,分别为setActionView (int resId)
和setActionView (View view)
。这里我用的是setActionView (int resId)
。
代码流程
废话就不多说了,上代码:
首先需要写一个名为 action_item (名字随意)的layout
文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp">
<!--图标-->
<ImageView
android:id="@+id/action_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="ContentDescription"/>
<!--数量-->
<TextView
android:id="@+id/action_item_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingStart="8dp"
android:text="..."
android:textColor="@android:color/white"/>
</LinearLayout>
然后写一个menu
菜单文件,并在使用的Activity
中加载该菜单,并加载 action_item.xml 并设置想要显示的内容:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_share"
android:icon="@drawable/ic_share"
android:title="分享"
app:showAsAction="always"/>
<item
android:id="@+id/menu_collect"
android:icon="@drawable/ic_star"
android:title="收藏"
app:showAsAction="always"/>
<item
android:id="@+id/menu_comment"
android:icon="@drawable/ic_comment"
android:title="评论"
app:showAsAction="always"/>
<item
android:id="@+id/menu_like"
android:icon="@drawable/ic_thumb_up"
android:title="点赞"
app:showAsAction="always"/>
</menu>
public class MainActivity extends AppCompatActivity {
·····
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
MenuItem comment = menu.findItem(R.id.menu_comment);
comment.setActionView(R.layout.action_item);
ImageView commentImg = (ImageView) comment.getActionView().findViewById(R.id.action_item_image);
TextView commentNum = (TextView) comment.getActionView().findViewById(R.id.action_item_text);
//设置显示内容
commentImg.setImageResource(R.drawable.ic_comment);
commentNum.setText("66");
MenuItem like = menu.findItem(R.id.menu_like);
like.setActionView(R.layout.action_item);
ImageView likeImg = (ImageView) like.getActionView().findViewById(R.id.action_item_image);
TextView likeNum = (TextView) like.getActionView().findViewById(R.id.action_item_text);
//设置显示内容
likeImg.setImageResource(R.drawable.ic_thumb_up);
likeNum.setText("100");
return super.onCreateOptionsMenu(menu);
}
}
完成效果:
小问题
设置单击事件的时候不能直接在onOptionsItemSelected
方法中完成,必须要挨个设置单击事件如单击点赞:
like.getActionView().setOnClickListener();