安卓顶部tab导航栏的实现

市面上许多APP都有顶部导航栏效果：下面我们自己来实现这个效果

首先我们先实现顶部导航条的布局

顶部导航栏：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#EEEEEE"
        android:orientation="horizontal" >


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:gravity="center" >


            <TextView
                android:id="@+id/id_tv_chat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="聊天 "
                android:textColor="#00FF00" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:gravity="center" >


            <TextView
                android:id="@+id/id_tv_search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="发现"
                android:textColor="#000000" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:gravity="center" >


            <TextView
                android:id="@+id/id_tv_contact"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="通讯录"
                android:textColor="#000000" />
        </LinearLayout>
    </LinearLayout>


    <ImageView
        android:id="@+id/id_iv_tabLine"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:background="@drawable/tabline" />


</LinearLayout>

然后ViewPage+Fragment实现页面的切换，我们监听 ViewPage 的new OnPageChangeListener()事件其中有3个方法。分别是onPageSelected、onPageScrolled、onPageScrollStateChanged。

 在OnPageSelected中获取当前页面下标、

public void onPageSelected(int position) {
// TODO Auto-generated method stub
mCurrentPageIndex = position;

}

在onPageScroled方法中，改变导航条的左Margin大小，实现导航条的移动。

//得到导航条在该布局中的参数

LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) iv_tabLine
.getLayoutParams();

//根据不同的页面切换，对导航条的左Margin进行不同的设置

if (mCurrentPageIndex == 0 && position == 0)// 0->1
{
lp.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex
* mScreen1_3);
} else if (mCurrentPageIndex == 1 && position == 0)// 1->0
{
lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
* mScreen1_3);
} else if (mCurrentPageIndex == 1 && position == 1){//1->2
lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset * mScreen1_3);
} else if (mCurrentPageIndex == 2 && position == 1){
lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1) * mScreen1_3);
}

//设置导航条的属性
iv_tabLine.setLayoutParams(lp);