Android底部导航栏实现
底部导航栏
在使用应用软件时,为了方便用户操作和增加界面直观,许多应用都会用到底部导航栏。
我们经常使用的微信、QQ就是很贴切的例子:
下面我通过几种方式实现类似效果的底部导航栏。
使用Fragment实现底部导航栏
效果展示
相关概念介绍:
官方文档
Fragment表示 FragmentActivity中的行为或界面的一部分。可以在一个 Activity中组合多个Fragment,从而构建多窗格界面,并在多个 Activity 中重复使用某个片段。Fragment必须始终托管在 Activity 中,其生命周期直接受宿主 Activity 生命周期的影响。例如,当Activity 暂停时,Activity的所有片段也会暂停;当Activity 被销毁时,所有片段也会被销毁。
不过,当Activity 正在运行时可以独立操纵每个Fragment,这里就是应用到了每个Fragment的可独立操作这一特性。每个页面使用一个Fragment来实现,所有页面都以同一个activity为宿主,通过获取用户操作隐藏其他页面,显示当前所在的页面对应的Fragment,实现页面间的切换,并且还是可以独立的操作每个页面。
Fragment的使用
Fragment类的代码与Activity非常相识,它包含与 Activity类似的回调方法,如 onCreate()、onStart()、onPause() 和 onStop()。
与Activity对比Fragment的生命周期有个比较有特点的方法,并且在这里是比较重要的:
onCreateView():系统会在片段首次绘制其界面时调用此方法。若Fragment需要加载样式则需要在此方法中使用inflate加载样式文件,并且作为方法的放回值,若不需要的话默认放回NULL。inflate的作用类似于findViewById()。不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例化成View。
public class pageFragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab1, container, false);
return view;
}
}
FragmentManager简介
为了管理Activity中的Fragments,需要使用FragmentManager.
在Activity中要获取FragmentManager需要调用Activity的getFragmentManager()方法。
向FragmentManager中添加Fragment:
可以使用FragmentTransaction来实现,FragmentTransaction可以通过FragmentManager.beginTransaction()来获取,使用add(int containerViewId, Fragment fragment, String tag)方法来添加一个Fragment,remove(Fragment fragment)方法来移除掉一个Fragment。
通过show(Fragment fragment,String tag)和hide(Fragment fragment,String tag)制FragmentManager所管理的Fragment的显示状态,当hide时Fragment不显示,处于暂停状态;show时处于运行状态,允许用户交互。示例代码:
private void selectTab(int i) {
//获取FragmentManager对象
FragmentManager manager = getSupportFragmentManager();
//获取FragmentTransaction对象
FragmentTransaction transaction = manager.beginTransaction();
//先隐藏所有的Fragment
hideFragments(transaction);
switch (i) {
//当选中点击的是第一页的Tab时
case 0:
//设置第一页的ImageButton为绿色
mImg1.setImageResource(R.mipmap.icon1);
//如果第一页对应的Fragment没有实例化,则进行实例化,并显示出来
if (mFrag1 == null) {
mFrag1 = new Fragment();
transaction.add(R.id.id_content, mFrag1);
} else {
//如果第一页对应的Fragment已经实例化,则直接显示出来
transaction.show(mFrag1);
}
break;
case 1:
mImg2.setImageResource(R.mipmap.icon1);
if (mFrag2 == null) {
mFrag2 = new pageFragment2();
transaction.add(R.id.id_content, mFrag2);
} else {
transaction.show(mFrag2);
}
break;
case 2:
mImg3.setImageResource(R.mipmap.icon1);
if (mFrag3 == null) {
mFrag3 = new pageFragment3();
transaction.add(R.id.id_content, mFrag3);
} else {
transaction.show(mFrag3);
}
break;
case 3:
mImg4.setImageResource(R.mipmap.icon1);
if (mFrag4 == null) {
mFrag4 = new Fragment();
transaction.add(R.id.id_content, mFrag4);
} else {
transaction.show(mFrag4);
}
break;
}
//不要忘记提交事务
transaction.commit();
}
//将四个的Fragment隐藏
private void hideFragments(FragmentTransaction transaction) {
if (mFrag1 != null) {
transaction.hide(mFrag1);
}
if (mFrag2 != null) {
transaction.hide(mFrag2);
}
if (mFrag3 != null) {
transaction.hide(mFrag3);
}
if (mFrag4 != null) {
transaction.hide(mFrag4);
}
}
在本例子中,就是使用FragmentManager来管理多个Fragment,通过show()方法显示当前所在的Fragment页面,hide方法将其他页面隐藏。
Fragment实现底部导航栏代码实现
MainActivity.class :核心Activity
ass MainActivity extends FragmentActivity implements OnClickListener {
//声明四个Tab的布局文件
private LinearLayout mTab1;
private LinearLayout mTab2;
private LinearLayout mTab3;
private LinearLayout mTab4;
//声明四个Tab的ImageButton
private ImageButton mImg1;
private ImageButton mImg2;
private ImageButton mImg3;
private ImageButton mImg4;
//声明四个Tab分别对应的Fragment
private Fragment mFrag1;
private Fragment mFrag2;
private Fragment mFrag3;
private Fragment mFrag4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initViews();//初始化控件
initEvents();//初始化事件
selectTab(0);//默认选中第一个Tab
}
private void initEvents() {
//初始化四个Tab的点击事件
mTab1.setOnClickListener(this);
mTab2.setOnClickListener(this);
mTab3.setOnClickListener(this);
mTab4.setOnClickListener(this);
}
private void initViews() {
//初始化四个Tab的布局文件
mTab1 = (LinearLayout) findViewById(R.id.id_tab1);
mTab2 = (LinearLayout) findViewById(R.id.id_tab2);
mTab3 = (LinearLayout) findViewById(R.id.id_tab3);
mTab4 = (LinearLayout) findViewById(R.id.id_tab4);
//初始化四个ImageButton
mImg1 = (ImageButton) findViewById(R.id.id_tab_img1);
mImg2 = (ImageButton) findViewById(R.id.id_tab_img2);
mImg3 = (ImageButton) findViewById(R.id.id_tab_img3);
mImg4 = (ImageButton) findViewById(R.id.id_tab_img4);
}
//处理Tab的点击事件
@Override
public void onClick(View v) {
resetImgs(); //先将四个ImageButton置为灰色
switch (v.getId()) {
case R.id.id_tab1:
selectTab(0);
break;
case R.id.id_tab2:
selectTab(1);
break;
case R.id.id_tab3:
selectTab(2);
break;
case R.id.id_tab4:
selectTab(3);
break;
}
}
//进行选中Tab的处理
private void selectTab(int i) {
//获取FragmentManager对象
FragmentManager manager = getSupportFragmentManager();
//获取FragmentTransaction对象
FragmentTransaction transaction = manager.beginTransaction();
//先隐藏所有的Fragment
hideFragments(transaction);
switch (i) {
//当选中点击的是第一页的Tab时
case 0:
//设置第一页的ImageButton为绿色
mImg1.setImageResource(R.mipmap.icon1);
//如果第一页对应的Fragment没有实例化,则进行实例化,并显示出来
if (mFrag1 == null) {
mFrag1 = new Fragment();
transaction.add(R.id.id_content, mFrag1);
} else {
//如果第一页对应的Fragment已经实例化,则直接显示出来
transaction.show(mFrag1);
}
break;
case 1: