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

 

 

<LinearLayout xmlns: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哦。這里由於時間關系就不寫了，大家自己補充吧。