自定义顶端顶部导航栏（可配合ViewPager使用）

最近做项目，需要有类似网易新闻顶端的导航栏的ui组件，但是就是有切换动画的那种，于是就自己动手写了一个，看了我的文章，如果有什么问题，欢迎大家交流哦。

实现原理：通过OnPageChangeListener的onPageScrolled（）事件获取当前页面的偏移量，从而改变导航栏指示器的位置

请看代码：

java代码：

import android.content.Context;
import android.os.Handler;
import android.support.v7.widget.CardView;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.support.v4.view.ViewPager;
import android.widget.ImageView;

/**
* Created by 猪屎秋 on 2016/10/13.
*/

public class NavigationBar extends CardView implements ViewPager.OnPageChangeListener {

//继承的类可以不是cardview，只要是viewgroup就可以了

private ImageView nav_indicator;

public NavigationBar(Context context, AttributeSet attributeSet) {
super(context,attributeSet);
LayoutInflater.from(context).inflate(R.layout.navigation_bar,this);

init();

}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.d("Nav_P",""+position);
Log.d("Nav_O",""+positionOffset);
Log.d("Nav_POP",""+positionOffsetPixels);
nav_indicator.setX(position*getResources().getDisplayMetrics().widthPixels/3+positionOffsetPixels/3);//getResources().getDisplayMetrics().widthPixels获取屏幕宽度，除以3是因为我的导航栏只有3个，实际情况可以自己改的，这句是关键代码哦
}

@Override
public void onPageSelected(int position) {

}

@Override
public void onPageScrollStateChanged(int state) {

}

public void init()
{
nav_indicator=(ImageView)findViewById(R.id.nav_indicator);
nav_indicator.setMaxWidth(getResources().getDisplayMetrics().widthPixels/3);
nav_indicator.setMinimumWidth(getResources().getDisplayMetrics().widthPixels/3);
}
}

导航栏界面布局代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="75dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="NAV1"
android:layout_weight="1"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="NAV2"
android:layout_weight="1"
android:gravity="center"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="NAV3"
android:layout_weight="1"
android:gravity="center"/>
</LinearLayout>
<ImageView
android:id="@+id/nav_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/nav_indicator"
android:contentDescription="指示器"
android:layout_gravity="bottom"/>
</FrameLayout>

最后只需要设置viewpager的OnPageChangeListener了：

NavigationBar navigationBar=(NavigationBar)findViewById(R.id.nav_bar);
pager.addOnPageChangeListener(navigationBar);

PS：如果需要给导航栏添加点击事件，只需要在NavigationBar类中添加一个Handler，当导航按钮被点击时发送相应的message，然后再在其他地方处理该message，让viewpager更改页面即可。

效果图：