打造Material Design风格的TabBar

自从Material Design问世以来, 各种Material Design风格的控件层出不穷, 尤其是google家的几个APP更是将Material Design应用到了极致. 最近在使用google photos的时候发现这款软件的Tabbar做的非常不错, 内容突出, Material Design风味很浓, 再者, 我还没有做过一个Material Design风格的Tabbar, 所以萌生了仿照一个google photos这种tabbar的念想, 今天我们就来一步步的去实现一下这种tabbar. 在开始之前, 我们先来看看效果咋样:

仔细观察效果,我们可以发现有一下几个特点:

1. 选中的条目会有一个变色的效果
2. 选中的条目会有一个放大突出的效果
3. 选中的时候条目的背景有一个波纹效果

我们再开始讲解实现代码之前先来看看这样的控件如何使用, 这样再下面讲解实现代码的时候才会更加清晰.

如何使用

如果你现在正在使用android studio， 那恭喜你， 可以使用一下compile语句引入MDTab.

compile 'org.loader:mdtab:1.0.0'

如果你还在使用eclipse的话， 有两种选择：
1. 更换android studio
2. 文章最后我会给出源码， 可以自行下载源码

该控件再使用方式上和普通的控件没有什么区别, 也是在布局文件中添加,

<org.loader.mdtab.MDTab
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:textSize="12sp"
    app:checked_color="#FF0000FF"
    app:checked_percent="130%"
    app:normal_color="@android:color/black"
    app:ripple_color="#22448aca"
    android:background="@android:color/white"
    app:tab_padding="5dp" />

这里有几个属性条目需要说明一下, 首先我们可以通过android:textSize属性来指定默认字体的大小, 通过app:checked_percent属性来指定选中的条目放大多少, 这里指定为130%说明选中的时候字体是默认字体的1.3倍, app:normal_color和app:checked_color这一组是指定颜色的,前者指定默认颜色, 后者指定选中的颜色, app:ripple_color是选中时那个波纹的颜色, 通过app:tab_padding来指定tabbar的上下边距.

上面的代码我们并没有指定条目的图片和文字, 那应该就是在java文件中写了, 再来看看java文件咋写吧.

MDTab tab = (MDTab) findViewById(R.id.tab);
tab.setAdapter(new Adapter());
tab.itemChecked(0);
tab.setOnItemCheckedListener(new MDTab.OnItemCheckedListener() {
  @Override
  public void onItemChecked(int position, View view) {
    Toast.makeText(MainActivity.this, mMenus[position], Toast.LENGTH_SHORT).show();
  }
});

第二行代码我们设置了一个Adapter, 我们可以猜到数据肯定是在Adapter里提供的, 第三行我们通过调用tab.itemChecked(0)来默认选中第一个条目, 第四行代码我们监听了条目的选中事件, 这里都很好理解, 我们再来看看Adapter如何实现.

class Adapter extends MDTab.TabAdapter {

  @Override
  public int getItemCount() {
    return mMenus.length;
  }

  @Override
  public Drawable getDrawable(int position) {
    int res = getResources().getIdentifier("icon_" + position, "drawable", getPackageName());
    return getResources().getDrawable(res);
  }

  @Override
  public CharSequence getText(int position) {
    return mMenus[position];
  }
}

这里的Adapter要继承MDTab的一个名叫TabAdapter的内部类, 有两个方法我们需要说明一下, getDrawable方法我们要根据参数返回该条目对应的图标, 如果不需要图标我们可以返回null, getText方法是返回的条目的文本. ok, 简单几行代码我们就实现了上面的效果, 再知道如何使用后, 我们开始MDTab的实现.

波纹背景的实现

在上面的效果中我们发现, 每个条目在点击的时候会有一个波纹效果, 这里我们为了向下兼容, 并没有使用Android默认的波纹效果, 而是完全自己实现了一个带有波纹效果的控件, 我们就叫它RippleButton吧, 接下来我们就来看看这个RippleButton如何实现.

public class RippleButton extends TextView {
   

    private Paint mPaint; // 绘制波纹的画笔

    private int mStepSize; // 波纹变化的步长
    private int mMinRadius = 0; // 波纹从多大开始变化
    private int mRadius; // 当前的波纹大小
    private int mMaxRadius; // 波纹最大大小
    private int mCenterX; // 该控件的中心位置