Android 使用 ViewPager 實現左右滑動 View

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vpSlideView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/ptsSlideView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" />
    </android.support.v4.view.ViewPager>

</LinearLayout>

/**
 *Copyright(C) 2014 Beijing Oradt Ltd.
                For Digital Visiting Card 1.0
 *File Name:SlideViewActivity.java
 *Description：滑動視圖主界面
 *Author: Xiao JinLai
 *Date:2014-12-19下午3:52:50
 *History：
    Date:      Author:      Depiction:
 */
public class SlideViewActivity extends Activity {

    private View mView1, mView2, mView3;
    private ViewPager mViewPager;
    private PagerTitleStrip mPagerTitleStrip; // viewpager的標題
    private PagerTabStrip mPagerTabStrip; // 一個viewpager的指示器，效果就是一個橫的粗的下划線
    private List<View> mViews;// 把需要滑動的頁卡添加到這個list中
    private List<String> mTitleList; // viewpager的標題

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        initControl();
    }

    private void initControl() {

        setContentView(R.layout.activity_slide_view);

        mViewPager=(ViewPager) findViewById(R.id.vpSlideView);
        
        mPagerTabStrip=(PagerTabStrip) findViewById(R.id.ptsSlideView); 
        mPagerTabStrip.setTabIndicatorColor(getResources().getColor(android.R.color.holo_green_dark));  
        mPagerTabStrip.setDrawFullUnderline(false); 
        mPagerTabStrip.setBackgroundColor(getResources().getColor(android.R.color.holo_green_light)); 
//        mPagerTabStrip.setTextSpacing(550);
        
        LayoutInflater tLayoutInflater = getLayoutInflater().from(this);
        mView1 = tLayoutInflater.inflate(R.layout.slide_view1, null);
        mView2 = tLayoutInflater.inflate(R.layout.slide_view2, null);
        mView3 = tLayoutInflater.inflate(R.layout.slide_view3, null);

        mViews = new ArrayList<View>();// 將要分頁顯示的View裝入數組中
        mViews.add(mView1);
        mViews.add(mView2);
        mViews.add(mView3);

        mTitleList = new ArrayList<String>();// 每個頁面的Title數據
        mTitleList.add("評級");
        mTitleList.add("時間");
        mTitleList.add("日期");

        mViewPager.setAdapter(new SlideViewAdapter(mViews,mTitleList));
    }
}

/**
 *Copyright(C) 2014 Beijing Oradt Ltd.
                For Digital Visiting Card 1.0
 *File Name:SlideViewAdapter.java
 *Description：滑動視圖適配器
 *Author: Xiao JinLai
 *Date:2014-12-19下午3:52:16
 *History：
    Date:      Author:      Depiction:
 */
public class SlideViewAdapter extends PagerAdapter {

    private List<View> mViews;
    private List<String> mTitleList;

    public SlideViewAdapter(List<View> views, List<String> titleList) {

        this.mViews = views;
        this.mTitleList = titleList;
    }

    /**
     * 返回可用的視圖的總數
     */
    @Override
    public int getCount() {

        return mViews.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {

        return view == object;
    }

    /**
     * PagerAdapter只緩存三張要顯示的圖片，如果滑動的圖片超出了緩存的范圍，就會調用這個方法，將圖片銷毀 View：是
     * instantiateItem 中已添加的 view position：0 object：是 ViewGroup view
     * 子View的第0個元素。
     */
    @Override
    public void destroyItem(ViewGroup view, int position, Object object) {

        view.removeView(mViews.get(position));

    }

    /**
     * 當要顯示的圖片可以進行緩存的時候，會調用這個方法進行顯示圖片的初始化， 我們將要顯示的 ImageView 加入到 ViewGroup
     * 中，然后作為返回值返回即可
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        container.addView(mViews.get(position));

        return mViews.get(position);
    }

    /**
     * 設置當前的標題
     */
    @Override
    public CharSequence getPageTitle(int position) {

        return mTitleList.get(position);
    }
}

總結：

1.mPagerTabStrip.setTextSpacing(int textSpacing); //用來設置標題的間距

此方法中的 textSpacing 值必須大於 64 dp ,否則按 64 dp 處理，看源碼

    private static final int TAB_PADDING = 16; // dp
    private static final int TAB_SPACING = 32; // dp
    private static final int MIN_TEXT_SPACING = TAB_SPACING + TAB_PADDING * 2; // dp

    public PagerTabStrip(Context context, AttributeSet attrs) {
        super(context, attrs);

        mIndicatorColor = mTextColor;
        mTabPaint.setColor(mIndicatorColor);

        // Note: this follows the rules for Resources#getDimensionPixelOffset/Size:
        //       sizes round up, offsets round down.
        final float density = context.getResources().getDisplayMetrics().density;
        mIndicatorHeight = (int) (INDICATOR_HEIGHT * density + 0.5f);
        mMinPaddingBottom = (int) (MIN_PADDING_BOTTOM * density + 0.5f);
        mMinTextSpacing = (int) (MIN_TEXT_SPACING * density);
        mTabPadding = (int) (TAB_PADDING * density + 0.5f);
        mFullUnderlineHeight = (int) (FULL_UNDERLINE_HEIGHT * density + 0.5f);
        mMinStripHeight = (int) (MIN_STRIP_HEIGHT * density + 0.5f);
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();

        // Enforce restrictions
        setPadding(getPaddingLeft(), getPaddingTop(), getPaddingRight(), getPaddingBottom());
        setTextSpacing(getTextSpacing());

        setWillNotDraw(false);

        mPrevText.setFocusable(true);
        mPrevText.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mPager.setCurrentItem(mPager.getCurrentItem() - 1);
            }
        });

        mNextText.setFocusable(true);
        mNextText.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mPager.setCurrentItem(mPager.getCurrentItem() + 1);
            }
        });

        if (getBackground() == null) {
            mDrawFullUnderline = true;
        }
    }

    @Override
    public void setTextSpacing(int textSpacing) {
        if (textSpacing < mMinTextSpacing) {
            textSpacing = mMinTextSpacing;
        }
        super.setTextSpacing(textSpacing);
    }


2.PagerTabStrip 繼承自 PagerTitleStrip ，所以用一個就夠了。