Android仿微信底部實現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" >

  <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: {

            //在第一個頁面中

            }
          }
}

以上就是本文的全部內容，希望對大家的學習有所幫助。