简单的自定义Action Menu

需求描述与分析

在仿写知乎日报APP的时候,需要给ToolBar上的Menu Item添加类似BadgeView的效果,如点赞图标旁边的点赞数,效果如下图:

知乎日报效果

正准备做的时候,发现没做过从来没做过这个功能,自己试了下也没实现出来,然后就开始了查找资料之旅,发现可以使用自定义 ActionProvider来实现,如这篇博客: 自定义ActionProvider ToolBar 自定义Menu小红点。找着实现了一下,效果还不错,本着求知的精神又搜了下官方文档,发现还可以通过 MenuItemsetActionView方法来设置,官方说明如下:

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文件:



    
    
    
    

然后写一个menu菜单文件,并在使用的Activity中加载该菜单,并加载 action_item.xml 并设置想要显示的内容:



    
    
    
    

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);
    }
}

完成效果:

简单的自定义Action Menu_第1张图片
初步效果

小问题

设置单击事件的时候不能直接在onOptionsItemSelected方法中完成,必须要挨个设置单击事件如单击点赞:

like.getActionView().setOnClickListener();

你可能感兴趣的:(简单的自定义Action Menu)