Android开发之自定义局部导航菜单

　如今，要实现导航功能方案有很多。比如：

　　1、用3.0+自带的Toolbar + Fragment导航。

　　2、用Tabhost实现导航。小弟学浅，就只用过这两种方案实现导航。

　　但是这两种方案都有一个很明显的弊端：导航的位置太过于固定了。比如Toolbar的就只能在标题栏处（ps：源码修改大神跳过）。还有Tabhost，虽然自定义Tabhost比直接继承TabActivity更加灵活，但是却没有选项切换动画（ps：也许是我没发现）。

　　  

　　有时候，我们仅仅是想在一个画面的一角处，贴上一个导航，用于切换导航啊，属性设置之内的。这个时候不管是Toolbar还是Tabhost都有些大材小用，心有余而力不足的感觉了。比如下图所示：

最近刚好项目有这方面的需要，就查了点资料。发现原理其实挺简单的，如下图：

上面几个tab用Button或者TextView来做就行，反正能响应点击就行。下面的ImageView用于切换动画，比如默认是tab1，这个时候点击了tab3，那么下面的ImageView就从tab1移动到tab3并且停留。

原理讲明白之后，接下来就是具体的实现了，一般这类需要都能有两种方式实现：

1. 用xml中实现
2. 用java代码动态实现。

Xml界面与java代码控制分离是Android开发的亮点，也是无数入门书籍的敲门砖，但是这种实现就有一种非常大的局限性：今天这个项目有3个tab，明天的项目有4个tab，这个时候需要去改xml不说，还要去改一些底层实现，比如对ImageView的宽度的压缩等等。为了移植性和拓展性，我选择了java代码实现，直接subClass LinearLayout来实现。我只做了一些基本的操作，大家可以在我的代码上添加自己的操作，比如给每一个tab添加selector，添加事件回调等等。先上图，我的最精简实现：

 

中间的移动是有动画效果的哈，不是直接点哪儿就出现在哪儿，太生硬了。

接下来讲解具体的实现过程：

1. 子类化LinearLayout，当然也可以选择子类化其他ViewGroup，看个人爱好。

public class CustomMenu extends LinearLayout implements OnClickListener

1. 在attrs.xml文件中申明自定义xml属性

<?xml version="1.0" encoding="utf-8"?>

<resources>

<declare-styleable name="CustomMenu">

<attr name="buttonNumber" format="integer" />

<attr name="indexbitmap" format="reference" />

<attr name="buttonHeight" format="dimension" />

</declare-styleable>

</resources>

其中buttonNumber：导航的tab个数

     indexbitmap：移动的图片，就是下面那一横线

buttonHeight：导航的高度

1. 在xml布局文件添加布局，layout_width与layout_height可以随意使用match_parent、wrap_content、或者限定dp

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

xmlns:custommenu="http://schemas.android.com/apk/res/com.example.fragmentdemo"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView

android:layout_width="match_parent"

android:layout_height="30dp"

android:text="@string/hello_world" />

<com.example.fragmentdemo.fragmentmenu.CustomMenu

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

custommenu:buttonNumber="5"

custommenu:buttonHeight="40dp"

custommenu:indexbitmap="@drawable/a"

>

</com.example.fragmentdemo.fragmentmenu.CustomMenu>

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/hello_world" />

</LinearLayout>

为了突出随意性，故意在上下添加了两个TextView，layout_width与layout_height可以设置为match_parent、wrap_content或者30dp等等。在xml属性中，我将导航栏的数量设置为5个，导航栏的高度为40dp，导航的移动图片为drawable

1. 在java代码中首先读取自定义的xml属性值

private void readXML(Context context,AttributeSet attr){

    TypedArray a = context.obtainStyledAttributes(attr, R.styleable.CustomMenu);

    //读取按钮数量

    buttonNumber = a.getInt(R.styleable.CustomMenu_buttonNumber, 4);

    //读取按钮的高度

    buttonHeight = (int) a.getDimension(R.styleable.CustomMenu_buttonHeight, 30);

    //读取图片

    int bitmapID = a.getResourceId(R.styleable.CustomMenu_indexbitmap, R.drawable.a);

    bitmap = BitmapFactory.decodeResource(getResources(), bitmapID);

    bitmap_width = bitmap.getWidth();

    a.recycle();

}

注释已经写得很清楚了，就是用来读取在xml中自定义的属性，这儿注意buttonNumber、buttonHeight、bitmap、bitmap_width都是成员属性。

1. 添加几个tab，个数是根据buttonNumber限制了的，还有tab的高度也是根据buttonHeight限制了的。

//设置本身为竖直方向

    setOrientation(LinearLayout.VERTICAL);

    //添加一个横向的LinearLayout,高度为设置的高度

    LayoutParams p = new LayoutParams(LayoutParams.MATCH_PARENT, buttonHeight);

    LinearLayout linearLayout = new LinearLayout(context);

    linearLayout.setOrientation(LinearLayout.HORIZONTAL);

    linearLayout.setPadding(0, 0, 0, 0);

    linearLayout.setGravity(Gravity.CENTER);

    addView(linearLayout, p);

    //向这个横向的LinearLayout添加指定个Button

    LayoutParams btn_p = new LayoutParams(LayoutParams.MATCH_PARENT, buttonHeight, 1);

    for(int i = 0;i<buttonNumber;i++){

        Button button = new Button(context);

        button.setText("按钮"+i);

        button.setTextSize(15);

        button.setBackgroundColor(getResources().getColor(R.color.defaultColor));

        button.setId(ID+i);

        button.setOnClickListener(this);

        //添加到容器

        button_container.add(button);

        //添加到布局

        linearLayout.addView(button, btn_p);

    }

这儿首先添加一个横向的LinearLayout用来添加tab，高度用用户输入的值，然后添加用户指定数量的tab（Button），设置权重（weight）为1。在这儿我把Button的文字、背景颜色等都给了默认值，大家可以在xml中拓展，或者在代码中暴露方法让用户设置。这儿有一个ID，我给了默认值

private static final int ID = 0xcc33cc;

这是为了区分onClick事件，大家可以自己选择区分方式，不过在这里用ID是有好处的，后面我会介绍。

1. 添加ImageView，暂时不做处理，因为Bitmap要因为tab的宽度来动态调整

imageView = new ImageView(context);

LayoutParams iv_p = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

iv_p.setMargins(0, 5, 0, 0);

addView(imageView,iv_p);

这里只是放置一个ImageView，具体的内容要等到后面设置，因为内容是动态的，在构造函数期间不能确定其宽高。

1. 在onMearsure方法中，获取本View的宽度与高度

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    //只执行这个方法一次

    if(width==0 || height==0){            

        //得到自身的高度与高度

        width = MeasureSpec.getSize(widthMeasureSpec);

        height = MeasureSpec.getSize(heightMeasureSpec);

        //做其他的初始化

        initial();

    }

}

大家都知道，onMeasure方法会根据传入的参数确定控件的大小。一般在这个方法做控件的动态伸缩和子控件的伸缩。在这里，我只是简单的得到了本控件的宽度和高度。Width和height都是成员变量。这里用了if语句是因为这个方法默认会执行两次，原因呢大概是作为ViewGroup刚开始会绘制一次，填充子控件后又会绘制一次，具体的不太清楚，大家可以查查其他资料。这里用if限定只执行一次。然后在initial()方法中，做剩下的初始化部分。

1. 做一些初始化操作

//如果图片的宽度比按钮的宽度大，则对图片进行处理

if(bitmap_width>width/buttonNumber){

    //缩小图片

    bitmap = dealBitmap(bitmap, (float) (width)/buttonNumber/bitmap_width);

}

private Bitmap dealBitmap(Bitmap bitmap ,float bili) {

    Matrix matrix = new Matrix();

    matrix.postScale(bili, bili); // 长和宽放大缩小的比例

    Bitmap resizeBmp = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix,true);

    return resizeBmp;

}

如果图片的宽度大于了每一个tab的宽度，那么就对图片进行缩放，默认是缩放到与tab等同宽度。大家可以自己定义这个缩放范围。甚至可以通过设置回调接口暴露给外部设置。

//设置偏移值

imageView_offset = (width/buttonNumber-bitmap_width)/2;

//设置图片

imageView.setImageBitmap(bitmap);

//初始化图片位置

initialImageViewOffset();

设置偏移值，这个imageView_offset也是成员变量。目的是让ImageView放在tab的正中间。原理类似于下图：

然后设置bitmap，因为这个时候bitmap的宽高已经确定了。然后调用initialImageViewOffset()方法将刚才确定的offset的值设置进去

private void initialImageViewOffset() {

    //偏移值大于0则进行图片移动

    if(imageView_offset>0){

        Matrix matrix = new Matrix();

        matrix.postTranslate(imageView_offset, 0);

        imageView.setImageMatrix(matrix);

    }

}

这里对offset进行的大于0的判断，因为如上所说，如果bitmap的宽度大于tab的宽度，那么就需要缩放到和tab一样大，这个时候offset自然等于0，就避免了无用功。

1. 添加单击事件

public void onClick(View v) {

    //从当前项移动到点击项

    moveImageView(cur_index, v.getId()-ID);

    //赋值当前项

    cur_index = v.getId() - ID;

}

这里就可以看出用id区分tab的好处了。为了更方便，首先贴出moveImageView的代码

private void moveImageView(int start,int end){

    //要移动的距离

    int length = (2 * imageView_offset + bitmap_width) * (end - start);

    //初始位置，默认的ImageView在离左边的imageView_offset处。

    int offset = (2 * imageView_offset + bitmap_width)*start;

    Animation animation = new TranslateAnimation(offset, offset + length, 0, 0);

    //动画结束后，View停留在结束的位置

    animation.setFillAfter(true);

    animation.setDuration(300);

    imageView.startAnimation(animation);

}

这里的start是指的当前的tab编号，编号是从0开始的，比如tab0、tab1、tab2。

end是指的你点击的tab编号。例如一开始我就点了tab3，那么start=0，end=3。然后我又点了tab2，那么start=3，end=2。

其中length是指要移动的距离，如下图表示：

稍微观察就能看出

int length = (2 * imageView_offset + bitmap_width) * (end - start);

这个关系式。并且包含了正负的情况哦。

Offset是指的动画开始的x坐标，因为刚才默认移动了一个imageView_offset，所以每次的初始x坐标的公式为如下，也相当容易看出来

int offset = (2 * imageView_offset + bitmap_width)*start;

然后就是启动动画效果，从offset移动到offset+length处，并设置setFillAfter(true);方法让控件在动画停止后停留在结束的地方。

大家要注意动画与matrix的区别，动画只做了视觉效果的移动，实际的ImageView并没有移动。而Matrix是移动的ImageView

再返回看onClick方法，

public void onClick(View v) {

    //从当前项移动到点击项

    moveImageView(cur_index, v.getId()-ID);

    //赋值当前项

    cur_index = v.getId() - ID;

}

cur_index是成员变量，初始化为0，大家也可以自己设置初始值，也可以设置其他tab为默认项，不过要是这样做还有两个地方需要修改：

1、initialImageViewOffset你需要将ImageView初始化到当前的tab下。

2、moveImageView方法中的offset的计算公式也要改变。

因为每一个tab的id是通过ID+i变量的形式设置的，这儿可以直接通过v.getId()-ID的方式找到对应的tab。这个就是我所说的方便快捷的原因。

这个只是最简单的实现，大家可以丰富下，比如给button添加selector啊，添加text和监听回调啊、在下面空余的布局添加自定义的布局啊。等等等发挥的余地。对了，因为是导航，别往了添加ViewPager哦。这里由于时间关系就不写了，大家自己补充吧。