Android控件之——ViewPager

源码下载

横向滑动的列表

需要适配器Adapter适配每项Item视图。
查看类ViewPager结构。

//继承ViewGroup
public class ViewPager extends ViewGroup
//设置适配器对象PagerAdapter
public void setAdapter(PagerAdapter adapter);

查看类PagerAdapter结构。

//抽象类
public abstract class PagerAdapter

适配器类需要继承抽象类PagerAdapter，才能适配ViewPager视图。

了解了ViewPager的使用，下面开始Demo之旅：
先来看看项目需求效果图

流量使用详情效果图

布局文件

适配器类

public class TabTopFlowAdapter extends PagerAdapter {
    private List mListViews;
    public TabTopFlowAdapter(List mListViews) {
        this.mListViews = mListViews;
    }
    @Override
    public void destroyItem(ViewGroup arg0, int arg1, Object arg2) {
        arg0.removeView(mListViews.get(arg1));
    }
    @Override
    public Parcelable saveState() {
        return null;
    }
    @Override
    public void startUpdate(ViewGroup container) {
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mListViews.get(position), 0);
        return mListViews.get(position);
    }
    @Override
    public void finishUpdate(ViewGroup container) {
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == (object);
    }
    @Override
    public int getCount() {
        if (mListViews != null) {
            return mListViews.size();
        }
        return 0;
    }

Activity类

public class ActivityDataFlowUsedDetailed extends BaseActivity implements View.OnClickListener {
    private static final int PAGE1 = 0;// 页面1
    private static final int PAGE2 = 1;// 页面2
    private static final int PAGE3 = 2;// 页面3
    private ImageView cursor;// 标题背景图片
    private List mListViews;// Tab页面
    private ViewPager mPagerView;
    private TextView tab1;
    private TextView tab2;
    private TextView tab3;

    private int currentIndex = PAGE1;//当前选中的是页面1
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_data_flow_used_detailed);
        initUI();
    }
    private void initUI() {
        mPagerView = (ViewPager) findViewById(R.id.viewPager);
        LayoutInflater inflater = LayoutInflater.from(this);
        View lay1 = inflater.inflate(R.layout.tab_top_flow_month, null);
        View lay2 = inflater.inflate(R.layout.tab_top_flow_weekly, null);
        View lay3 = inflater.inflate(R.layout.tab_top_flow_day, null);
        mListViews = new ArrayList<>();
        mListViews.add(lay1);
        mListViews.add(lay2);
        mListViews.add(lay3);
        mPagerView.setAdapter(new TabTopFlowAdapter(mListViews));
        mPagerView.addOnPageChangeListener(new TabPagerChangeLister());

        tab1 = (TextView) findViewById(R.id.tab1);
        tab2 = (TextView) findViewById(R.id.tab2);
        tab3 = (TextView) findViewById(R.id.tab3);
        tab1.setOnClickListener(this);
        tab2.setOnClickListener(this);
        tab3.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tab1:
                mPagerView.setCurrentItem(PAGE1);
                break;
            case R.id.tab2:
                mPagerView.setCurrentItem(PAGE2);
                break;
            case R.id.tab3:
                mPagerView.setCurrentItem(PAGE3);
                break;
            default:
                break;
        }
    }

    /**
     * 页面切换监听
     */
    class TabPagerChangeLister implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }
        @Override
        public void onPageScrollStateChanged(int state) {

        }
        @Override
        public void onPageSelected(int position) {
            Animation animation = null;
            switch (position) {
                case PAGE1:
                    if (currentIndex == PAGE2) {

                    } else if (currentIndex == PAGE3) {

                    }
                    break;
                case PAGE2:
                    if (currentIndex == PAGE1) {

                    } else if (currentIndex == PAGE3) {

                    }
                    break;
                case PAGE3:
                    if (currentIndex == PAGE1) {

                    } else if (currentIndex == PAGE2) {

                    }
                    break;
                default:
                    break;

            }
        }
    }
}

Tab选中效果

    //填充的颜色
    
    

效果图

被选中效果图