自定義頂端頂部導航欄（可配合ViewPager使用）
阿新 • • 發佈：2019-02-01
最近做專案，需要有類似網易新聞頂端的導航欄的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更改頁面即可。
效果圖：
