android实现底部导航栏

作者：袖梨 2022-06-25

底部导航栏我选择用FragmentTabHost+Fragment来实现，这个方法比较好用，代码量也不多

首先是开始的activity_main.xml

也可以直接在xml文件里面写

这xml文件就一个view加一个tab view用来显示碎片，tab用来放置底部按钮的数量

再来是tab_foot.xml

这是每个底部按钮的布局设置的xml文件

再来是MainActivity的代码

package com.gjn.mynavigation; 
 
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.view.Window; 
import android.widget.ImageView; 
import android.widget.TabWidget; 
import android.widget.TextView; 
import android.widget.TabHost.OnTabChangeListener; 
import android.widget.TabHost.TabSpec; 
 
public class MainActivity extends FragmentActivity implements OnTabChangeListener { 
 
 private FragmentTabHost mTabHost; 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  requestWindowFeature(Window.FEATURE_NO_TITLE); 
  setContentView(R.layout.activity_main); 
 
  //初始化FragmentTabHost 
  initHost(); 
  //初始化底部导航栏 
  initTab(); 
  //默认选中 
  mTabHost.onTabChanged(TabDb.getTabsTxt()[0]); 
 } 
 
 private void initTab() { 
  String[] tabs = TabDb.getTabsTxt(); 
  for (int i = 0; i

其中TabDb类是用来设置导航栏的数据和图片切换时候的资源
以下是TabDb类

package com.gjn.mynavigation; 
 
public class TabDb { 
 /*** 
 * 获得底部所有项 
 */ 
 public static String[] getTabsTxt() { 
  String[] tabs = {"首页","交易","地点","我的"}; 
  return tabs; 
 } 
 /*** 
 * 获得所有碎片 
 */ 
 public static Class[] getFramgent(){ 
  Class[] cls = {OneFm.class,TwoFm.class,ThreeFm.class,FourFm.class}; 
  return cls ; 
 } 
 /*** 
 * 获得所有点击前的图片 
 */ 
 public static int[] getTabsImg(){ 
  int[] img = {R.drawable.home1,R.drawable.glod1,R.drawable.xc1,R.drawable.user1}; 
  return img ; 
 } 
 /*** 
 * 获得所有点击后的图片 
 */ 
 public static int[] getTabsImgLight(){ 
  int[] img = {R.drawable.home2,R.drawable.glod2,R.drawable.xc2,R.drawable.user2}; 
  return img ; 
 } 
}

到此，底部导航栏就算是完全实现了。

现在来实现顶部导航栏，看了许多最后使用了RadioGroup+ViewPager来实现
首先是为第一个碎片设计一个xml布局：fm_one.xml

设置顶部导航栏和显示view
之后是导航栏的每个项的布局

tab_rb.xml

其中设置selector文件来控制点击和未点击的状态

tab_rb_selector.xml

设置了点击和默认的时候的显示状态
最后来实现OneFm类

package com.gjn.mynavigation; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.util.DisplayMetrics; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.HorizontalScrollView; 
import android.widget.RadioButton; 
import android.widget.RadioGroup; 
import android.widget.RadioGroup.LayoutParams; 
import android.widget.RadioGroup.OnCheckedChangeListener; 
 
public class OneFm extends Fragment implements OnPageChangeListener { 
 
 private View view; 
 private RadioGroup rg_; 
 private ViewPager vp_; 
 private HorizontalScrollView hv_; 
 private List newsList = new ArrayList(); 
 private OneFmAdapter adapter; 
 
 @Override 
 public View onCreateView(LayoutInflater inflater, 
 @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
  if (view == null) { 
   //初始化view 
   view = inflater.inflate(R.layout.fm_one, container,false); 
   rg_ = (RadioGroup) view.findViewById(R.id.one_rg); 
   vp_ = (ViewPager) view.findViewById(R.id.one_view); 
   hv_ = (HorizontalScrollView) view.findViewById(R.id.one_hv); 
   //设置RadioGroup点击事件 
   rg_.setOnCheckedChangeListener(new OnCheckedChangeListener() { 
 
    @Override 
    public void onCheckedChanged(RadioGroup group, int id) { 
     vp_.setCurrentItem(id); 
    } 
   } 
   //初始化顶部导航栏 
   initTab(inflater); 
   //初始化viewpager 
   initView(); 
  } 
  /**
  * 底部导航栏切换后 由于没有销毁顶部设置导致如果没有重新设置view 
  * 导致底部切换后切回顶部页面数据会消失等bug 
  * 以下设置每次重新创建view即可 
  */ 
  ViewGroup parent = (ViewGroup) view.getParent(); 
  if (parent != null) { 
   parent.removeView(view); 
  } 
  return view; 
  } 
  /*** 
  * 初始化viewpager 
  */ 
  private void initView() { 
  List hTabs = HTabDb.getSelected(); 
  for (int i = 0; i  hTabs = HTabDb.getSelected(); 
  for (int i = 0; i

其中有两个数据类和一个碎片类

数据类

HTab.java

package com.gjn.mynavigation; 
 
/*** 
 * 头部Tab属性 
 * 
 */ 
public class HTab { 
 private String name; 
 
 public HTab(String name) { 
  super(); 
  this.setName(name); 
 } 
 
 public String getName() { 
  return name; 
 } 
 
 public void setName(String name) { 
  this.name = name; 
 } 
}

HTabDb.java

package com.gjn.mynavigation; 
 
import java.util.ArrayList; 
import java.util.List; 
 
public class HTabDb { 
 private static final List Selected = new ArrayList(); 
 static{ 
  Selected.add(new HTab("今日")); 
  Selected.add(new HTab("头条")); 
  Selected.add(new HTab("娱乐")); 
  Selected.add(new HTab("财经")); 
  Selected.add(new HTab("军事")); 
  Selected.add(new HTab("科技")); 
  Selected.add(new HTab("时尚")); 
  Selected.add(new HTab("体育")); 
 } 
 /*** 
 * 获得头部tab的所有项 
 */ 
 public static List getSelected() { 
  return Selected; 
 } 
}

碎片类
OneFm1.java

package com.gjn.mynavigation; 
 
import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.TextView; 
 
public class OneFm1 extends Fragment { 
 
 private String name; 
 
 @Override 
 public void setArguments(Bundle args) { 
  name = args.getString("name"); 
 } 
 
 @Override 
 public View onCreateView(LayoutInflater inflater, 
 @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 
  View view = inflater.inflate(R.layout.fragment, container,false); 
  ((TextView) view.findViewById(R.id.fm_text)).setText(name); 
  return view; 
 } 
}

这样就把顶部的导航栏加入到了第一个fragment里面并且实现了切换功能
最后把fragment.xml贴下，就是每个碎片最默认的显示页面