帶有訓示器的自定義底部導航欄的實作

  轉載請注明出處：http://blog.csdn.net/zhaokaiqiang1992

    今天這篇文章，主要是給大家實作一個自定義的帶有訓示器的底部導航欄。

    先看一下實作的效果吧。

  這個自定義控件的使用要注意以下幾個方面：

    1.沒有布局檔案及資源檔案，隻需要一個java檔案就可調用

    2.可以非常靈活的使用，一句代碼就可以添加到項目中

    3.暫時隻支援4.0以上版本，顔色值使用的是系統自帶色值，如需在低版本使用，請自己替換顔色值

    4.支援智能适配，可以根據底部按鈕的數量，自動的調整布局

    5.主内容區域，必須使用Fragment實作，通過附加到Viewpager上實作界面的左右滑動

   下面給出主程式的實作，注釋很清楚哈

[java]  view plain copy

1. package com.example.indicatornavigationbar;  
2. import android.app.Activity;  
3. import android.content.Context;  
4. import android.support.v4.view.ViewPager;  
5. import android.support.v4.view.ViewPager.OnPageChangeListener;  
6. import android.util.DisplayMetrics;  
7. import android.view.Gravity;  
8. import android.view.View;  
9. import android.view.View.OnClickListener;  
10. import android.view.ViewGroup;  
11. import android.view.animation.Animation;  
12. import android.view.animation.TranslateAnimation;  
13. import android.widget.ImageView;  
14. import android.widget.ImageView.ScaleType;  
15. import android.widget.LinearLayout;  
16. import android.widget.TextView;  
17. public class IndicatorNavigationBar extends LinearLayout implements  
18.         OnClickListener, OnPageChangeListener {  
19.     // 導航欄預設高度，不包括訓示器高度，機關是dp  
20.     private static final int HEIGHT_NAVIGATION_BAR = 40;  
21.     // 訓示器預設高度，機關是dp  
22.     private static final int HEIGHT_INDICATOR = 4;  
23.     private Context context;  
24.     private ViewPager viewPager;  
25.     // 訓示器  
26.     private ImageView ivBottomLine;  
27.     // 目前顯示的index  
28.     private int currIndex = 0;  
29.     // 存儲移動位置  
30.     private int positions[];  
31.     // 标題數量  
32.     private int titleCount;  
33.     public IndicatorNavigationBar(Context context) {  
34.         super(context);  
35.         this.context = context;  
36.     }  
37.     public void attachToParent(ViewGroup viewGroup, String[] titles,  
38.             ViewPager viewPager) {  
39.         this.viewPager = viewPager;  
40.         titleCount = titles.length;  
41.         // 初始化主布局  
42.         setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,  
43.                 dip2px(HEIGHT_NAVIGATION_BAR + HEIGHT_INDICATOR)));  
44.         setBackgroundColor(getResources().getColor(android.R.color.transparent));  
45.         setOrientation(VERTICAL);  
46.         // 導航欄布局  
47.         LinearLayout ll_navigation = new LinearLayout(context);  
48.         ll_navigation.setLayoutParams(new LayoutParams(  
49.                 LayoutParams.MATCH_PARENT, dip2px(HEIGHT_NAVIGATION_BAR)));  
50.         ll_navigation.setBackgroundColor(getResources().getColor(  
51.                 android.R.color.holo_blue_light));  
52.         ll_navigation.setOrientation(HORIZONTAL);  
53.         // 生成導航按鈕(TextView)  
54.         for (int i = 0; i < titles.length; i++) {  
55.             TextView textView = new TextView(context);  
56.             textView.setLayoutParams(new LayoutParams(0,  
57.                     dip2px(HEIGHT_NAVIGATION_BAR), 1));  
58.             textView.setText(titles[i]);  
59.             textView.setGravity(Gravity.CENTER);  
60.             textView.setTextSize(16);  
61.             textView.setTextColor(getResources()  
62.                     .getColor(android.R.color.white));  
63.             textView.setId(i);  
64.             textView.setOnClickListener(this);  
65.             ll_navigation.addView(textView);  
66.         }  
67.         // 添加導航  
68.         this.addView(ll_navigation);  
69.         // 訓示器布局  
70.         LinearLayout ll_indicator = new LinearLayout(context);  
71.         ll_indicator.setLayoutParams(new LayoutParams(  
72.                 LayoutParams.MATCH_PARENT, dip2px(HEIGHT_INDICATOR)));  
73.         ll_indicator.setBackgroundColor(getResources().getColor(  
74.                 android.R.color.holo_blue_light));  
75.         ll_indicator.setOrientation(HORIZONTAL);  
76.         // 訓示器  
77.         ivBottomLine = new ImageView(context);  
78.         ivBottomLine.setImageResource(android.R.color.holo_orange_light);  
79.         ivBottomLine.setScaleType(ScaleType.MATRIX);  
80.         ivBottomLine  
81.                 .setLayoutParams(new LinearLayout.LayoutParams(  
82.                         getScreenWidth(context) / titleCount,  
83.                         dip2px(HEIGHT_INDICATOR)));  
84.         ll_indicator.addView(ivBottomLine);  
85.         // 添加訓示器  
86.         this.addView(ll_indicator);  
87.         viewGroup.addView(this);  
88.         viewPager.setOnPageChangeListener(this);  
89.         // 初始化移動位置  
90.         positions = new int[titleCount];  
91.         positions[0] = 0;  
92.         int distance = (int) (getScreenWidth(context) / titleCount);  
93.         for (int i = 1; i < titleCount; i++) {  
94.             positions[i] = distance * i;  
95.         }  
96.     }  
97.     @Override  
98.     public void onClick(View v) {  
99.         viewPager.setCurrentItem(v.getId());  
100.     }  
101.     @Override  
102.     public void onPageScrollStateChanged(int arg0) {  
103.     }  
104.     @Override  
105.     public void onPageScrolled(int position, float positionOffset,  
106.             int positionOffsetPixels) {  
107.     }  
108.     @Override  
109.     public void onPageSelected(int position) {  
110.         Animation animation = new TranslateAnimation(currIndex * positions[1],  
111.                 positions[position], 0, 0);  
112.         currIndex = position;  
113.         animation.setFillAfter(true);  
114.         animation.setDuration(300);  
115.         ivBottomLine.startAnimation(animation);  
116.     }  
117.     private int dip2px(float dpValue) {  
118.         final float scale = context.getResources().getDisplayMetrics().density;  
119.         return (int) (dpValue * scale + 0.5f);  
120.     }  
121.     // 擷取螢幕寬度  
122.     private int getScreenWidth(Context context) {  
123.         DisplayMetrics dm = new DisplayMetrics();  
124.         ((Activity) context).getWindowManager().getDefaultDisplay()  
125.                 .getMetrics(dm);  
126.         return dm.widthPixels;  
127.     }  
128. }  

    在我的github上可以下載下傳這個項目的DEMO

    https://github.com/ZhaoKaiQiang/IndicatorNavigationBar