通过Fragment + Viewpager+Gridview实现Android Tab切换菜单
通过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 tabFragments;
private ViewPagerAdapter tabPagerAdapter;
//tab项
private List tabItems;
private QuickAdapter 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();
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 fragments) {
this.tabFragments = fragments;
tabPagerAdapter = new ViewPagerAdapter(fm, tabFragments);
tabViewpaPager.setAdapter(tabPagerAdapter);
}
/**
* 添加TabItems
* @param tabItems
*/
public void addTabItems(List tabItems) {
if (tabItems == null) {
return;
}
tabItemGridview.setNumColumns(tabItems.size());
this.tabItems = tabItems;
tabItemAdapter = new QuickAdapter(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
//添加Fragments
bottomTabView.addFragments(getSupportFragmentManager(), fragments);
//添加tab项
bottomTabView.addTabItems(tabItems);布局文件activity_main.xml
"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" />
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 fragments = new ArrayList();
for (int i = 0; i < 4; i++) {
fragments.add(new MyFragment());
}
//添加Fragment
bottomTabView.addFragments(getSupportFragmentManager(), fragments);
List tabItems = new ArrayList();
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
最后：
知道实现方法容易，形成文字有挑战，硬着头皮练习写吧。