Android自定義ActionProvider ToolBar實(shí)現(xiàn)Menu小紅點(diǎn)

更新時(shí)間：2016年09月13日 10:26:09 作者：yanzhenjie1003

這篇文章主要介紹了Android自定義ActionProvider ToolBar實(shí)現(xiàn)Menu小紅點(diǎn),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天的幾個(gè)目標(biāo)：
1. 自定義ActionProvider
2. Toolbar ActionBar自定義Menu
3. Toolbar ActionBar 右側(cè)Menu添加角標(biāo)（Toolbar ActionBar Menu添加小紅點(diǎn)）
源代碼在文章末尾。

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

效果預(yù)覽

自定義Menu后不影響原生MD的任何效果?？梢酝ㄟ^外部來(lái)控制顯示的文字和顏色等屬性。

需求描述與分析

通常我們會(huì)自定義Titlebar，可以實(shí)現(xiàn)很多自定義的效果。但是后來(lái)Toolbar出來(lái)后實(shí)在太好用了，于是乎我們都使用了Toolbar但是我們要給右側(cè)的Menu Button實(shí)現(xiàn)類似BadgeView的這種效果（如上圖小紅點(diǎn)）怎么辦呢呢？

看到這個(gè)要求后沒有玩過ActionProvider的同學(xué)可能就慌了，但是請(qǐng)先跟我來(lái)分析下這個(gè)Menu的組成：一個(gè)ImageView顯示icon，一個(gè)TextView顯示數(shù)字，TextView還有個(gè)圓形的背景（可以是任何形狀或者顏色）。那么就不能用系統(tǒng)的menu.xml這種來(lái)做了，所以要自定義Menu，有人可能想到了自定義View，but并不需要。

我們通常寫menu的時(shí)候在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="嚴(yán)振杰的博客"
    app:showAsAction="always" />
</menu>

其實(shí)這個(gè)menu的item有一個(gè)android:actionProviderClass屬性，用這個(gè)屬性就可以自定義在這里顯示的內(nèi)容（View），這個(gè)屬性的值是一個(gè)完整的類名，例如com.yanzhenjie.XXOOProvider這樣的，而這個(gè)XXOOProvider需要繼承ActionProvider，具體的操作也全都是在ActionProvider中完成。

首先繼承ActionProvider

這里要坐下特殊說明，因?yàn)門oolbar是support包下的，所以我們要用support下的ActionProvider類，這個(gè)類是在support.v4下，它是兼容Toolbar和ActionBar的，所以我們自定義好這個(gè)ActionProvider類后就可以在Toolbar和ActionBar中隨意使用了。

因?yàn)槲覀円獙?shí)現(xiàn)角標(biāo)，暫且把這個(gè)類名叫BadgeActionProvider吧，繼承ActionProvider需要實(shí)現(xiàn)onCreateActionView()方法：

public class BadgeActionProvider extends ActionProvider {
  public BadgeActionProvider(Context context) {
    super(context);
  }

  @Override
  public View onCreateActionView() {
    return view;
  }
}

自定義布局：要顯示的BadgeView

我們看到onCreateActionView()類需要return 一個(gè)View，這個(gè)View就是我們要自定義的View，所以我們接著來(lái)定義顯示的View，很簡(jiǎn)單就是文章開頭分析的一個(gè)ImageView和一個(gè)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"是引用系統(tǒng)默認(rèn)Toolbar/ActionBar的Menu的點(diǎn)擊效果。TextView的android:background="@drawable/circle_red"就是那個(gè)圓形的紅色背景啦。

ActionProvider和自定義布局的結(jié)合

上面繼承也完了，自定義布局也寫好了，接下來(lái)就是二者的結(jié)合：

public class BadgeActionProvider extends ActionProvider {

  private ImageView mIvIcon;
  private TextView mTvBadge;

  // 用來(lái)記錄是哪個(gè)View的點(diǎn)擊，這樣外部可以用一個(gè)Listener接受多個(gè)menu的點(diǎn)擊。
  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;
  }

  // 點(diǎn)擊處理。
  private View.OnClickListener onViewClickListener = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
      if (onClickListener != null)
        onClickListener.onClick(clickWhat);
    }
  };

  // 外部設(shè)置監(jiān)聽。
  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的高度，為了讓這個(gè)Menu高和寬和系統(tǒng)的menu達(dá)到一致。

好了到這里ActionProvider的自定義就基本結(jié)束了，最多再添加些自定義的方法啦：

// 設(shè)置圖標(biāo)。
public void setIcon(@DrawableRes int icon) {
  mIvIcon.setImageResource(icon);
}

// 設(shè)置顯示的數(shù)字。
public void setBadge(int i) {
  mTvBadge.setText(Integer.toString(i));
}

// 設(shè)置文字。
public void setTextInt(@StringRes int i) {
  mTvBadge.setText(i);
}

// 設(shè)置顯示的文字。
public void setText(CharSequence i) {
  mTvBadge.setText(i);
}

如何使用自定義ActionProvider

現(xiàn)在就要回到文章的開頭了，給android:actionProviderClass屬性填寫完整的自定義ActionProvider類名，之前說過這里是supprt的類，所以這里要稍微變動(dòng)下：

<?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="嚴(yán)振杰的博客"
    app:actionProviderClass="com.yanzhenjie.BadgeActionProvider"
    app:showAsAction="always" />
</menu>

我們注意到這里變成了app:actionProviderClass，是因?yàn)閤ml的頭部引入了xmlnamespace。

Java代碼控制自定義Menu

上面menu.xml準(zhǔn)備工作都做完了，接下來(lái)就是用java代碼加載這個(gè)xml到我們的Activity或者Fragment中啦，這里我們以Activity為例，我們繼承AppCompatActivity。

首先在加載menu的時(shí)候記錄下我們剛才自定義的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);// 設(shè)置點(diǎn)擊監(jiān)聽。
  return true;
}

特別注意：好多同學(xué)在這里setOnClickListener時(shí)出現(xiàn)了空指針異常，原因是app:actionProviderClass="com.yanzhenjie.BadgeActionProvider"這句代碼中引用的自定義類名錯(cuò)誤，你要填成你的包名，不要復(fù)制博客這里的。

這里設(shè)置點(diǎn)擊監(jiān)聽在上文也強(qiáng)調(diào)過了，這里有個(gè)坑要講一下，我們剛才不是提供了幾個(gè)方法設(shè)置icon和text嗎，不能在onCreateOptionsMenu()直接調(diào)用，因?yàn)锳ctionProvider還沒有加載初始化完成，所以如果我們動(dòng)態(tài)初始化設(shè)置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()方法執(zhí)行完了就可以隨意調(diào)用了。

所以現(xiàn)在可以隨意設(shè)置顯示的文字和圖標(biāo)啦，那么我們文章開頭提到的幾個(gè)目標(biāo)也全部完成了，

源碼下載：http://xiazai.jb51.net/201609/yuanma/AndroidActionProvider(jb51.net).rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: