市面上许多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);