Android實現帶Tab頁引導的ViewPager

　　Tab頁很適合用來做平行功能之間的引導，而各功能頁面用ViewPager來展示會顯得比較平滑、過渡自然，所以自然就有了許多軟件將二者結合，用於展示主功能界面，比如網易新聞和360優化大師的主界面，那么下面就來做一個這樣的帶Tab頁的ViewPager吧~

　　基本需求：1，點擊Tab頁，ViewPager做出相應滑動，且Tab頁中有表示切換的動畫

　　　　　　   2，滑動ViewPager，Tab頁中有表示切換的動畫

　　　　　　　3，Tab頁可以動態添加並自行計算所占寬度

　　基本思路是：用一個橫向LinearLayout管理動態加載的Tab頁，下方是ViewPager，再用代碼將二者關聯起來就可以了，代碼如下

public class TabViewPager extends LinearLayout
{
    /* 數據段begin */
    public final static String TAG = "TabViewPager";
    private Context mContext;
    
    private LinearLayout mTabHost;
    private ImageView mUnderline;
    private ViewPager mViewPager;
    
    //tab及underline寬度，也是underline的最小移動距離
    private int mTabWidth;
    /* 數據段end */
    
    /* 函數段begin */
    public TabViewPager(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        
        mContext = context;
        
        inflate(mContext, R.layout.tab_view_pager, this);
        initViews();
    }
    
    private void initViews()
    {
        mTabHost = (LinearLayout) findViewById(R.id.tab_host);
        mUnderline = (ImageView) findViewById(R.id.tab_underline);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
    }
    
    public void initTabs(String[] tabTitles, int parentWidth)
    {
        LinearLayout.LayoutParams tabHostLayoutParams;
        TextView tab;
        
        mTabWidth = parentWidth / tabTitles.length;
        
        //設置寬度
        if (tabTitles.length > 0)
        {
            tabHostLayoutParams = new LinearLayout.LayoutParams(mTabWidth, LinearLayout.LayoutParams.WRAP_CONTENT);
        }
        else
        {
            return;
        }
        
        //動態添加tab
        for (int loopVal = 0; loopVal < tabTitles.length; loopVal++)
        {
            tab = new TextView(mContext);
            tab.setText(tabTitles[loopVal]);
            tab.setTextSize(22);
            tab.setTextColor(getResources().getColor(R.color.white));
            
            tabHostLayoutParams.weight = 1;
            tabHostLayoutParams.gravity = Gravity.CENTER_VERTICAL;
            tab.setLayoutParams(tabHostLayoutParams);
            tab.setGravity(Gravity.CENTER);
            
            tab.setOnClickListener(new TabOnClickListener(loopVal));
            
            mTabHost.addView(tab);
        }
        
        //設置underline寬度，使得下划線與tab寬度保持一致
        FrameLayout.LayoutParams frameLayoutParams = new FrameLayout.LayoutParams(mTabWidth, FrameLayout.LayoutParams.WRAP_CONTENT);
        frameLayoutParams.gravity = Gravity.BOTTOM;
        mUnderline.setLayoutParams(frameLayoutParams);
        mUnderline.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_view_pager_underline));
    }
    
    public void setAdapter(PagerAdapter pagerAdapter)
    {
        mViewPager.setAdapter(pagerAdapter);
        //滑動viewPager時也要執行mUnderline的移動動畫
        mViewPager.setOnPageChangeListener(new OnPageChangeListener()
        {
            private int currentPosition = -1;
            private int nextPosition = -1;
            
            @Override
            public void onPageSelected(int position)
            {
                nextPosition = position;
                //mUnderline的移動動畫
                mUnderline.startAnimation(new UnderlineTranslateAnimation(currentPosition * mTabWidth, nextPosition * mTabWidth, 0, 0));
            }
            
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
            {
                currentPosition = position;
            }
            
            @Override
            public void onPageScrollStateChanged(int state)
            {
            }
        });
    }
    
    public void setCurrentItem(int position)
    {
        //記錄當前的位置后再設置選中位置
        int currentPosition = mViewPager.getCurrentItem();
        mViewPager.setCurrentItem(position);
        int nextPosition = mViewPager.getCurrentItem();
        
        //mUnderline的移動動畫
        mUnderline.startAnimation(new UnderlineTranslateAnimation(currentPosition * mTabWidth, nextPosition * mTabWidth, 0, 0));
    }
    /* 函數段end */
    
    /* 內部類begin */
    private class TabOnClickListener implements OnClickListener
    {
        private int viewPosition = -1;
        
        public TabOnClickListener(int position)
        {
            viewPosition = position;
        }
        
        @Override
        public void onClick(View v)
        {
            if (AppEnv.bAppdebug)
            {
                Log.d(TAG, "tab onClick --> " + ((TextView) v).getText());
            }
            
            setCurrentItem(viewPosition);
        }
    }
    
    private class UnderlineTranslateAnimation extends TranslateAnimation
    {
        public UnderlineTranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
        {
            super(fromXDelta, toXDelta, fromYDelta, toYDelta);
            
            setFillAfter(true);
        }
        
    }
    /* 內部類end */
}

　　這樣，只需調用initTabs()來設置Tab頁，和setAdapter()來設置適配器即可使用。

　　相應布局代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:ignore="ContentDescription" >

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <LinearLayout
            android:id="@+id/tab_host"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:orientation="horizontal" >
        </LinearLayout>

        <ImageView
            android:id="@+id/tab_underline"
            android:layout_width="0dp"
            android:layout_height="0dp" />
    </FrameLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="7" />

</LinearLayout>