通过Fragment + Viewpager+Gridview实现Android Tab切换菜单

写在前面：

Android Tab切换菜单的实现，网络上也有很多相关的博文
，按自己的代码习惯实现自己的Tab切换，写下此博文用于记录笔记。

代码实现：

实现效果图，不会录制动态图，将就着贴张静态图片。实现点击tab切换，手势切换。实现思路，采用Fragment+Viewpager+Gridview

1、tab项封装

/** * TAB项封装类 *  * @author gaoshanjiang *  */public class TabItem {    /**     * 名称     */    private String tabTitle;    /**     * 正常时图标     */    private int iconNormal;    /**     * 选中时图标     */    private int iconSelected;    /**     * 正常时的title文字颜色     */    private int titleColorNormal = Color.BLACK;    /**     * 选中时的title文字颜色     */    private int titleColorSelected = Color.GRAY;    /**     * title文字size     */    private int titleSize = 18;    /**     * 是否被选中     */    private boolean isSelected = false;    public boolean isSelected() {        return isSelected;    }    public void setSelected(boolean isSelected) {        this.isSelected = isSelected;    }    public int getTitleSize() {        return titleSize;    }    public void setTitleSize(int titleSize) {        this.titleSize = titleSize;    }    public String getTabTitle() {        return tabTitle;    }    public void setTabTitle(String tabTitle) {        this.tabTitle = tabTitle;    }    public int getIconNormal() {        return iconNormal;    }    public void setIconNormal(int iconNormal) {        this.iconNormal = iconNormal;    }    public int getIconSelected() {        return iconSelected;    }    public void setIconSelected(int iconSelected) {        this.iconSelected = iconSelected;    }    public int getTitleColorNormal() {        return titleColorNormal;    }    public void setTitleColorNormal(int titleColorNormal) {        this.titleColorNormal = titleColorNormal;    }    public int getTitleColorSelected() {        return titleColorSelected;    }    public void setTitleColorSelected(int titleColorSelected) {        this.titleColorSelected = titleColorSelected;    }    public TabItem() {    }    @Override    public String toString() {        return "TabItem [tabTitle=" + tabTitle + ", iconNormal=" + iconNormal                + ", iconSelected=" + iconSelected + ", titleColorNormal="                + titleColorNormal + ", titleColorSelected="                + titleColorSelected + ", titleSize=" + titleSize                + ", isSelected=" + isSelected + "]";    }}

2、在这里将viewpager和底部的Tabbar封装一个LinearLayout中，屏蔽内部实现细节，提供外部设置fragment和TabItem的方法，使用起来就很简单了。

public class TabView extends LinearLayout implements OnItemClickListener,        OnPageChangeListener {    private LinearLayout tabMenuContainer;    private ViewPager tabViewpaPager;    private List<Fragment> tabFragments;    private ViewPagerAdapter tabPagerAdapter;    //tab项    private List<TabItem> tabItems;    private QuickAdapter<TabItem> tabItemAdapter;    private GridView tabItemGridview;    //选中的Tab    private int currentSelectedTabIndex = 0;    public TabView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context);    }    public TabView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public TabView(Context context) {        this(context, null);    }    /**     * 初始化     * @param context     */    private void init(Context context) {        tabFragments = new ArrayList<Fragment>();        LayoutInflater.from(context).inflate(R.layout.tab_view_layout, this);        tabMenuContainer = (LinearLayout) findViewById(R.id.tab_menu_container);        tabViewpaPager = (ViewPager) findViewById(R.id.tab_viewpager);        tabItemGridview = (GridView) findViewById(R.id.menu_gridview);        tabItemGridview.setOnItemClickListener(this);        tabViewpaPager.setOnPageChangeListener(this);    }    /**     * 设置底部TabBar背景     * @param resId     */    public void setTabBarBackgroud(int resId) {        if (tabMenuContainer != null) {            tabMenuContainer.setBackgroundResource(resId);        }    }    /**     * 设置Fragment     * @param fm     * @param fragments     */    public void addFragments(FragmentManager fm, List<Fragment> fragments) {        this.tabFragments = fragments;        tabPagerAdapter = new ViewPagerAdapter(fm, tabFragments);        tabViewpaPager.setAdapter(tabPagerAdapter);    }    /**     * 添加TabItems     * @param tabItems     */    public void addTabItems(List<TabItem> tabItems) {        if (tabItems == null) {            return;        }        tabItemGridview.setNumColumns(tabItems.size());        this.tabItems = tabItems;        tabItemAdapter = new QuickAdapter<TabItem>(getContext(),                R.layout.item_tab_view_layout, this.tabItems) {            @Override            protected void convert(BaseAdapterHelper helper, TabItem item) {                helper.setText(R.id.tab_title, item.getTabTitle());                helper.setTextColor(                        R.id.tab_title,                        item.isSelected() ? item.getTitleColorSelected() : item                                .getTitleColorNormal());                helper.setTextSize(R.id.tab_title, item.getTitleSize());                helper.setImageResource(                        R.id.tab_icon,                        item.isSelected() ? item.getIconSelected() : item                                .getIconNormal());            }        };        tabItemGridview.setAdapter(tabItemAdapter);        setCurrentItem(0);    }    /**     * 选中Tab     * @param index     */    public void setCurrentItem(int index) {        if (index < 0) {            return;        }        if (tabViewpaPager != null && tabViewpaPager.getChildCount() > 0                && index < tabViewpaPager.getChildCount()) {            tabViewpaPager.setCurrentItem(index);        }        if (tabItems != null && tabItems.size() > 0 && index < tabItems.size()) {            if (currentSelectedTabIndex < tabItems.size()) {                TabItem item = tabItems.get(currentSelectedTabIndex);                item.setSelected(false);            }            if (index < tabItems.size()) {                TabItem item = tabItems.get(index);                item.setSelected(true);                currentSelectedTabIndex = index;            }        }        if (tabItemAdapter != null) {            tabItemAdapter.notifyDataSetChanged();        }    }    @Override    public void onItemClick(AdapterView<?> parent, View view, int position,            long id) {        tabViewpaPager.setCurrentItem(position);        setCurrentItem(position);    }    @Override    public void onPageScrollStateChanged(int arg0) {    }    @Override    public void onPageScrolled(int arg0, float arg1, int arg2) {    }    @Override    public void onPageSelected(int position) {        setCurrentItem(position);    }}

3、使用：
在布局文件中引用TabView，Activity中引用，添加Fragments和Tabitems

//添加FragmentsbottomTabView.addFragments(getSupportFragmentManager(), fragments);//添加tab项bottomTabView.addTabItems(tabItems);

布局文件activity_main.xml

<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" >    <com.glibrary.ui.tab.TabView        android:id="@+id/tabview"        android:layout_width="match_parent"        android:layout_height="match_parent" /></RelativeLayout>

activity中使用

public class MainActivity extends FragmentActivity {    private TabView bottomTabView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        bottomTabView = (TabView) findViewById(R.id.tabview);        //设置TabBar背景色        bottomTabView.setTabBarBackgroud(android.R.color.darker_gray);        List<Fragment> fragments = new ArrayList<Fragment>();        for (int i = 0; i < 4; i++) {            fragments.add(new MyFragment());        }        //添加Fragment        bottomTabView.addFragments(getSupportFragmentManager(), fragments);        List<TabItem> tabItems = new ArrayList<TabItem>();        TabItem item1 = new TabItem();        item1.setIconNormal(R.drawable.menu1_n);        item1.setIconSelected(R.drawable.menu1_f);        item1.setTitleColorNormal(Color.GRAY);        item1.setTitleColorSelected(Color.RED);        item1.setTabTitle("首页");        TabItem item2 = new TabItem();        item2.setIconNormal(R.drawable.menu2_n);        item2.setIconSelected(R.drawable.menu2_f);        item2.setTitleColorNormal(Color.GRAY);        item2.setTitleColorSelected(Color.RED);        item2.setTabTitle("音乐");        TabItem item3 = new TabItem();        item3.setIconNormal(R.drawable.menu3_n);        item3.setIconSelected(R.drawable.menu3_f);        item3.setTitleColorNormal(Color.GRAY);        item3.setTitleColorSelected(Color.RED);        item3.setTabTitle("发现");        TabItem item4 = new TabItem();        item4.setIconNormal(R.drawable.menu4_n);        item4.setIconSelected(R.drawable.menu4_f);        item4.setTitleColorNormal(Color.GRAY);        item4.setTitleColorSelected(Color.RED);        item4.setTabTitle("更多");        tabItems.add(item1);        tabItems.add(item2);        tabItems.add(item3);        tabItems.add(item4);        //添加tab项        bottomTabView.addTabItems(tabItems);    }}

可以看到activity中代码比较简单，给activity瘦身了。
代码已经经过测试，运行项目效果图如下：

代码中使用到的QuickAdapter出自开源代码：
https://github.com/JoanZapata/base-adapter-helper

Demo源码地址：
http://download.csdn.net/detail/gsj4719896/9101321

最后：
知道实现方法容易，形成文字有挑战，硬着头皮练习写吧。