欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义ActionProvider ToolBar实现Menu小红点

程序员文章站 2024-03-06 15:03:32
今天的几个目标: 1. 自定义actionprovider 2. toolbar actionbar自定义menu 3. toolbar actionbar 右...

今天的几个目标:
1. 自定义actionprovider
2. toolbar actionbar自定义menu
3. toolbar actionbar 右侧menu添加角标(toolbar actionbar menu添加小红点)
源代码在文章末尾。

--------------------------------------------------------------------------------

效果预览

自定义menu后不影响原生md的任何效果。可以通过外部来控制显示的文字和颜色等属性。

Android自定义ActionProvider ToolBar实现Menu小红点

需求描述与分析

通常我们会自定义titlebar,可以实现很多自定义的效果。但是后来toolbar出来后实在太好用了,于是乎我们都使用了toolbar但是我们要给右侧的menu button实现类似badgeview的这种效果(如上图小红点)怎么办呢呢?

看到这个要求后没有玩过actionprovider的同学可能就慌了,但是请先跟我来分析下这个menu的组成:一个imageview显示icon,一个textview显示数字,textview还有个圆形的背景(可以是任何形状或者颜色)。那么就不能用系统的menu.xml这种来做了,所以要自定义menu,有人可能想到了自定义view,but并不需要。

我们通常写menu的时候在menu.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_pic"
    android:title="严振杰的博客"
    app:showasaction="always" />
</menu>

其实这个menu的item有一个android:actionproviderclass属性,用这个属性就可以自定义在这里显示的内容(view),这个属性的值是一个完整的类名,例如com.yanzhenjie.xxooprovider这样的,而这个xxooprovider需要继承actionprovider,具体的操作也全都是在actionprovider中完成。

首先继承actionprovider

这里要坐下特殊说明,因为toolbar是support包下的,所以我们要用support下的actionprovider类,这个类是在support.v4下,它是兼容toolbar和actionbar的,所以我们自定义好这个actionprovider类后就可以在toolbar和actionbar中随意使用了。

因为我们要实现角标,暂且把这个类名叫badgeactionprovider吧,继承actionprovider需要实现oncreateactionview()方法:

public class badgeactionprovider extends actionprovider {
  public badgeactionprovider(context context) {
    super(context);
  }

  @override
  public view oncreateactionview() {
    return view;
  }
}

自定义布局:要显示的badgeview

我们看到oncreateactionview()类需要return 一个view,这个view就是我们要自定义的view,所以我们接着来定义显示的view,很简单就是文章开头分析的一个imageview和一个textview:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="match_parent"
  android:background="?actionbaritembackground">

  <imageview
    android:id="@+id/iv_icon"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_centerinparent="true"
    android:scaletype="center" />

  <textview
    android:id="@+id/tv_badge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignparentend="true"
    android:layout_alignparentright="true"
    android:layout_margin="2dp"
    android:background="@drawable/circle_red"
    android:gravity="center"
    android:text="0"
    android:textcolor="@android:color/white"
    android:textsize="12sp" />

</relativelayout>

上述代码中需要解释的只有android:background="?actionbaritembackground"是引用系统默认toolbar/actionbar的menu的点击效果。textview的android:background="@drawable/circle_red"就是那个圆形的红色背景啦。

actionprovider和自定义布局的结合

上面继承也完了,自定义布局也写好了,接下来就是二者的结合:

public class badgeactionprovider extends actionprovider {

  private imageview mivicon;
  private textview mtvbadge;

  // 用来记录是哪个view的点击,这样外部可以用一个listener接受多个menu的点击。
  private int clickwhat;
  private onclicklistener onclicklistener;

  public badgeactionprovider(context context) {
    super(context);
  }

  @override
  public view oncreateactionview() {
    int size = getcontext().getresources().getdimensionpixelsize(
    android.support.design.r.dimen.abc_action_bar_default_height_material);

    viewgroup.layoutparams layoutparams = new viewgroup.layoutparams(size, size);
    view view = layoutinflater.from(getcontext())
    .inflate(r.layout.menu_badge_provider, null, false);

    view.setlayoutparams(layoutparams);
    mivicon = (imageview) view.findviewbyid(r.id.iv_icon);
    mtvbadge = (textview) view.findviewbyid(r.id.tv_badge);
    view.setonclicklistener(onviewclicklistener);
    return view;
  }

  // 点击处理。
  private view.onclicklistener onviewclicklistener = new view.onclicklistener() {
    @override
    public void onclick(view v) {
      if (onclicklistener != null)
        onclicklistener.onclick(clickwhat);
    }
  };

  // 外部设置监听。
  public void setonclicklistener(int what, onclicklistener onclicklistener) {
    this.clickwhat = what;
    this.onclicklistener = onclicklistener;
  }

  public interface onclicklistener {
    void onclick(int what);
  }
}

上面的代码唯一有疑惑的地方:

int size = getcontext().getresources().getdimensionpixelsize(
        android.support.design.r.dimen.abc_action_bar_default_height_material);

这一句是读取support下toolbar/actionbar的高度,为了让这个menu高和宽和系统的menu达到一致。

好了到这里actionprovider的自定义就基本结束了,最多再添加些自定义的方法啦:

// 设置图标。
public void seticon(@drawableres int icon) {
  mivicon.setimageresource(icon);
}

// 设置显示的数字。
public void setbadge(int i) {
  mtvbadge.settext(integer.tostring(i));
}

// 设置文字。
public void settextint(@stringres int i) {
  mtvbadge.settext(i);
}

// 设置显示的文字。
public void settext(charsequence i) {
  mtvbadge.settext(i);
}

如何使用自定义actionprovider

现在就要回到文章的开头了,给android:actionproviderclass属性填写完整的自定义actionprovider类名,之前说过这里是supprt的类,所以这里要稍微变动下:

<?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_pic"
    android:title="严振杰的博客"
    app:actionproviderclass="com.yanzhenjie.badgeactionprovider"
    app:showasaction="always" />
</menu>

我们注意到这里变成了app:actionproviderclass,是因为xml的头部引入了xmlnamespace。

java代码控制自定义menu

上面menu.xml准备工作都做完了,接下来就是用java代码加载这个xml到我们的activity或者fragment中啦,这里我们以activity为例,我们继承appcompatactivity。

首先在加载menu的时候记录下我们刚才自定义的actionprovider:

private badgeactionprovider mactionprovider;

@override
public boolean oncreateoptionsmenu(menu menu) {
  getmenuinflater().inflate(r.menu.menu_main, menu);

  menuitem menuitem = menu.finditem(r.id.menu_delete);
  mactionprovider = (badgeactionprovider) menuitemcompat.getactionprovider(menuitem);
  mactionprovider.setonclicklistener(0, onclicklistener);// 设置点击监听。
  return true;
}

特别注意:好多同学在这里setonclicklistener时出现了空指针异常,原因是app:actionproviderclass="com.yanzhenjie.badgeactionprovider"这句代码中引用的自定义类名错误,你要填成你的包名,不要复制博客这里的。

这里设置点击监听在上文也强调过了,这里有个坑要讲一下,我们刚才不是提供了几个方法设置icon和text吗,不能在oncreateoptionsmenu()直接调用,因为actionprovider还没有加载初始化完成,所以如果我们动态初始化设置icon和text,需要在onwindowfocuschanged()中:

@override
public void onwindowfocuschanged(boolean hasfocus) {
  super.onwindowfocuschanged(hasfocus);
  mactionprovider.seticon(r.mipmap.ic_action_delete_small);
  mactionprovider.seticon(r.mipmap.ic_action_picture);
}

这里也要说明下,只是在oncreateoptionsmenu()不能直接初始化,等oncreateoptionsmenu()方法执行完了就可以随意调用了。

所以现在可以随意设置显示的文字和图标啦,那么我们文章开头提到的几个目标也全部完成了,

源码下载:http://xiazai.jb51.net/201609/yuanma/androidactionprovider(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。