整体结构:底部导航栏

整体结构使用FragmentTabHost+Fragment搭建

整体结构:底部导航栏_第1张图片
整体结构图

如下图所示,整一个底部导航栏是一个FragmentTabHost,里面包含的每一个“小按钮”我们称之为TabSpec,也就是每一个分页。TabSpec里面需要有指示器Indicator,用来指示用户选中了哪一个,里面一般包含一张图片和文字描述。


FragmentTabHost

核心的实现步骤以及注意点有:

1、所用的Activity必须要继承FragmentActivity,不然项目就会崩溃。

2、调用FragmentTabHost的setup()方法,设置FragmentManager,以及指定用于装载Fragment的布局容器。

3、调用FragmentTabHost的addTab()方法添加分页。

代码如下:

先将自己写的FragmentTabHost类添加到项目中,这里我们并没有使用官方提供的v4支持包中的FragmentTabHost,而是使用了我们自定义的FragmentTabHost,主要是因为官方提供的FragmentTabHost并没有进行优化,每次都会重新初始化一次Fragment。

在MainActivity中添加FragmentTabHost:布局文件代码如下:


整体结构:底部导航栏_第2张图片
activity_main.xml

MainActivity中的主要代码:

public class MainActivity extends BaseActivity {

 private ArrayList  mTabs = new ArrayList();//用于装载每一个分页的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文件:

这里以星座为例:


整体结构:底部导航栏_第3张图片
图片selector

页签文字selector:


整体结构:底部导航栏_第4张图片
页签文字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布局:


整体结构:底部导航栏_第5张图片
页签item布局

至此,FragmentTabHost设置完毕,每次点击不同的页签,加载不同的Fragment。

你可能感兴趣的:(整体结构:底部导航栏)