[android底部导航栏]Android开发之底部导航实现总结

底部导航有很多种实现方式。目前比较常用的是RadioGroup+Fragment，FragmentTabHost+Fragment，BottomNavigationBar三种方式，下面分别介绍：

一、RadioGroup+Fragment方式：这种方式是最老的实现方式，代码复杂。

1.布局：

 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 
 <frameLayout
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1.0"
 android:background="@color/white" />
 
   android:layout_width="match_parent"
 android:layout_height="1dp"
 android:background="@color/view" />
 
   android:id="@+id/group_home"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:background="#4A192F"
 android:gravity="center_vertical"
 android:orientation="horizontal">
 
   android:id="@+id/radio_main"
 style="@style/home_tab_bottom"
 android:checked="true"
 android:drawableTop="@drawable/home_tab_main_selector"
 android:text="首页"
 android:textColor="@color/titlebar_bg"
 android:textSize="14sp" />
 
   android:id="@+id/radio_assortment"
 style="@style/home_tab_bottom"
 android:drawableTop="@drawable/home_tab_assortment_selector"
 android:text="分类"
 android:textColor="@color/white"
 android:textSize="14sp" />
 
   android:id="@+id/radio_car"
 style="@style/home_tab_bottom"
 android:drawableTop="@drawable/home_tab_car_selector"
 android:text="购物车"
 android:textColor="@color/white"
 android:textSize="14sp" />
 
   android:id="@+id/radio_recommend"
 style="@style/home_tab_bottom"
 android:drawableTop="@drawable/home_tab_recommend_selector"
 android:text="热榜"
 android:textColor="@color/white"
 android:textSize="14sp" />
 
   android:id="@+id/radio_my"
 style="@style/home_tab_bottom"
 android:drawableTop="@drawable/home_tab_my_selector"
 android:text="我的"
 android:textColor="@color/white"
 android:textSize="14sp" />
 
 

2.java代码：

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.widget.RadioButton;
import android.widget.RadioGroup;
 
import cn.zmit.bottomnavigationdemo.R;
import cn.zmit.bottomnavigationdemo.fragment.FiveFragment;
import cn.zmit.bottomnavigationdemo.fragment.FourFragment;
import cn.zmit.bottomnavigationdemo.fragment.OneFragment;
import cn.zmit.bottomnavigationdemo.fragment.ThreeFragment;
import cn.zmit.bottomnavigationdemo.fragment.TwoFragment;
 
/**
 * Created by Administrator on 2016/8/9.
 * RadioGroup+Fragment
 */
public class OneActivity extends FragmentActivity {
 private RadioGroup mRadioGroup;
 
private RadioButton radio_main;//主页
 
private RadioButton radio_my;//我的
 
private RadioButton radio_assortment;//分类
 
private RadioButton radio_car;//购物车
 
private RadioButton radio_recommend;//热榜
 
private OneFragment mOneFragment;//主页
 private TwoFragment mTwoFragment;//分类
 private ThreeFragment mThreeFragment;//购物车
 private FourFragment mFourFragment;//热榜
 private FiveFragment mFiveFragment;//我的
 private FragmentManager fragmentManager;
 
@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_one);
 fragmentManager = getSupportFragmentManager();
 init();//获取ID
 setTab(1);//设置首页为默认显示
 }
 
 /**
 * 获取ID
 */
 private RadioGroup.OnCheckedChangeListener onCheckedChangeListener;
 private int checkId;
 
private void init() {
 mRadioGroup = (RadioGroup) findViewById(R.id.group_home);
 radio_main = (RadioButton) findViewById(R.id.radio_main);
 radio_my = (RadioButton) findViewById(R.id.radio_my);
 radio_assortment = (RadioButton) findViewById(R.id.radio_assortment);
 radio_car = (RadioButton) findViewById(R.id.radio_car);
 radio_recommend = (RadioButton) findViewById(R.id.radio_recommend);
 onCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
 @Override
 public void onCheckedChanged(RadioGroup group, int checkedId) {
 if (checkId != checkedId) {
 switch (checkedId) {
 case R.id.radio_main:
 setTab(1);
 changeTab(1);
 break;
 case R.id.radio_my:
 changeTab(5);
 setTab(5);
 break;
 case R.id.radio_assortment:
 changeTab(2);
 setTab(2);
 break;
 case R.id.radio_car:
 setTab(3);
 changeTab(3);
 break;
 case R.id.radio_recommend:
 setTab(4);
 changeTab(4);
 break;
 }
 }
 checkId = checkedId;
 }
 };
 mRadioGroup.setOnCheckedChangeListener(onCheckedChangeListener);
 }
 
/***
 * 切换tab时的变化
 *
 * @param i
 */
 private void changeTab(int i) {
 
switch (i) {
 case 1:
 radio_main.setTextColor(getResources().getColor(R.color.titlebar_bg));
 radio_my.setTextColor(getResources().getColor(R.color.white));
 radio_assortment.setTextColor(getResources().getColor(R.color.white));
 radio_recommend.setTextColor(getResources().getColor(R.color.white));
 radio_car.setTextColor(getResources().getColor(R.color.white));
 break;
 case 2:
 radio_main.setTextColor(getResources().getColor(R.color.white));
 radio_assortment.setTextColor(getResources().getColor(R.color.titlebar_bg));
 radio_my.setTextColor(getResources().getColor(R.color.white));
 radio_recommend.setTextColor(getResources().getColor(R.color.white));
 radio_car.setTextColor(getResources().getColor(R.color.white));
 
break;
 case 3:
 radio_main.setTextColor(getResources().getColor(R.color.white));
 radio_my.setTextColor(getResources().getColor(R.color.white));
 radio_car.setTextColor(getResources().getColor(R.color.titlebar_bg));
 radio_recommend.setTextColor(getResources().getColor(R.color.white));
 radio_assortment.setTextColor(getResources().getColor(R.color.white));
 break;
 case 4:
 radio_main.setTextColor(getResources().getColor(R.color.white));
 radio_my.setTextColor(getResources().getColor(R.color.white));
 radio_car.setTextColor(getResources().getColor(R.color.white));
 radio_recommend.setTextColor(getResources().getColor(R.color.titlebar_bg));
 radio_assortment.setTextColor(getResources().getColor(R.color.white));
 break;
 case 5:
 radio_main.setTextColor(getResources().getColor(R.color.white));
 radio_my.setTextColor(getResources().getColor(R.color.titlebar_bg));
 radio_car.setTextColor(getResources().getColor(R.color.white));
 radio_recommend.setTextColor(getResources().getColor(R.color.white));
 radio_assortment.setTextColor(getResources().getColor(R.color.white));
 break;
 }
 }
 
/***
 * 切换tab
 */
 private void setTab(int index) {
 FragmentTransaction transaction = fragmentManager.beginTransaction();
 hideFragments(transaction);
 switch (index) {
 case 1:
 if (mOneFragment == null) {
 mOneFragment = new OneFragment();
 transaction.add(R.id.content, mOneFragment);
 } else {
 transaction.show(mOneFragment);
 mOneFragment.setUserVisibleHint(true);
 }
 break;
 case 2:
 if (mTwoFragment == null) {
 mTwoFragment = new TwoFragment();
 transaction.add(R.id.content, mTwoFragment);
 } else {
 transaction.show(mTwoFragment);
 mTwoFragment.setUserVisibleHint(true);
 }
 break;
 case 3:
 if (mThreeFragment == null) {
 mThreeFragment = new ThreeFragment();
 transaction.add(R.id.content, mThreeFragment);
 } else {
 transaction.show(mThreeFragment);
 mThreeFragment.setUserVisibleHint(true);
 }
 break;
 case 4:
 if (mFourFragment == null) {
 mFourFragment = new FourFragment();
 transaction.add(R.id.content, mFourFragment);
 } else {
 transaction.show(mFourFragment);
 mFourFragment.setUserVisibleHint(true);
 }
 break;
 case 5:
 if (mFiveFragment == null) {
 mFiveFragment = new FiveFragment();
 transaction.add(R.id.content, mFiveFragment);
 } else {
 transaction.show(mFiveFragment);
 mFiveFragment.setUserVisibleHint(true);
 }
 break;
 }
 transaction.commit();
 }
 
private void hideFragments(FragmentTransaction transaction) {
 
if (mOneFragment != null) {
 transaction.hide(mOneFragment);
 }
 if (mTwoFragment != null) {
 transaction.hide(mTwoFragment);
 }
 if (mThreeFragment != null) {
 transaction.hide(mThreeFragment);
 }
 if (mFourFragment != null) {
 transaction.hide(mFourFragment);
 }
 if (mFiveFragment != null) {
 transaction.hide(mFiveFragment);
 }
 }
}
效果图：

RadioGroup+Fragment方式

二、FragmentTabHost+Fragment：现在常用的实现方式，代码相对简洁一些。

1.布局：

 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >
 
 <frameLayout
 android:layout_width="match_parent"
 android:layout_height="0dip"
 android:layout_weight="1" />
 
   android:id="@android:id/tabhost"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#4A192F">
 
 <frameLayout
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:layout_weight="0" />
 
 

tab_item_view布局：

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
 
android:id="@+id/imageview"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:padding="3dp"/>
 
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/tab_text"
android:textSize="14sp"/>
 

2.java代码：

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;
 
import cn.zmit.bottomnavigationdemo.R;
import cn.zmit.bottomnavigationdemo.fragment.FiveFragment;
import cn.zmit.bottomnavigationdemo.fragment.FourFragment;
import cn.zmit.bottomnavigationdemo.fragment.OneFragment;
import cn.zmit.bottomnavigationdemo.fragment.ThreeFragment;
import cn.zmit.bottomnavigationdemo.fragment.TwoFragment;
 
/**
 * Created by Administrator on 2016/8/9.
 * FragmentTabHost+Fragment
 */
public class TwoActivity extends FragmentActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_two);
 initView();
 }
 
private FragmentTabHost mTabHost;
 
/**
 * 布局填充器
 *
 */
 private LayoutInflater mLayoutInflater;
 
/**
 * Fragment数组界面
 *
 */
 private Class mFragmentArray[] = { OneFragment.class, TwoFragment.class,
 ThreeFragment.class, FourFragment.class, FiveFragment.class };
 /**
 * 存放图片数组
 *
 */
 private int mImageArray[] = { R.drawable.home_tab_main_selector,
 R.drawable.home_tab_assortment_selector, R.drawable.home_tab_car_selector,
 R.drawable.home_tab_recommend_selector, R.drawable.home_tab_my_selector };
 
/**
 * 选修卡文字
 *
 */
 private String mTextArray[] = { "首页", "分类", "购物车", "热榜", "我的" };
 
/**
 * 初始化组件
 */
 private void initView() {
 mLayoutInflater = LayoutInflater.from(this);
 
// 找到TabHost
 mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
 mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
 // 得到fragment的个数
 int count = mFragmentArray.length;
 for (int i = 0; i &amp;lt; count; i++) {
 // 给每个Tab按钮设置图标、文字和内容
 TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextArray[i])
 .setIndicator(getTabItemView(i));
 // 将Tab按钮添加进Tab选项卡中
 mTabHost.addTab(tabSpec, mFragmentArray[i], null);
 }
 }
 
/**
 *
 * 给每个Tab按钮设置图标和文字
 */
 private View getTabItemView(int index) {
 View view = mLayoutInflater.inflate(R.layout.tab_item_view, null);
 ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
 imageView.setBackgroundResource(mImageArray[index]);
 TextView textView = (TextView) view.findViewById(R.id.textview);
 textView.setText(mTextArray[index]);
 return view;
 }
}

FragmentTabHost+Fragment方式

三、BottomNavigationBar：最新的实现方式。

在使用之前，需要在Android Studio

1.布局：

 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 
 <frameLayout
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1" />
 
   android:id="@+id/bottom_navigation_bar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom" />
 

2.java代码：

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
 
import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
 
import java.util.ArrayList;
 
import cn.zmit.bottomnavigationdemo.R;
import cn.zmit.bottomnavigationdemo.fragment.AssortmentFragment;
import cn.zmit.bottomnavigationdemo.fragment.CarFragment;
import cn.zmit.bottomnavigationdemo.fragment.MainFragment;
import cn.zmit.bottomnavigationdemo.fragment.MySpaceFragment;
import cn.zmit.bottomnavigationdemo.fragment.RecommendFragment;
 
/**
 * Created by Administrator on 2016/8/9.
 * BottomNavigationBar
 */
public class ThreeActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {
 private ArrayList fragments;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_three);
 BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
 bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
 bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
 bottomNavigationBar.setBarBackgroundColor(R.color.bg);
 bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.home_tab_main_selector, "首页"))
 .addItem(new BottomNavigationItem(R.drawable.home_tab_assortment_selector, "分类"))
 .addItem(new BottomNavigationItem(R.drawable.home_tab_car_selector, "购物车"))
 .addItem(new BottomNavigationItem(R.drawable.home_tab_recommend_selector, "热榜"))
 .addItem(new BottomNavigationItem(R.drawable.home_tab_my_selector, "我的"))
 .setFirstSelectedPosition(0)
 .initialise();
 fragments = getFragments();
 setDefaultFragment();
 bottomNavigationBar.setTabSelectedListener(this);
 }
 
 /**
 * 设置默认的
 */
 private void setDefaultFragment() {
 FragmentManager fm = getSupportFragmentManager();
 FragmentTransaction transaction = fm.beginTransaction();
 transaction.replace(R.id.layFrame, MainFragment.newInstance("首页"));
 transaction.commit();
 }
 
 private ArrayList getFragments() {
 ArrayList fragments = new ArrayList<>();
 fragments.add(MainFragment.newInstance("首页"));
 fragments.add(AssortmentFragment.newInstance("分类"));
 fragments.add(CarFragment.newInstance("购物车"));
 fragments.add(RecommendFragment.newInstance("热榜"));
 fragments.add(MySpaceFragment.newInstance("我的"));
 return fragments;
 }
 
 @Override
 public void onTabSelected(int position) {
 if (fragments != null) {
 if (position < fragments.size()) {
 FragmentManager fm = getSupportFragmentManager();
 FragmentTransaction ft = fm.beginTransaction();
 Fragment fragment = fragments.get(position);
 if (fragment.isAdded()) {
 ft.replace(R.id.layFrame, fragment);
 } else {
 ft.add(R.id.layFrame, fragment);
 }
 ft.commitAllowingStateLoss();
 }
 }
 
 }
 
 @Override
 public void onTabUnselected(int position) {
 if (fragments != null) {
 if (position < fragments.size()) {
 FragmentManager fm = getSupportFragmentManager();
 FragmentTransaction ft = fm.beginTransaction();
 Fragment fragment = fragments.get(position);
 ft.remove(fragment);
 ft.commitAllowingStateLoss();
 }
 }
 }
 
 @Override
 public void onTabReselected(int position) {
 
 }
}

[android底部导航栏]Android开发之底部导航实现总结

http://m.bbyears.com/banzhurengongzuo/108279.html

推荐访问: