App主界面Tab實作(一) ViewPager實作Tab

1. ViewPager

ViewPager是V4包裡面的一個類，可以通過ViewPager實作點選和滑動效果。但是需要把不同頁面的初始化和所有點選事件寫在一個Activity，導緻代碼檢視和維護很困難。

1.1 首先主XML中是一個ViewPager加一個Tab導航欄

<include layout="@layout/market_header"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_market"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

    <include layout="@layout/market_bottom"/>
           

底部導航欄根據自己需要寫

1.2 建立對應頁面的布局檔案

1.3 在首頁面中完成ViewPager，擴充卡，View資源的定義

private ViewPager mViewPager;
private PagerAdapter mAdapter;
private List<View> mList = new ArrayList<>();
           

1.4 把對應布局檔案轉化成View,并添加到mList中

LayoutInflater mInflater = LayoutInflater.from(this);
View index = mInflater.inflate(R.layout_index,null);
        ...

mList.add(index);
        ...
           

1.5 初始化擴充卡，重寫destroy和init代碼

mAdapter = new PagerAdapter() {

            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView(mList.get(position));
            }
            
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = mList.get(position);
                container.addView(view);
                return view;
            }
            
            public int getCount() {
                return mList.size();
            }

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

1.6 為ViewPager配置擴充卡

1.7 實作點選Tab切換頁面效果

@Override
    public void onClick(View v) {
        switch (v.getId) {
            case R.id.index:
                //ImageButton變色效果
                    ...
                //切換View
                mViewPager.setCurrentItem(1);
                break;
                ...
        }
    }
           

1.8 添加滑動對應Tab跟随變化效果

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                int pos = mViewPager.getCurrentItem();
                switch(pos) {
                    //對應Tab的效果變化
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });