簡單的方法實現仿微信底部的Tab選項卡界面

在網上看了比較多的關於Tab的教程，發現都很雜亂。比較多的用法是用TitlePagerTabStrip和ViewPaper。不過TitlePagerTabStrip有個很大的缺陷，Tab里面的內容剛進去是沒有的，要滑一次才能加載出來。而且滑動的時候，Tab里面的內容位置不是固定的，滑倒最后會出現一片空白，非常不美觀。雖然有其他的補救方法，但是非常的麻煩，所以我就按照自己的方法實現了一個。功能不錯而且非常簡單。

 

直接點擊或者是滑動界面，都可以轉到相應的頁面。

效果圖：

 

原理是用了三個按鈕和ViewPaper，拋棄了TitlePagerTabStrip。

 

ViewPaper通俗的說，它是一個裝頁面的容器。如上圖我有三個不同的界面，是因為我把三個view加了進去。然后再把這個viewPaper加到主界面的布局中。

這樣，主界面上就有三個按鈕，按鈕下方是一個viewPaper，這個viewPaper里面有三個view，我每滑一下或點擊按鈕就會跳到相應的view。

就是說我們看到的，其實都是主界面，按鈕是一直在那的。我們只是不斷的轉換viewPaper這個容器里面的視圖而已。

 

主界面的布局代碼：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

　　//這里加三個按鈕
　　

 　//這里是viewPaper 一個容器
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
 
        
 
</RelativeLayout>

 

 怎么實現，按相應的按鈕跳轉到viewPaper中相應的視圖呢？很簡單，只要為按鈕設置監聽，然后調用viewPaper的setCurrentItem（）這個函數就行。

對於相應的頁面，我們的按鈕也應該有相應的變化，如上圖我們的按鈕中的英文變成了√。這個只要在viewPaper的監聽器中重載onPageSelected（）這個函數就行，

每個頁面被選中，都會調用這個函數。在這個函數里判斷當前的頁面是哪一個，然后再對按鈕做出相應的改變即可。

　　

　　onCreate的代碼

 //設置viewPaper
    ViewPager pager = null;
    ArrayList<View> viewContainter = new ArrayList<View>();

    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_add);

        //實例化ViewPaper
        pager = (ViewPager) this.findViewById(R.id.viewpager3);



        //設置按鈕跳轉到相應的viewPaper頁面
        
        按鈕1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //跳到第一個頁面
                pager.setCurrentItem(0);

            }
        });

        按鈕2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //第二個頁面
                pager.setCurrentItem(1);

            }
        });
        
        按鈕3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //第三個頁面
                pager.setCurrentItem(2);

            }
        });
        
        
        

        //為viewPaper設置內容
        //view是我們放進viewPaper里面的東西，要為它設置好布局，再放進去
        View view1 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件1, null);
        View view2 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件2, null);
        View view3 = LayoutInflater.from(this).inflate(R.layout.自己的布局文件3, null);

        //這是個ArrayList,加進去了3個view
        viewContainter.add(view1);
        viewContainter.add(view2);
        viewContainter.add(view3);
        

        //設置適配器 這里的代碼復制即可
        pager.setAdapter(new PagerAdapter() {


            //viewpager中的組件數量
            @Override
            public int getCount() {
                return viewContainter.size();
            }

            //滑動切換的時候銷毀當前的組件

            @Override
            public void destroyItem(ViewGroup container, int position,
                                    Object object) {
                ((ViewPager) container).removeView(viewContainter.get(position));
            }

            //每次滑動的時候生成的組件
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ((ViewPager) container).addView(viewContainter.get(position));
                return viewContainter.get(position);
            }

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }

            @Override
            public int getItemPosition(Object object) {
                return super.getItemPosition(object);
            }


        });

        //頁面變化時的監聽 改變按鈕
        pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {

                switch (i) {

                    //如果是第一個頁面
                    case 0:
                        按鈕1.setText("√");
                        按鈕2.setText("TAB2");
                        按鈕3.setText("TAB3");

                        break;

                    //如果是第二個頁面
                    case 1:
                        按鈕1.setText("TAB1");
                        按鈕2.setText("√");
                        按鈕3.setText("TAB3");
                        break;
                        
                    //如果是第三個頁面
                    case 1:
                        按鈕1.setText("TAB1");
                        按鈕2.setText("TAB2");
                        按鈕3.setText("√");
                        break;



                }

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });




    }

 

想用到每個view里面的控件的話，在主界面上是找不到這些控件的，都是空的。 必須在instantiateItem這個函數里面指定。

@Override
            public Object instantiateItem(ViewGroup container, int position) {
                ((ViewPager) container).addView(viewContainter.get(position));

                switch (position){

                    case 0: {

                        //在第一個頁面中

                        }
                    }
}

 

 

 代碼不是直接復制可用的，因為有些地方怕雜亂，改成了中文，布局文件中的注釋也是不正確的。不過大家只要把代碼過一遍，應該沒什么問題。