Android UI設計——ViewPage中自定義標題欄(四)

　　我們在上一篇博客《Android UI設計——ViewPage中PagerTabStrip與PagerTitleStrip添加標題欄(三)》 中學習了如何為ViewPager添加標題，劃分類目，我們使用的是Google給我們提供的PagerTabStrip與PagerTitleStrip兩個控件。通過博客中我們也可以看到，使用PagerTabStrip與PagerTitleStrip控件添加的標題欄在實際的開發中很少見到。大部分還是使用自定義的標題欄，接下來我們看看如何添加自定義的標題欄……

1. 定義總體布局。我們使用相對布局，使用前我們首先要知道相對布局的布局方式有先來後到，如果兩個布局重疊的話，先定義的控件會被放在布局的下面。這裡我們定義一個ViewPager充滿相對布局，在相對布局的頂端Top處再放置一個線性布局，分別來放置ViewPager不同頁面的Title，在線性布局的下面放置一個ImageView用於實現滾動條動畫的滾動。

2. 這一步大家都很熟悉，自定義MyPagerAdapter，繼承PagerAdapter實現其中的四個方法：
getCount()
isViewFromObject(View, Object)
instantiateItem(ViewGroup, int)
destroyItem(ViewGroup, int, Object)

public class MyPagerAdapter extends PagerAdapter {
    private List mViews;//三個布局的集合
    /*
    通過構造器獲得數據
     */
    public MyPagerAdapter(List mViews) {
        this.mViews = mViews;
    }

    @Override
    public int getCount() {
        return mViews.size();//顯示的布局的數量，我們這裡為三個。
    }

    @Override
    public boolean isViewFromObject(View view, Object o) {
        return view == o;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //增加View
        container.addView(mViews.get(position));
        return mViews.get(position);
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //刪除View
        container.removeView(mViews.get(position));
    }
}

3. Activity中定義ViewPager對象，將三個布局頁面通過適配器MyPagerAdapter添加到ViewPager中。通過監聽ViewPager的動作，來實現滾動條動畫的切換。縣貼出全部代碼，隨後逐步講解。

public class DefineTitleActivity extends Activity {

    private List mViews;
    private LayoutInflater mInflater;
    private ViewPager mViewPager;
    private ImageView mImageCursor;//滾動條的動畫。
    private int mCursorWidth;//動畫的寬度。
    private int mOffset;//動畫圖片的偏移量。
    private int currIndex = 0;//當前頁碼編號
    private MyPagerAdapter myPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_define_title);

        mViewPager = (ViewPager) findViewById(R.id.viewpager_define_title);
        mInflater = getLayoutInflater();
        //初始化頁面數據。
        mViews = new ArrayList();
        View view1 = mInflater.inflate(R.layout.item_frist, null);
        View view2 = mInflater.inflate(R.layout.item_second, null);
        View view3 = mInflater.inflate(R.layout.item_third, null);
        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);

        initCursorPos();
        myPagerAdapter = new MyPagerAdapter(mViews);
        mViewPager.setAdapter(myPagerAdapter);
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            int one = mOffset * 2 + mCursorWidth;// 頁卡1 -> 頁卡2 偏移量
            int two = one * 2;// 頁卡1 -> 頁卡3 偏移量
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            /*
            通過事件的監聽，實現動畫的切換
             */
            @Override
            public void onPageSelected(int position) {
                Animation animation = null;
                switch (position) {
                    case 0:
                        if (currIndex == 1) {
                            animation = new TranslateAnimation(one, 0, 0, 0);
                        } else if (currIndex == 2) {
                            animation = new TranslateAnimation(two, 0, 0, 0);
                        }
                        break;
                    case 1:
                        if (currIndex == 0) {
                            animation = new TranslateAnimation(mOffset, one, 0, 0);
                        } else if (currIndex == 2) {
                            animation = new TranslateAnimation(two, one, 0, 0);
                        }
                        break;
                    case 2:
                        if (currIndex == 0) {
                            animation = new TranslateAnimation(mOffset, two, 0, 0);
                        } else if (currIndex == 1) {
                            animation = new TranslateAnimation(one, two, 0, 0);
                        }
                        break;
                }
                currIndex = position;
                animation.setFillAfter(true);// True:圖片停在動畫結束位置
                animation.setDuration(300);
                mImageCursor.startAnimation(animation);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }
    /*
    初始化動畫的方法
     */
    private void initCursorPos() {
        // 初始化動畫
        mImageCursor = (ImageView) findViewById(R.id.imageview_cursor);
        mCursorWidth = BitmapFactory.decodeResource(getResources(), R.mipmap.image).getWidth();// 獲取圖片寬度
        //獲得屏幕的寬度
        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        int screenW = metrics.widthPixels;
        // 計算偏移量
        mOffset = (screenW / mViews.size() - mCursorWidth) / 2;
        // 設置動畫初始位置
        Matrix matrix = new Matrix();
        matrix.postTranslate(mOffset, 0);
        mImageCursor.setImageMatrix(matrix);
    }
}

　　這一塊稍微有點難理解，在Activity中我們首先進行了頁面數據的初始化，然後將頁面通過適配器添加到ViewPager中。然後我們通過監聽ViewPager對象，當頁面變化時，我們需要將滾動條圖片移動位置。然後，難點來了，我們如何移動位置？移動多少？
　　
　　我們通過下面這個圖片來理解滾動條動畫的設置。
　　


（此處圖片引用於<喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPsG0vdM8c3Ryb25nPqOpPC9zdHJvbmc+PC9wPg0KPHA+PHN0cm9uZz7J6NbDs/XKvLavu621xM671sM8L3N0cm9uZz48L3A+DQo8cHJlIGNsYXNzPQ=="brush:java;"> private void initCursorPos() { // 初始化動畫 mImageCursor = (ImageView) findViewById(R.id.imageview_cursor); mCursorWidth = BitmapFactory.decodeResource(getResources(), R.mipmap.image).getWidth();// 獲取圖片寬度 //獲得屏幕的寬度 DisplayMetrics metrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metrics); int screenW = metrics.widthPixels; // 計算偏移量 mOffset = (screenW / mViews.size() - mCursorWidth) / 2; // 設置動畫初始位置 Matrix matrix = new Matrix(); matrix.postTranslate(mOffset, 0); mImageCursor.setImageMatrix(matrix); }

在監聽中通過重寫onPageSelected(int position)方法，實現動畫的切換。

             /*
            通過事件的監聽，實現動畫的切換
             */
            @Override
            public void onPageSelected(int position) {
                Animation animation = null;
                switch (position) {
                    case 0:
                        if (currIndex == 1) {
                            animation = new TranslateAnimation(one, 0, 0, 0);
                        } else if (currIndex == 2) {
                            animation = new TranslateAnimation(two, 0, 0, 0);
                        }
                        break;
                    case 1:
                        if (currIndex == 0) {
                            animation = new TranslateAnimation(mOffset, one, 0, 0);
                        } else if (currIndex == 2) {
                            animation = new TranslateAnimation(two, one, 0, 0);
                        }
                        break;
                    case 2:
                        if (currIndex == 0) {
                            animation = new TranslateAnimation(mOffset, two, 0, 0);
                        } else if (currIndex == 1) {
                            animation = new TranslateAnimation(one, two, 0, 0);
                        }
                        break;
                }
                currIndex = position;
                animation.setFillAfter(true);// True:圖片停在動畫結束位置
                animation.setDuration(300);
                mImageCursor.startAnimation(animation);
            }