之前课程很忙，没时间更新博文，现在暂时忙完考试，有空来写一下博文。这次博文是关于android 仿微信底部栏导航栏的实现。
因为最近自己有个课程项目，用到了底部导航栏的功能，所以将本课程项目中的底部导航栏模块分享出来，大家可以借鉴一下，有什么建议可以提出来，做技术交流。下面就来介绍一下底部栏导航栏功能的实现。
内容：基于Android studio的仿微信底部导航栏实现
1.先看看效果图
2.根据效果图，创建XML布局文件
注：底部导航栏中用到的四张图片，可以利用android studio生成矢量图，也可以自己网上找图片。
该布局中利用RadioGroup控件作为容器，存放4个RadioButton。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/fl_container"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginBottom="5dp"
android:background="#CCCCCC" />
<RadioGroup
android:id="@+id/rg_group"
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_map"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_tab_map_rb_choose"
android:gravity="center" />
<RadioButton
android:id="@+id/rb_car"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_tab_car_rb_choose"
android:gravity="center" />
<RadioButton
android:id="@+id/rb_find"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_tab_find_rb_choose"
android:gravity="center" />
<RadioButton
android:id="@+id/rb_me"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/selector_tab_me_rb_choose"
android:gravity="center" />
</RadioGroup>
</LinearLayout>
3.创建Activity
定义四个Fragment，TabMapFragment;TabMeFragment;.TabFindFragment;TabCarFragment;
private TabCarFragment tabCarFragment;
private TabMapFragment tabMapFragment;
private TabFindFragment tabFindFragment;
private TabMeFragment tabMeFragment;
每个Fragment分别对应着相应的Activity。创建FragmentManager来管理四个Fragment.
fragmentManager = getSupportFragmentManager();
tabCarFragment = (TabCarFragment) fragmentManager.findFragmentByTag(FRAGMENT_TAG[1]);
tabMapFragment = (TabMapFragment) fragmentManager.findFragmentByTag(FRAGMENT_TAG[0]);
tabFindFragment = (TabFindFragment) fragmentManager.findFragmentByTag(FRAGMENT_TAG[2]);
tabMeFragment = (TabMeFragment) fragmentManager.findFragmentByTag(FRAGMENT_TAG[3]);初始化。定义RadioGroup控件，设置点击事件，根据ID来选中对应的Fragment，创建Fragment事务管理器,并管理Fragment，显示相应的Fragment。
mRgGroup = (RadioGroup)findViewById(R.id.rg_group);
//选择设置Fragment
setTabSelection(show_tab_map);
//点击事件
mRgGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
switch (checkedId) {
case R.id.rb_car://导航
setTabSelection(show_tab_car);
break;
case R.id.rb_map://地图
setTabSelection(show_tab_map);
break;
case R.id.rb_find://发现
setTabSelection(show_tab_find);
break;
case R.id.rb_me://我的
setTabSelection(show_tab_me);
break;
default:
break;
}
}
});
}
/**
* 根据传入的index参数来设置选中的tab页。
*
* @param id 传入的选择的fragment
*/
private void setTabSelection(int id) { //根据传入的index参数来设置选中的tab页。
if (id == index) {
return;
}
index = id;
// 开启一个Fragment事务
FragmentTransaction transaction = fragmentManager.beginTransaction();
// 设置切换动画
transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
// 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
hideFragments(transaction);
switch (index) {
case show_tab_car://导航的fragment
mRgGroup.check(R.id.rb_car);
if (tabCarFragment == null) {
tabCarFragment = new TabCarFragment();
transaction.add(R.id.fl_container, tabCarFragment, FRAGMENT_TAG[index]);
} else {
transaction.show(tabCarFragment);
}
transaction.commit();
break;
case show_tab_map://地图的fragment
mRgGroup.check(R.id.rb_map);
if (tabMapFragment == null) {
tabMapFragment = new TabMapFragment();
transaction.add(R.id.fl_container, tabMapFragment, FRAGMENT_TAG[index]);
} else {
transaction.show(tabMapFragment);
}
transaction.commit();
break;
case show_tab_find://的fragment
mRgGroup.check(R.id.rb_find);//设置商城被选中
if (tabFindFragment == null) {
tabFindFragment = new TabFindFragment();
transaction.add(R.id.fl_container, tabFindFragment, FRAGMENT_TAG[index]);
} else {
transaction.show(tabFindFragment);
}
transaction.commit();
break;
case show_tab_me://我的的fragment
mRgGroup.check(R.id.rb_me);//我的的fragmen
if (tabMeFragment == null) {
tabMeFragment = new TabMeFragment();
transaction.add(R.id.fl_container, tabMeFragment, FRAGMENT_TAG[index]);
} else {
transaction.show(tabMeFragment);
}
transaction.commit();
break;
default:
break;
}
}
-
附：完整Activity
package com.CWT.navigation;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.WindowManager;
import android.widget.RadioGroup;
import com.CWT.navigation.fragment.TabMapFragment.TabMapFragment;
import com.CWT.navigation.fragment.TabMeFragment;
import com.CWT.navigation.fragment.TabFindFragment;
import com.CWT.navigation.fragment.Tabcar.TabCarFragment;
public class menu extends AppCompatActivity {
private RadioGroup mRgGroup;
private FragmentManager fragmentManager;
private static final String[] FRAGMENT_TAG = {"tab_map","tab_car", "tab_find","tab_me"};
private final int show_tab_car = 1;//找车
private final int show_tab_map = 0;//地图
private final int show_tab_find = 2;//发现
private final int show_tab_me = 3;//我的
private int mrIndex = show_tab_map;//默认选中地图
private int index = -100;// 记录当前的选项
/**
* 上一次界面 onSaveInstanceState 之前的tab被选中的状态 key 和 value
*/
private static final String PRV_SELINDEX = "PREV_SELINDEX";
private TabCarFragment tabCarFragment;
private TabMapFragment tabMapFragment;
private TabFindFragment tabFindFragment;
private TabMeFragment tabMeFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//解决底部选项按钮被输入文字框顶上去
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
//显示界面
setContentView(R.layout.menu);
fragmentManager = getSupportFragmentManager();
//防止app闪退后fragment重叠
if (savedInstanceState != null) {
//读取上一次界面Save的时候tab选中的状态
mrIndex = savedInstanceState.getInt(PRV_SELINDEX, mrIndex);
tabCarFragment = (TabCarFragment) fragmentManager.findFragmentByTag(FRAGMENT_TAG[1]);
tabMapFragment = (TabMapFragment) fragmentManager.findFragmentByTag(FRAGMENT_TAG[0]);
tabFindFragment = (TabFindFragment) fragmentManager.findFragmentByTag(FRAGMENT_TAG[2]);
tabMeFragment = (TabMeFragment) fragmentManager.findFragmentByTag(FRAGMENT_TAG[3]);
}
//初始化
initView();
}
@Override
protected void onSaveInstanceState(Bundle outState) {
outState.putInt(PRV_SELINDEX, mrIndex);
super.onSaveInstanceState(outState);
}
protected void initView() {
//获得RadioGroup控件
mRgGroup = (RadioGroup)findViewById(R.id.rg_group);
//选择设置Fragment
setTabSelection(show_tab_map);
//点击事件
mRgGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
switch (checkedId) {
case R.id.rb_car://导航
setTabSelection(show_tab_car);
break;
case R.id.rb_map://地图
setTabSelection(show_tab_map);
break;
case R.id.rb_find://发现
setTabSelection(show_tab_find);
break;
case R.id.rb_me://我的
setTabSelection(show_tab_me);
break;
default:
break;
}
}
});
}
/**
* 根据传入的index参数来设置选中的tab页。
*
* @param id 传入的选择的fragment
*/
private void setTabSelection(int id) { //根据传入的index参数来设置选中的tab页。
if (id == index) {
return;
}
index = id;
// 开启一个Fragment事务
FragmentTransaction transaction = fragmentManager.beginTransaction();
// 设置切换动画
transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
// 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
hideFragments(transaction);
switch (index) {
case show_tab_car://导航的fragment
mRgGroup.check(R.id.rb_car);
if (tabCarFragment == null) {
tabCarFragment = new TabCarFragment();
transaction.add(R.id.fl_container, tabCarFragment, FRAGMENT_TAG[index]);
} else {
transaction.show(tabCarFragment);
}
transaction.commit();
break;
case show_tab_map://地图的fragment
mRgGroup.check(R.id.rb_map);
if (tabMapFragment == null) {
tabMapFragment = new TabMapFragment();
transaction.add(R.id.fl_container, tabMapFragment, FRAGMENT_TAG[index]);
} else {
transaction.show(tabMapFragment);
}
transaction.commit();
break;
case show_tab_find://的fragment
mRgGroup.check(R.id.rb_find);//设置商城被选中
if (tabFindFragment == null) {
tabFindFragment = new TabFindFragment();
transaction.add(R.id.fl_container, tabFindFragment, FRAGMENT_TAG[index]);
} else {
transaction.show(tabFindFragment);
}
transaction.commit();
break;
case show_tab_me://我的的fragment
mRgGroup.check(R.id.rb_me);//我的的fragmen
if (tabMeFragment == null) {
tabMeFragment = new TabMeFragment();
transaction.add(R.id.fl_container, tabMeFragment, FRAGMENT_TAG[index]);
} else {
transaction.show(tabMeFragment);
}
transaction.commit();
break;
default:
break;
}
}
/**
* 隐藏fragment
*
* @param transaction
*/
private void hideFragments(FragmentTransaction transaction) {
if (tabCarFragment != null) {
transaction.hide(tabCarFragment);
}
if (tabMapFragment != null) {
transaction.hide(tabMapFragment);
}
if (tabFindFragment != null) {
transaction.hide(tabFindFragment);
}
if (tabMeFragment != null) {
transaction.hide(tabMeFragment);
}
}
}
欢迎大神指教，由于作者水平有限，本博文可能某些地方叙述不当或者有错误，请大家见谅并指出错误，非常感谢。
2936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
