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" >
//這裡加三個按鈕
//這裡是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: { //在第一個頁面中 } } }
程式碼不是直接複製可用的，因為有些地方怕雜亂，改成了中文，佈局檔案中的註釋也是不正確的。不過大家只要把程式碼過一遍，應該沒什麼問題。