整體結(jié)構(gòu)使用FragmentTabHost+Fragment搭建
如下圖所示哟楷,整一個底部導(dǎo)航欄是一個FragmentTabHost令哟,里面包含的每一個“小按鈕”我們稱之為TabSpec揭厚,也就是每一個分頁币砂。TabSpec里面需要有指示器Indicator尖飞,用來指示用戶選中了哪一個戈轿,里面一般包含一張圖片和文字描述凌受。
核心的實現(xiàn)步驟以及注意點有:
1、所用的Activity必須要繼承FragmentActivity思杯,不然項目就會崩潰胜蛉。
2、調(diào)用FragmentTabHost的setup()方法色乾,設(shè)置FragmentManager誊册,以及指定用于裝載Fragment的布局容器。
3暖璧、調(diào)用FragmentTabHost的addTab()方法添加分頁案怯。
代碼如下:
先將自己寫的FragmentTabHost類添加到項目中,這里我們并沒有使用官方提供的v4支持包中的FragmentTabHost澎办,而是使用了我們自定義的FragmentTabHost嘲碱,主要是因為官方提供的FragmentTabHost并沒有進(jìn)行優(yōu)化,每次都會重新初始化一次Fragment局蚀。
在MainActivity中添加FragmentTabHost:布局文件代碼如下:
MainActivity中的主要代碼:
public class MainActivity extends BaseActivity {
?private ArrayList<Tab> ?mTabs = new ArrayList<Tab>();//用于裝載每一個分頁的Tab
private LayoutInflater mInflater;
private FragmentTabHost mTabhost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initTab();
}
private void initTab() {
Tab tab_conste = new Tab(ConsteFragment.class,R.string.conste,R.drawable.selector_icon_conste);
Tab tab_tools = new Tab(ToolsFragment.class,R.string.tools,R.drawable.selector_icon_tools);
Tab tab_calendar = new Tab(CalendarFragment.class,R.string.calendar,R.drawable.selector_icon_calendar);
Tab tab_jiemeng = new Tab(JieMengFragment.class,R.string.jiemeng,R.drawable.selector_icon_jiemeng);
mTabs.add(tab_conste);
mTabs.add(tab_calendar);
mTabs.add(tab_jiemeng);
mTabs.add(tab_tools);
mInflater = LayoutInflater.from(this);
mTabhost = (FragmentTabHost) this.findViewById(android.R.id.tabhost);
mTabhost.setup(this,getSupportFragmentManager(),R.id.realtabcontent);
//將Tab添加到TabHost
for (Tab tab : mTabs){
TabHost.TabSpec tabSpec = mTabhost.newTabSpec(getString(tab.getTitle()));
tabSpec.setIndicator(buildIndicator(tab));
mTabhost.addTab(tabSpec,tab.getFragment(),null);
}
}
private? View buildIndicator(Tab tab){
View view =mInflater.inflate(R.layout.tab_indicator,null);
ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
TextView text = (TextView) view.findViewById(R.id.txt_indicator);
img.setBackgroundResource(tab.getIcon());
text.setText(tab.getTitle());
return? view;
}
}
頁簽圖片的Selector文件:
這里以星座為例:
頁簽文字selector:
其中Tab類是每個頁簽類:
public class Tab {
private? int title;
private? int icon;
private Class fragment;
public Tab(Class fragment,int title, int icon) {
this.title = title;
this.icon = icon;
this.fragment = fragment;
}
public int getTitle() {
return title;
}
public void setTitle(int title) {
this.title = title;
}
public int getIcon() {
return icon;
}
public void setIcon(int icon) {
this.icon = icon;
}
public Class getFragment() {
return fragment;
}
public void setFragment(Class fragment) {
this.fragment = fragment;
}
}
每個頁簽的item布局:
至此悍汛,F(xiàn)ragmentTabHost設(shè)置完畢,每次點擊不同的頁簽至会,加載不同的Fragment离咐。