Android Tab類型主界面 Fragment+TabPageIndicator+ViewPager

時間 2019-11-20

標籤 android tab 類型界面 fragment+tabpageindicator+viewpager fragment tabpageindicator viewpager 欄目 Android 简体版

原文原文鏈接

文章地址： Android項目Tab類型主界面大總結 Fragment+TabPageIndicator+ViewPagerandroid

一、使用ViewPager + PagerAdapterapp

　　每一個頁面的內容都在同一個Activity中，維護起來會比較麻煩框架

　　實現：ide

　　在頁面上加入ViewPager控件。　　spa

　　<android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        
    </android.support.v4.view.ViewPager>

　　建立每一個Tab頁的信息，並在Activity中獲取這些Tab頁，加入List<View>中。.net

　　　　 form1 = (LinearLayout) inflater.inflate(R.layout.layout_pager1, null);
        form2 = (LinearLayout) inflater.inflate(R.layout.layout_page2, null);
        form3 = (LinearLayout) inflater.inflate(R.layout.layout_pager3, null);
        
        listViews.add(form1);
        listViews.add(form2);
        listViews.add(form3);

　　建立PagerAdapter的對象（經過自定義類MyPagerAdapter繼承自PagerAdapter），並綁定到ViewPager上。插件

　　自定義的MyPagerAdapter必定要重寫destroyItem、instantiateItem、getCount、isViewFromObject。code

private class MyPagerAdapter extends PagerAdapter {
        
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(listViews.get(position));
        }
        
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = listViews.get(position);
            container.addView(view);
            return view;
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return listViews.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            // TODO Auto-generated method stub
            return view == obj;
        }
        
    }

　　這樣一個簡單的能夠左右滑動的界面就完成了。不過有個明顯的缺點，界面上沒有能夠指示當前在第幾個頁面的信息，用戶也沒法明確看到一共有多少個頁面。能夠像我參考的博客上的例子，在主界面上添加一個Layout，定義幾個按鈕。也可使用Activity的getActionBar方法獲取當前Activity對應的ActionBar，在ActionBar上添加Tab來指示當前頁面。使用ActionBar時，須要爲Tab添加TabListener事件，重寫onTabSelected方法，當用戶選擇了對應的Tab頁籤，ViewPager須要跳轉到對應的界面。orm

　　　　　　tab.setTabListener(new ActionBar.TabListener() {
                
                @Override
                public void onTabUnselected(Tab tab, FragmentTransaction ft) {
                    // TODO Auto-generated method stub
                    
                }
                
                @Override
                public void onTabSelected(Tab tab, FragmentTransaction ft) {
                    // TODO Auto-generated method stub
                    String text = tab.getText().toString();
                    int selectedIndex = 0;
                    switch(text) {
                    case PAGE1 : 
                        selectedIndex = 0;
                        break;
                    case PAGE2 :
                        selectedIndex = 1;
                        break;
                    case PAGE3 :
                        selectedIndex = 2;
                        break;
                    default:
                        selectedIndex = 0;
                        break;
                    }
                    
                    viewPager.setCurrentItem(selectedIndex);
                    
                    //設置頁簽上的圖片
                    for    (int j = 0; j < bar.getTabCount(); j++) {
                        Tab tab1 = bar.getTabAt(j);
                        if (selectedIndex == j) {
                            tab1.setIcon(onIcons[j]);
                        } else {
                            tab1.setIcon(offIcons[j]);
                        }
                    }
                }
                
                @Override
                public void onTabReselected(Tab tab, FragmentTransaction ft) {
                    // TODO Auto-generated method stub
                    
                }
            });

　　如今點擊頁籤，就會跳轉到對應的頁面。可是左右滑動頁面的時候，頁籤並不會跟着變化。再添加頁面滑動的事件。對象

　　　　viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            
            @Override
            public void onPageSelected(int i) {
//                for    (int j = 0; j < bar.getTabCount(); j++) {
//                    Tab tab = bar.getTabAt(j);
//                    if (i == j) {
//                        tab.setIcon(onIcons[j]);
//                    } else {
//                        tab.setIcon(offIcons[j]);
//                    }
//                }
                bar.selectTab(bar.getTabAt(i));
            }
            
            @Override
            public void onPageScrolled(int i, float f, int j) {
                // TODO Auto-generated method stub
                
            }
            
            @Override
            public void onPageScrollStateChanged(int i) {
                // TODO Auto-generated method stub
                
            }
        });