Android开发之底部导航实现总结

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

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

1.布局：

<?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/content"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1.0"
 android:background="@color/white" />
 
 <View
 android:layout_width="match_parent"
 android:layout_height="1dp"
 android:background="@color/view" />
 
 <RadioGroup
 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">
 
 <RadioButton
 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" />
 
 <RadioButton
 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" />
 
 <RadioButton
 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" />
 
 <RadioButton
 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" />
 
 <RadioButton
 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" />
 
 </RadioGroup>
</LinearLayout>

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.布局：

<?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/realtabcontent"
 android:layout_width="match_parent"
 android:layout_height="0dip"
 android:layout_weight="1" />
 
 <android.support.v4.app.FragmentTabHost
 android:id="@android:id/tabhost"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="#4A192F">
 
 <FrameLayout
 android:id="@android:id/tabcontent"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:layout_weight="0" />
 </android.support.v4.app.FragmentTabHost>
 
</LinearLayout>

tab_item_view布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
 
<ImageView
android:id="@+id/imageview"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:padding="3dp"/>
 
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/tab_text"
android:textSize="14sp"/>
 
</LinearLayout>

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;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.布局：

<?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/layFrame"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1" />
 
 <com.ashokvarma.bottomnavigation.BottomNavigationBar
 android:id="@+id/bottom_navigation_bar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom" />
 
</LinearLayout>

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<Fragment> 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<Fragment> getFragments() {
 ArrayList<Fragment> 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) {
 
 }
}

时间： 2025-01-24 05:48:45

Android开发之底部导航实现总结的相关文章

android-这个地底部导航栏是怎么做出来的

问题描述 这个地底部导航栏是怎么做出来的 首页,订单,我的三个按钮,主要是底部一直悬浮在那儿做导航按钮这个效果怎么弄的 解决方案 如上面说的你可以在下面用个Fragment,上面用FrameLayout,但是切换的不同界面都要继承自Fragment,而不是Activity.最近我也在写这个,我直接在界面上用FrameLayout布局,然后把要显示的不同界面的布局都叠加到FrameLayout中,然后点击不同的按钮可以把其他的界面隐藏掉,只显示一个界面 解决方案二: 你可以当下面是个framlay

Android开发之微信底部菜单栏实现的几种方法汇总_Android

 实现方式 实现的方式有很多种 这里总结最常见的几种方式,以后再添加其他的. viewPager + RadioGroup viewPager + FragmentTabHost viewpager +TabLayout viewPager+RadioGroup 感觉这是最简单的一个了,我也就不贴代码 说说我理解的思路吧 通过给pager 和RadioGroup 添加监听,监听两个控件的变化 实现联动 当viewPager的显示pager改变就会触发监听 ,在监听中选中对应的RadioButto

Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果_Android

BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

Android中修改TabLayout底部导航条Indicator长短的方法

前言 对于Tablayout相信大家都不陌生,在开发中使用的应该很频繁了,但是底部导航条长短是固定死的,需要自己来改动长短,找了半天没找着方法,看了下官方建议,可以通过映射来修改自己想要的长短,其实也就几行代码的问题. 看代码: public static void setIndicator(Context context, TabLayout tabs, int leftDip, int rightDip) { Class<?> tabLayout = tabs.getClass(); Fi

Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

三步搞定android应用底部导航栏

很多android应用底部都有一个底部导航栏,方便用户在使用过程中随意切换.目前常用的做法有三种:一种是使用自定义tabHost,一种是使用activityGroup,一种是结合FrameLayout实现.笔者再做了多款应用后,为了节约开发周期,封装了一个抽象类,只要三步便可完成底部栏的生成及不同页面的调用. public class ActivitycollectiondemoActivity extends ActivityCollection { /** Called when the a

Android底部导航栏实现（三）之TextView+LinearLayout

这里简单记录下通过TextView+LinearLayout+Fragment来实现Android底部导航栏. 布局 <!--fragment_text_tab.xml-->    <?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"       

Android底部导航栏实现（四）之TabLayout+ViewPager

这里简单记录一下通过TabLayout+ViewPager来实现Android底部导航栏.   布局 <?xml version="1.0" encoding="utf-8"?>  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                  xmlns:app="http://schemas.an

android 导航-求一份android百度地图gps导航开发代码（带有详细代码）

问题描述 求一份android百度地图gps导航开发代码(带有详细代码) 各位大神,给一份android百度地图gps导航开发代码,带有详细讲解,如果有视频就更好了,.有没有?有没有?有没有?跪求-- 解决方案 以前回答过类似的问题,姐姐毫无保留地给了代码,题主拿到代码就高高兴兴蹦蹦跳跳地跑啦.所以除非lz有诚意先采纳了,否则姐姐一般不会先给出代码了. 解决方案二: 百度API里面不是有Demo么